feat: Shift+Click Range Selection Not Supported in Multi-Select Lists

src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type {GestureResponderEvent} from 'react-native';
 import {View} from 'react-native';
 import Checkbox from '@components/Checkbox';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -10,6 +11,8 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getDecodedLeafCategoryName} from '@libs/CategoryUtils';
 import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils';
+import {getModifierKeysFromEvent} from '@libs/shiftRangeSelection';
+import type {Modifiers} from '@libs/shiftRangeSelection';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {GroupedTransactions} from '@src/types/onyx';
@@ -41,7 +44,7 @@ type MoneyRequestReportGroupHeaderProps = {
     isDisabled?: boolean;
 
     /** Callback when group checkbox is toggled - receives groupKey */
-    onToggleSelection?: (groupKey: string) => void;
+    onToggleSelection?: (groupKey: string, options?: Partial<Modifiers>) => void;
 
     /** Pending action for offline feedback styling (Pattern B - Optimistic WITH Feedback) */
     pendingAction?: PendingAction;
@@ -77,8 +80,8 @@ function MoneyRequestReportGroupHeader({
 
     const textStyle = shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : [styles.labelStrong];
 
-    const handleToggleSelection = () => {
-        onToggleSelection?.(groupKey);
+    const handleToggleSelection = (event?: GestureResponderEvent | KeyboardEvent) => {
+        onToggleSelection?.(groupKey, getModifierKeysFromEvent(event));
     };
 
     const groupHeaderStyle = !shouldUseNarrowLayout

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -18,6 +18,7 @@ import useTransactionInlineEdit from '@hooks/useTransactionInlineEdit';
 import ControlSelection from '@libs/ControlSelection';
 import canUseTouchScreen from '@libs/DeviceCapabilities/canUseTouchScreen';
 import {hasFlexColumn} from '@libs/SearchUIUtils';
+import type {Modifiers} from '@libs/shiftRangeSelection';
 import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -41,7 +42,7 @@ type MoneyRequestReportTransactionItemProps = {
     isSelectionModeEnabled: boolean;
 
     /** Callback function triggered upon pressing a transaction checkbox. */
-    toggleTransaction: (transactionID: string) => void;
+    toggleTransaction: (transactionID: string, options?: Partial<Modifiers>) => void;
 
     /** Callback function triggered upon pressing a transaction. */
     handleOnPress: (transactionID: string) => void;

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -33,6 +33,7 @@ import useOnyx from '@hooks/useOnyx';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
+import useShiftRangeSelection from '@hooks/useShiftRangeSelection';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -62,6 +63,8 @@ import {
 } from '@libs/ReportUtils';
 import type {SortableColumnName} from '@libs/ReportUtils';
 import {compareValues, getColumnsToShow, getTableMinWidth, hasFlexColumn, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils';
+import {applyShiftRangeBatchToKeySet, farthestEndFromAnchor} from '@libs/shiftRangeSelection';
+import type {Modifiers} from '@libs/shiftRangeSelection';
 import {getPendingSubmitFollowUpAction} from '@libs/telemetry/submitFollowUpAction';
 import {transactionHasRBR} from '@libs/TransactionPreviewUtils';
 import {getTransactionPendingAction, getVisibleTransactionViolations, isTransactionPendingDelete, shouldShowExpenseBreakdown} from '@libs/TransactionUtils';
@@ -251,19 +254,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(
@@ -451,12 +441,46 @@ function MoneyRequestReportTransactionList({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [resolvedTransactions, currentGroupBy, report?.reportID, report?.currency, localeCompare, shouldShowGroupedTransactions]);
 
-    const visualOrderTransactionIDs = useMemo(() => {
-        if (!shouldShowGroupedTransactions || 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, shouldShowGroupedTransactions]);
+    // Visual order, not the prop's DB-insertion order.
+    const visualOrderTransactions = useMemo(
+        () => (shouldShowGroupedTransactions && groupedTransactions.length > 0 ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions),
+        [groupedTransactions, resolvedTransactions, shouldShowGroupedTransactions],
+    );
+
+    const visualOrderTransactionIDs = useMemo(
+        () => visualOrderTransactions.filter((transaction) => !isTransactionPendingDelete(transaction)).map((transaction) => transaction.transactionID),
+        [visualOrderTransactions],
+    );
+
+    const rangeApi = useShiftRangeSelection<OnyxTypes.Transaction>({
+        items: visualOrderTransactions,
+        getItemKey: (t) => t.transactionID ?? null,
+        getSelectedKeys: () => selectedTransactionIDs,
+        isDisabledItem: (t) => isTransactionPendingDelete(t),
+        onApplyRange: (batch) =>
+            setSelectedTransactions(
+                applyShiftRangeBatchToKeySet(
+                    batch,
+                    selectedTransactionIDs,
+                    (t) => t.transactionID,
+                    (t) => !isTransactionPendingDelete(t),
+                ),
+            ),
+    });
+
+    const toggleTransaction = useCallback(
+        (transactionID: string, options?: Partial<Modifiers>) => {
+            const item = visualOrderTransactions.find((t) => t.transactionID === transactionID);
+            if (item && rangeApi.applyShiftClick(item, options)) {
+                return;
+            }
+            setSelectedTransactions(selectedTransactionIDs.includes(transactionID) ? selectedTransactionIDs.filter((t) => t !== transactionID) : [...selectedTransactionIDs, transactionID]);
+            if (item) {
+                rangeApi.notifyAnchor(item);
+            }
+        },
+        [setSelectedTransactions, selectedTransactionIDs, visualOrderTransactions, rangeApi],
+    );
 
     // Primitive proxy for visualOrderTransactionIDs used as the effect dependency below.
     // Other callers (e.g. TransactionDuplicateReview.onPreviewPressed) can write to the same
@@ -502,23 +526,37 @@ function MoneyRequestReportTransactionList({
     }, [groupedTransactions, selectedTransactionIDs]);
 
     const toggleGroupSelection = useCallback(
-        (groupKey: string) => {
+        (groupKey: string, options?: Partial<Modifiers>) => {
             const group = groupedTransactions.find((g) => g.groupKey === groupKey);
             if (!group) {
                 return;
             }
-            const groupTransactionIDs = group.transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID);
-            const anySelected = groupTransactionIDs.some((id) => selectedTransactionIDs.includes(id));
+            const selectableChildren = group.transactions.filter((t) => !isTransactionPendingDelete(t));
+
+            if (options?.shiftKey && selectableChildren.length > 0) {
+                const firstChild = selectableChildren.at(0);
+                const lastChild = selectableChildren.at(-1);
+                if (firstChild && lastChild) {
+                    const anchorKey = rangeApi.getAnchorKey();
+                    const anchorIdx = anchorKey ? visualOrderTransactions.findIndex((t) => t.transactionID === anchorKey) : -1;
+                    const firstIdx = visualOrderTransactions.findIndex((t) => t.transactionID === firstChild.transactionID);
+                    const lastIdx = visualOrderTransactions.findIndex((t) => t.transactionID === lastChild.transactionID);
+                    const target = farthestEndFromAnchor(firstIdx, lastIdx, anchorIdx) === 'first' ? firstChild : lastChild;
+                    if (rangeApi.applyShiftClick(target, options)) {
+                        return;
+                    }
+                }
+            }
 
-            let newSelectedTransactionIDs = selectedTransactionIDs;
-            if (anySelected) {
-                newSelectedTransactionIDs = selectedTransactionIDs.filter((id) => !groupTransactionIDs.includes(id));
-            } else {
-                newSelectedTransactionIDs = [...selectedTransactionIDs, ...groupTransactionIDs];
+            const groupTransactionIDs = selectableChildren.map((t) => t.transactionID);
+            const anySelected = groupTransactionIDs.some((id) => selectedTransactionIDs.includes(id));
+            setSelectedTransactions(anySelected ? selectedTransactionIDs.filter((id) => !groupTransactionIDs.includes(id)) : [...selectedTransactionIDs, ...groupTransactionIDs]);
+            const firstChild = selectableChildren.at(0);
+            if (firstChild) {
+                rangeApi.notifyAnchor(firstChild);
             }
-            setSelectedTransactions(newSelectedTransactionIDs);
         },
-        [groupedTransactions, selectedTransactionIDs, setSelectedTransactions],
+        [groupedTransactions, selectedTransactionIDs, setSelectedTransactions, rangeApi, visualOrderTransactions],
     );
 
     /**
@@ -794,6 +832,7 @@ function MoneyRequestReportTransactionList({
                             } else {
                                 setSelectedTransactions(transactionsWithoutPendingDelete.map((t) => t.transactionID));
                             }
+                            rangeApi.clearAnchor();
                         }}
                         accessibilityLabel={translate('accessibilityHints.selectAllTransactions')}
                         isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length}

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

@@ -2,12 +2,13 @@ import React from 'react';
 import {View} from 'react-native';
 import Checkbox from '@components/Checkbox';
 import type {SearchColumnType} from '@components/Search/types';
-import type {ListItem} from '@components/SelectionList/types';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getModifierKeysFromEvent} from '@libs/shiftRangeSelection';
+import type {Modifiers} from '@libs/shiftRangeSelection';
 import CONST from '@src/CONST';
 import ExpandCollapseArrowButton from './ExpandCollapseArrowButton';
 import TextCell from './TextCell';
@@ -46,7 +47,7 @@ type ColumnStyleKey =
     | typeof CONST.SEARCH.TABLE_COLUMNS.GROUP_YEAR
     | typeof CONST.SEARCH.TABLE_COLUMNS.GROUP_QUARTER;
 
-type BaseListItemHeaderProps<TItem extends ListItem> = {
+type BaseListItemHeaderProps = {
     /** The group item being rendered */
     item: BaseGroupListItemType;
 
@@ -60,7 +61,7 @@ type BaseListItemHeaderProps<TItem extends ListItem> = {
     columnStyleKey: ColumnStyleKey;
 
     /** Callback to fire when a checkbox is pressed */
-    onCheckboxPress?: (item: TItem) => void;
+    onCheckboxPress?: (options?: Partial<Modifiers>) => void;
 
     /** Whether this section items disabled for selection */
     isDisabled?: boolean | null;
@@ -84,7 +85,7 @@ type BaseListItemHeaderProps<TItem extends ListItem> = {
     columns?: SearchColumnType[];
 };
 
-function BaseListItemHeader<TItem extends ListItem>({
+function BaseListItemHeader({
     item,
     displayName,
     groupColumnKey,
@@ -97,7 +98,7 @@ function BaseListItemHeader<TItem extends ListItem>({
     isExpanded,
     onDownArrowClick,
     columns,
-}: BaseListItemHeaderProps<TItem>) {
+}: BaseListItemHeaderProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isLargeScreenWidth} = useResponsiveLayout();
@@ -144,7 +145,7 @@ function BaseListItemHeader<TItem extends ListItem>({
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
                     {!!canSelectMultiple && (
                         <Checkbox
-                            onPress={() => onCheckboxPress?.(item as unknown as TItem)}
+                            onPress={(event) => onCheckboxPress?.(getModifierKeysFromEvent(event))}
                             isChecked={isSelectAllChecked}
                             isIndeterminate={isIndeterminate}
                             disabled={!!isDisabled || item.isDisabledCheckbox}

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

@@ -3,7 +3,6 @@ import {View} from 'react-native';
 import Checkbox from '@components/Checkbox';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import type {SearchColumnType} from '@components/Search/types';
-import type {ListItem} from '@components/SelectionList/types';
 import TextWithTooltip from '@components/TextWithTooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import useLocalize from '@hooks/useLocalize';
@@ -12,19 +11,21 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
+import {getModifierKeysFromEvent} from '@libs/shiftRangeSelection';
+import type {Modifiers} from '@libs/shiftRangeSelection';
 import CONST from '@src/CONST';
 import type {CompanyCardFeed} from '@src/types/onyx/CardFeeds';
 import ExpandCollapseArrowButton from './ExpandCollapseArrowButton';
 import TextCell from './TextCell';
 import TotalCell from './TotalCell';
 import type {TransactionCardGroupListItemType} from './types';
 
-type CardListItemHeaderProps<TItem extends ListItem> = {
+type CardListItemHeaderProps = {
     /** The card currently being looked at */
     card: TransactionCardGroupListItemType;
 
     /** Callback to fire when a checkbox is pressed */
-    onCheckboxPress?: (item: TItem) => void;
+    onCheckboxPress?: (options?: Partial<Modifiers>) => void;
 
     /** Whether this section items disabled for selection */
     isDisabled?: boolean | null;
@@ -51,7 +52,7 @@ type CardListItemHeaderProps<TItem extends ListItem> = {
     columns?: SearchColumnType[];
 };
 
-function CardListItemHeader<TItem extends ListItem>({
+function CardListItemHeader({
     card: cardItem,
     onCheckboxPress,
     isDisabled,
@@ -62,7 +63,7 @@ function CardListItemHeader<TItem extends ListItem>({
     onDownArrowClick,
     columns,
     isExpanded,
-}: CardListItemHeaderProps<TItem>) {
+}: CardListItemHeaderProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
@@ -144,7 +145,7 @@ function CardListItemHeader<TItem extends ListItem>({
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
                     {!!canSelectMultiple && (
                         <Checkbox
-                            onPress={() => onCheckboxPress?.(cardItem as unknown as TItem)}
+                            onPress={(event) => onCheckboxPress?.(getModifierKeysFromEvent(event))}
                             isChecked={isSelectAllChecked}
                             isIndeterminate={isIndeterminate}
                             disabled={!!isDisabled || cardItem.isDisabledCheckbox}

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

@@ -1,27 +1,16 @@
 import React from 'react';
-import type {ListItem} from '@components/SelectionList/types';
 import useLocalize from '@hooks/useLocalize';
 import CONST from '@src/CONST';
 import type {BaseListItemHeaderProps} from './BaseListItemHeader';
 import BaseListItemHeader from './BaseListItemHeader';
 import type {TransactionCategoryGroupListItemType} from './types';
 
-type CategoryListItemHeaderProps<TItem extends ListItem> = Omit<BaseListItemHeaderProps<TItem>, 'item' | 'displayName' | 'groupColumnKey' | 'columnStyleKey'> & {
+type CategoryListItemHeaderProps = Omit<BaseListItemHeaderProps, 'item' | 'displayName' | 'groupColumnKey' | 'columnStyleKey'> & {
     /** The category currently being looked at */
     category: TransactionCategoryGroupListItemType;
 };
 
-function CategoryListItemHeader<TItem extends ListItem>({
-    category: categoryItem,
-    onCheckboxPress,
-    isDisabled,
-    canSelectMultiple,
-    isSelectAllChecked,
-    isIndeterminate,
-    isExpanded,
-    onDownArrowClick,
-    columns,
-}: CategoryListItemHeaderProps<TItem>) {
+function CategoryListItemHeader({category: categoryItem, ...baseProps}: CategoryListItemHeaderProps) {
     const {translate} = useLocalize();
 
     // formattedCategory is pre-decoded in SearchUIUtils, just translate empty values
@@ -30,18 +19,11 @@ function CategoryListItemHeader<TItem extends ListItem>({
 
     return (
         <BaseListItemHeader
+            {...baseProps}
             item={categoryItem}
             displayName={categoryName}
             groupColumnKey={CONST.SEARCH.TABLE_COLUMNS.GROUP_CATEGORY}
             columnStyleKey={CONST.SEARCH.TABLE_COLUMNS.CATEGORY}
-            onCheckboxPress={onCheckboxPress}
-            isDisabled={isDisabled}
-            canSelectMultiple={canSelectMultiple}
-            isSelectAllChecked={isSelectAllChecked}
-            isIndeterminate={isIndeterminate}
-            isExpanded={isExpanded}
-            onDownArrowClick={onDownArrowClick}
-            columns={columns}
         />
     );
 }