Update table styles for RHP tables

src/CONST/index.ts

@@ -8069,6 +8069,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',
@@ -8418,6 +8420,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

@@ -12,7 +12,7 @@ import CONST from '@src/CONST';
 
 import type {FlashListRef} from '@shopify/flash-list';
 
-import React, {useImperativeHandle, useRef} from 'react';
+import React, {useEffect, useImperativeHandle, useRef} from 'react';
 
 import type {TableContextValue} from './TableContext';
 import type {TableData, TableHandle, TableMethods, TableProps} from './types';
@@ -162,6 +162,7 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
     selectionEnabled,
     shouldEnableSelectionInNarrowPaneModal,
     onRowSelectionChange,
+    onSearchStringChange,
     ...listProps
 }: TableProps<DataType, ColumnKey, FilterKey>) {
     const {translate} = useLocalize();
@@ -182,6 +183,10 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
     const {middleware: searchMiddleware, activeSearchString, methods: searchMethods, hasActiveSearchString} = useSearching<DataType>({isItemInSearch});
     const searchedData = searchMiddleware(filteredData);
 
+    useEffect(() => {
+        onSearchStringChange?.(activeSearchString);
+    }, [activeSearchString, onSearchStringChange]);
+
     const {
         activeSorting,
         methods: sortMethods,

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}
         >

src/components/Tables/ReportParticipantsTable/index.tsx

@@ -13,7 +13,6 @@ import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {ListRenderItemInfo} from '@shopify/flash-list';
 
 import React from 'react';
-import {View} from 'react-native';
 
 import ReportParticipantsTableRow from './ReportParticipantsTableRow';
 
@@ -127,16 +126,9 @@ export default function ReportParticipantsTable({ref, members, isGroupChat, sele
             keyExtractor={(item) => item.keyForList}
             onRowSelectionChange={onRowSelectionChange}
         >
-            {shouldShowSearchBar && (
-                <View style={[styles.mb3, styles.mh5]}>
-                    <Table.SearchBar
-                        label={translate('selectionList.findMember')}
-                        style={[styles.mb0, styles.mh0]}
-                    />
-                </View>
-            )}
+            {shouldShowSearchBar && <Table.SearchBar label={translate('selectionList.findMember')} />}
             <Table.Header />
-            <Table.Body />
+            <Table.Body contentContainerStyle={styles.flexGrow1} />
         </Table>
     );
 }