Use new transaction row style for Reports > Expenses

cspell.json

@@ -265,6 +265,7 @@
         "islarge",
         "ismedium",
         "isnonreimbursable",
+        "issmall",
         "ITSM",
         "Jakub",
         "janky",

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -50,7 +50,12 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             }),
             rbr: HTMLElementModel.fromCustomModel({
                 tagName: 'rbr',
-                mixedUAStyles: {...styles.formError, ...styles.mb0},
+                getMixedUAStyles: (tnode) => {
+                    if (tnode.attributes.issmall === undefined) {
+                        return {...styles.formError, ...styles.mb0};
+                    }
+                    return {...styles.formError, ...styles.mb0, ...styles.textMicro};
+                },
                 contentModel: HTMLContentModel.block,
             }),
             'muted-text': HTMLElementModel.fromCustomModel({
@@ -134,22 +139,23 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             }),
         }),
         [
+            styles.taskTitleMenuItem,
             styles.formError,
             styles.mb0,
             styles.colorMuted,
+            styles.mutedNormalTextLabel,
             styles.textLabelSupporting,
             styles.lh16,
             styles.textSupporting,
             styles.textLineThrough,
-            styles.mutedNormalTextLabel,
+            styles.textMicro,
             styles.onlyEmojisText,
-            styles.onlyEmojisTextLineHeight,
-            styles.taskTitleMenuItem,
+            styles.strong,
             styles.taskTitleMenuItemItalic,
             styles.em,
-            styles.strong,
             styles.h1,
             styles.blockquote,
+            styles.onlyEmojisTextLineHeight,
         ],
     );
     /* eslint-enable @typescript-eslint/naming-convention */

src/components/HTMLEngineProvider/HTMLRenderers/RBRRenderer.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
+import {StyleSheet} from 'react-native';
+import type {TextStyle} from 'react-native';
 import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-function RBRRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+function RBRRenderer({tnode, style}: CustomRendererProps<TText | TPhrasing>) {
     const styles = useThemeStyles();
     const htmlAttribs = tnode.attributes;
     const shouldShowEllipsis = htmlAttribs?.shouldshowellipsis !== undefined;
+    const flattenStyle = StyleSheet.flatten(style as TextStyle);
 
     return (
         <TNodeChildrenRenderer
@@ -18,7 +21,7 @@ function RBRRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
                         numberOfLines={shouldShowEllipsis ? 1 : 0}
                         ellipsizeMode="tail"
                         key={props.key}
-                        style={[styles.textLabelError]}
+                        style={[styles.textLabelError, flattenStyle]}
                     >
                         {props.childElement}
                     </Text>

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -298,6 +298,7 @@ function MoneyRequestReportTransactionList({
                                 onCheckboxPress={toggleTransaction}
                                 columns={allReportColumns}
                                 scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
+                                isInReportTableView
                             />
                         </PressableWithFeedback>
                     );

src/components/Search/index.tsx

@@ -79,11 +79,11 @@ function mapTransactionItemToSelectedEntry(item: TransactionListItemType, report
     ];
 }
 
-function mapToTransactionItemWithSelectionInfo(item: TransactionListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean) {
+function mapToTransactionItemWithAdditionalInfo(item: TransactionListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean) {
     return {...item, shouldAnimateInHighlight, isSelected: selectedTransactions[item.keyForList]?.isSelected && canSelectMultiple};
 }
 
-function mapToItemWithSelectionInfo(item: SearchListItem, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean) {
+function mapToItemWithAdditionalInfo(item: SearchListItem, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean) {
     if (isTaskListItemType(item)) {
         return {
             ...item,
@@ -99,11 +99,11 @@ function mapToItemWithSelectionInfo(item: SearchListItem, selectedTransactions:
     }
 
     return isTransactionListItemType(item)
-        ? mapToTransactionItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight)
+        ? mapToTransactionItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight)
         : {
               ...item,
               shouldAnimateInHighlight,
-              transactions: item.transactions?.map((transaction) => mapToTransactionItemWithSelectionInfo(transaction, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight)),
+              transactions: item.transactions?.map((transaction) => mapToTransactionItemWithAdditionalInfo(transaction, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight)),
               isSelected: item?.transactions?.length > 0 && item.transactions?.every((transaction) => selectedTransactions[transaction.keyForList]?.isSelected && canSelectMultiple),
           };
 }
@@ -502,7 +502,7 @@ function Search({queryJSON, currentSearchResults, lastNonEmptySearchResults, onS
         // Determine if either the base key or any transaction key matches
         const shouldAnimateInHighlight = isBaseKeyMatch || isAnyTransactionMatch;
 
-        return mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight);
+        return mapToItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight);
     });
 
     const hasErrors = Object.keys(searchResults?.errors ?? {}).length > 0 && !isOffline;

src/components/SelectionList/Search/ReportListItem.tsx

@@ -13,7 +13,6 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -44,8 +43,7 @@ function ReportListItem<TItem extends ListItem>({
     const {isLargeScreenWidth} = useResponsiveLayout();
 
     const dateColumnSize = useMemo(() => {
-        const shouldShowYearForSomeTransaction = reportItem.transactions.some((transaction) => shouldShowTransactionYear(transaction));
-        return shouldShowYearForSomeTransaction ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+        return reportItem.transactions.some((transaction) => transaction.shouldShowYear) ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
     }, [reportItem.transactions]);
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
@@ -102,7 +100,7 @@ function ReportListItem<TItem extends ListItem>({
         ...(sampleTransaction?.shouldShowTax ? [COLUMNS.TAX] : []),
         COLUMNS.TOTAL_AMOUNT,
         COLUMNS.ACTION,
-    ] as Array<ValueOf<typeof COLUMNS>>;
+    ] satisfies Array<ValueOf<typeof COLUMNS>>;
 
     return (
         <BaseListItem
@@ -129,7 +127,6 @@ function ReportListItem<TItem extends ListItem>({
                     <ReportListItemHeader
                         report={reportItem}
                         policy={policy}
-                        item={item}
                         onSelectRow={onSelectRow}
                         onCheckboxPress={onCheckboxPress}
                         isDisabled={isDisabledOrEmpty}
@@ -163,7 +160,7 @@ function ReportListItem<TItem extends ListItem>({
                                     }}
                                     isParentHovered={hovered}
                                     columnWrapperStyles={[styles.ph3, styles.pv1half]}
-                                    isInReportRow
+                                    isReportItemChild
                                 />
                             </View>
                         ))