Update table styles for RHP tables

src/CONST/index.ts

@@ -8359,6 +8359,8 @@ const CONST = {
             MONEY_REQUEST_REPORT_ACTIONS_LIST_SELECT_ALL: 'MoneyRequestReportActionsList-SelectAll',
             MONEY_REQUEST_REPORT_TRANSACTION_ITEM: 'MoneyRequestReportTransactionItem',
             REPORT_ACTION_AVATAR: 'Report-ReportActionAvatar',
+            PARTICIPANTS_ROW: 'Report-ParticipantsRow',
+            ROOM_MEMBERS_ROW: 'Report-RoomMembersRow',
         },
         SIDEBAR: {
             SIGN_IN_BUTTON: 'Sidebar-SignInButton',
@@ -8709,6 +8711,9 @@ const CONST = {
                 MORE_DROPDOWN: 'WorkspaceTags-MoreDropdown',
                 BULK_ACTIONS_DROPDOWN: 'WorkspaceTags-BulkActionsDropdown',
             },
+            REPORT_FIELDS: {
+                LIST_VALUE_ROW: 'WorkspaceReportFields-ListValueRow',
+            },
             TAXES: {
                 ROW: 'WorkspaceTaxes-Row',
                 ADD_BUTTON: 'WorkspaceTaxes-AddButton',

src/components/Table/Table.tsx

@@ -160,6 +160,7 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
     selectionEnabled,
     shouldEnableSelectionInNarrowPaneModal,
     onRowSelectionChange,
+    onSearchStringChange,
     ...listProps
 }: TableProps<DataType, ColumnKey, FilterKey>) {
     const {translate} = useLocalize();
@@ -264,6 +265,7 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
         selectionEnabled,
         shouldEnableSelectionInNarrowPaneModal,
         isMobileSelectionEnabled,
+        onSearchStringChange,
     };
 
     return (

src/components/Table/TableContext.tsx

@@ -67,6 +67,9 @@ type TableContextValue<DataType extends TableData, ColumnKey extends string = st
 
     /** Whether to use a narrow layout (e.g. on mobile screens). */
     shouldUseNarrowTableLayout: boolean;
+
+    /** Callback when the user changes the search string in the filter bar. */
+    onSearchStringChange?: (searchString: string) => void;
 };
 
 const defaultTableContextValue: TableContextValue<TableData, string> = {

src/components/Table/TableFilterBar/TableSearchBar.tsx

@@ -29,6 +29,7 @@ function TableSearchBar({label}: TableSearchBarProps) {
     const {
         activeSearchString,
         shouldUseNarrowTableLayout,
+        onSearchStringChange,
         tableMethods: {updateSearchString},
     } = useTableContext();
 
@@ -48,6 +49,11 @@ function TableSearchBar({label}: TableSearchBarProps) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const handleSearchStringChange = (text: string) => {
+        updateSearchString(text);
+        onSearchStringChange?.(text);
+    };
+
     const containerStyles = shouldUseNarrowTableLayout && styles.flex1;
 
     const touchableInputWrapperStyle = [styles.mnw200, !shouldUseNarrowTableLayout ? styles.h8 : styles.h11];
@@ -76,7 +82,7 @@ function TableSearchBar({label}: TableSearchBarProps) {
             clearButtonIconSize={shouldUseNarrowTableLayout ? undefined : variables.iconSizeSmall}
             onBlur={() => setInputFocused(false)}
             onFocus={() => setInputFocused(true)}
-            onChangeText={(text) => updateSearchString(text)}
+            onChangeText={handleSearchStringChange}
         />
     );
 }

src/components/Table/types.ts

@@ -200,6 +200,9 @@ type TableProps<DataType extends TableData, ColumnKey extends string = string, F
 
         /** Callback when an option is selected */
         onRowSelectionChange?: (selectedRowKeys: string[]) => void;
+
+        /** Optional callback fired when the active search string changes. */
+        onSearchStringChange?: (searchString: string) => void;
     }>;
 
 export type {

src/components/Tables/ReportParticipantsTable/ReportParticipantsTableRow.tsx

@@ -54,6 +54,7 @@ export default function ReportParticipantsTableRow({item, rowIndex, shouldUseNar
             rowIndex={rowIndex}
             disabled={item.disabled}
             accessibilityLabel={accessibilityLabel}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT.PARTICIPANTS_ROW}
             offlineWithFeedback={{pendingAction: item.pendingAction}}
             onPress={item.action}
         >