Krishna2323/issue/88926

src/components/Search/SearchList/BaseSearchList/index.native.tsx

@@ -18,6 +18,8 @@ function BaseSearchList({
     onViewableItemsChanged,
     onLayout,
     contentContainerStyle,
+    stickyHeaderIndices,
+    getItemType,
 }: BaseSearchListProps) {
     const renderItemWithoutKeyboardFocus = useCallback(
         ({item, index}: {item: SearchListItem; index: number}) => {
@@ -43,6 +45,8 @@ function BaseSearchList({
             drawDistance={250}
             contentContainerStyle={contentContainerStyle}
             maintainVisibleContentPosition={{disabled: true}}
+            stickyHeaderIndices={stickyHeaderIndices}
+            getItemType={getItemType}
         />
     );
 }

src/components/Search/SearchList/BaseSearchList/index.tsx

@@ -34,6 +34,8 @@ function BaseSearchList({
     selectedTransactions,
     policyForMovingExpenses,
     nonPersonalAndWorkspaceCards,
+    stickyHeaderIndices,
+    getItemType,
 }: BaseSearchListProps) {
     const hasKeyBeenPressed = useRef(false);
     const isFocused = useIsFocused();
@@ -129,6 +131,8 @@ function BaseSearchList({
             drawDistance={250}
             contentContainerStyle={contentContainerStyle}
             maintainVisibleContentPosition={{disabled: true}}
+            stickyHeaderIndices={stickyHeaderIndices}
+            getItemType={getItemType}
         />
     );
 }

src/components/Search/SearchList/BaseSearchList/types.ts

@@ -17,12 +17,14 @@ type BaseSearchListProps = Pick<
     | 'keyExtractor'
     | 'showsVerticalScrollIndicator'
     | 'onLayout'
+    | 'stickyHeaderIndices'
+    | 'getItemType'
 > & {
     /** The data to display in the list */
     data: SearchListItem[];
 
     /** The function to render each item in the list */
-    renderItem: (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => React.JSX.Element;
+    renderItem: (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => React.JSX.Element | null;
 
     /** The columns that might change to trigger re-render via extraData */
     columns: SearchColumnType[];

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

@@ -57,6 +57,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
     onLongPress,
     nonPersonalAndWorkspaceCards,
     onUndelete,
+    shouldHideTableHeader,
 }: TransactionGroupListExpandedProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -205,7 +206,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
 
     const content = (
         <View style={[styles.flexColumn, styles.flex1]}>
-            {isLargeScreenWidth && !(isEmpty && shouldDisplayLoadingIndicator) && (
+            {isLargeScreenWidth && !(isEmpty && shouldDisplayLoadingIndicator) && !shouldHideTableHeader && (
                 <>
                     <View style={[styles.searchListHeaderContainerStyle, styles.groupSearchListTableContainerStyle, styles.bgTransparent, styles.pl8, styles.borderNone]}>
                         <SearchTableHeader

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

@@ -84,6 +84,11 @@ function TransactionGroupListItem<TItem extends ListItem>({
     userBillingGracePeriodEnds,
     ownerBillingGracePeriodEnd,
     onUndelete,
+    policyForMovingExpenses,
+    onExpandChange,
+    shouldHideTableHeader,
+    shouldHideHeader,
+    shouldHideContent,
 }: TransactionGroupListItemProps<TItem>) {
     const groupItem = item as unknown as TransactionGroupListItemType;
 
@@ -269,6 +274,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
                 setTransactionsVisibleLimit(CONST.TRANSACTION.RESULTS_PAGE_SIZE);
             }
 
+            onExpandChange?.(item.keyForList ?? '', newExpandedState);
             return newExpandedState;
         });
     };
@@ -550,11 +556,11 @@ function TransactionGroupListItem<TItem extends ListItem>({
                 {({hovered}) => (
                     <View style={styles.flex1}>
                         <AnimatedCollapsible
-                            isExpanded={isExpanded}
-                            header={getHeader(hovered)}
+                            isExpanded={shouldHideContent ? false : isExpanded}
+                            header={shouldHideHeader ? null : getHeader(hovered)}
                             onPress={onExpandIconPress}
                             expandButtonStyle={isLargeScreenWidth ? styles.pv2 : styles.pv4Half}
-                            shouldShowToggleButton={isLargeScreenWidth}
+                            shouldShowToggleButton={isLargeScreenWidth && !shouldHideHeader}
                             borderBottomStyle={isLargeScreenWidth && styles.borderNone}
                             sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE}
                         >
@@ -581,6 +587,8 @@ function TransactionGroupListItem<TItem extends ListItem>({
                                 onLongPress={onExpandedRowLongPress}
                                 nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
                                 onUndelete={onUndelete}
+                                policyForMovingExpenses={policyForMovingExpenses}
+                                shouldHideTableHeader={shouldHideTableHeader}
                             />
                         </AnimatedCollapsible>
                     </View>

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

@@ -348,8 +348,28 @@ type ReportActionListItemType = ListItem &
         reportName: string;
     };
 
+type ExpandedGroupTableHeaderItem = {
+    itemType: 'expandedGroupTableHeader';
+    keyForList: string;
+    parentGroupKeyForList: string;
+    columns: SearchColumnType[];
+    groupBy?: SearchGroupBy;
+    canSelectMultiple: boolean;
+    isExpenseReportType: boolean;
+    transactionsQueryHash?: number;
+};
+
+type ExpandedGroupSummaryHeaderItem = {
+    itemType: 'expandedGroupSummaryHeader';
+    keyForList: string;
+    parentGroupKeyForList: string;
+    groupItem: TransactionGroupListItemType;
+};
+
 type SearchListItem = TransactionListItemType | TransactionGroupListItemType | ReportActionListItemType | TaskListItemType | ExpenseReportListItemType;
 
+type SearchFlashListItem = SearchListItem | ExpandedGroupTableHeaderItem | ExpandedGroupSummaryHeaderItem;
+
 type TransactionCardGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.CARD} & PersonalDetails &
     SearchCardGroup & {
         /** Final and formatted "cardName" value used for displaying and sorting */
@@ -444,6 +464,14 @@ type TransactionGroupListItemProps<TItem extends ListItem> = ListItemProps<TItem
         nonPersonalAndWorkspaceCards?: CardList;
         /** Callback to undelete a transaction */
         onUndelete?: (transaction: Transaction) => void;
+        /** Callback when expansion state changes */
+        onExpandChange?: (keyForList: string, isExpanded: boolean) => void;
+        /** Whether to hide the table header inside the expanded content */
+        shouldHideTableHeader?: boolean;
+        /** Whether to hide the group summary header (content-only mode for expanded groups) */
+        shouldHideHeader?: boolean;
+        /** Whether to hide the expanded content (header-only mode for sticky group header) */
+        shouldHideContent?: boolean;
     };
 
 type TransactionGroupListExpandedProps<TItem extends ListItem> = Pick<
@@ -472,6 +500,8 @@ type TransactionGroupListExpandedProps<TItem extends ListItem> = Pick<
     isInSingleTransactionReport: boolean;
     searchTransactions: (pageSize?: number) => void;
     onLongPress: (transaction: TransactionListItemType) => void;
+    /** Whether to hide the table header (when it's rendered as a separate sticky FlashList item) */
+    shouldHideTableHeader?: boolean;
 };
 
 type UnreportedExpenseListItemType = Transaction & {
@@ -506,4 +536,7 @@ export type {
     TransactionListItemProps,
     ReportActionListItemType,
     UnreportedExpenseListItemType,
+    ExpandedGroupTableHeaderItem,
+    ExpandedGroupSummaryHeaderItem,
+    SearchFlashListItem,
 };