Reports: Update bulk select button placement

src/components/ButtonWithDropdownMenu/index.tsx

@@ -32,6 +32,7 @@ function ButtonWithDropdownMenu<IValueType>({
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
+    popoverHorizontalOffsetType,
     buttonRef,
     onPress,
     options,
@@ -74,16 +75,24 @@ function ButtonWithDropdownMenu<IValueType>({
         }
         if ('measureInWindow' in dropdownAnchor.current) {
             dropdownAnchor.current.measureInWindow((x, y, w, h) => {
+                let horizontalPosition = x + w;
+
+                if (popoverHorizontalOffsetType === 'left') {
+                    horizontalPosition = x;
+                } else if (popoverHorizontalOffsetType === 'center') {
+                    horizontalPosition = x + w / 2;
+                }
+
                 setPopoverAnchorPosition({
-                    horizontal: x + w,
+                    horizontal: horizontalPosition,
                     vertical:
                         anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP
                             ? y + h + CONST.MODAL.POPOVER_MENU_PADDING // if vertical anchorAlignment is TOP, menu will open below the button and we need to add the height of button and padding
                             : y - CONST.MODAL.POPOVER_MENU_PADDING, // if it is BOTTOM, menu will open above the button so NO need to add height but DO subtract padding
                 });
             });
         }
-    }, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical]);
+    }, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical, popoverHorizontalOffsetType]);
 
     useKeyboardShortcut(
         CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER,

src/components/ButtonWithDropdownMenu/types.ts

@@ -79,6 +79,14 @@ type ButtonWithDropdownMenuProps<TValueType> = {
     /** The anchor alignment of the popover menu */
     anchorAlignment?: AnchorAlignment;
 
+    /**
+     * Determines how the popover menu should be horizontally positioned relative to the button.
+     * - 'right': Anchors to the right edge of the button (default)
+     * - 'left': Anchors to the left edge of the button
+     * - 'center': Anchors to the center of the button
+     */
+    popoverHorizontalOffsetType?: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL>;
+
     /* ref for the button */
     buttonRef?: RefObject<View>;
 

src/components/Search/SearchPageHeader/SearchStatusBar.tsx

@@ -1,13 +1,18 @@
-import React, {useRef} from 'react';
+import React, {useMemo, useRef} from 'react';
+import {View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView as RNScrollView} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
+import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
+import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScrollView from '@components/ScrollView';
 import {useSearchContext} from '@components/Search/SearchContext';
 import type {ChatSearchStatus, ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryJSON, TripSearchStatus} from '@components/Search/types';
 import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -16,12 +21,15 @@ import Navigation from '@libs/Navigation/Navigation';
 import {buildSearchQueryString} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type IconAsset from '@src/types/utils/IconAsset';
+import type {SearchHeaderOptionValue} from './SearchPageHeader';
 
 type SearchStatusBarProps = {
     queryJSON: SearchQueryJSON;
     onStatusChange?: () => void;
+    headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
 };
 
 const expenseOptions: Array<{status: ExpenseSearchStatus; type: SearchDataTypes; icon: IconAsset; text: TranslationPaths}> = [
@@ -158,63 +166,87 @@ function getOptions(type: SearchDataTypes) {
     }
 }
 
-function SearchStatusBar({queryJSON, onStatusChange}: SearchStatusBarProps) {
+function SearchStatusBar({queryJSON, onStatusChange, headerButtonsOptions}: SearchStatusBarProps) {
     const {singleExecution} = useSingleExecution();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
     const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {selectedTransactions} = useSearchContext();
+    const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
     const options = getOptions(queryJSON.type);
     const scrollRef = useRef<RNScrollView>(null);
     const isScrolledRef = useRef(false);
     const {shouldShowStatusBarLoading} = useSearchContext();
 
+    const selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]);
+    const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || (!!selectionMode && selectionMode.isEnabled));
+
     if (shouldShowStatusBarLoading) {
         return <SearchStatusSkeleton shouldAnimate />;
     }
 
     return (
-        <ScrollView
-            style={[styles.flexRow, styles.mb2, styles.overflowScroll, styles.flexGrow0]}
-            ref={scrollRef}
-            horizontal
-            showsHorizontalScrollIndicator={false}
-        >
-            {options.map((item, index) => {
-                const onPress = singleExecution(() => {
-                    onStatusChange?.();
-                    const query = buildSearchQueryString({...queryJSON, status: item.status});
-                    Navigation.setParams({q: query});
-                });
-                const isActive = Array.isArray(queryJSON.status) ? queryJSON.status.includes(item.status) : queryJSON.status === item.status;
-                const isFirstItem = index === 0;
-                const isLastItem = index === options.length - 1;
+        <View style={[shouldShowSelectedDropdown ? styles.ph5 : styles.pr5, styles.mb2, styles.searchStatusBarContainer]}>
+            {shouldShowSelectedDropdown ? (
+                <ButtonWithDropdownMenu
+                    onPress={() => null}
+                    shouldAlwaysShowDropdownMenu
+                    buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                    customText={translate('workspace.common.selected', {count: selectedTransactionsKeys.length})}
+                    options={headerButtonsOptions}
+                    isSplitButton={false}
+                    anchorAlignment={{
+                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                    }}
+                    popoverHorizontalOffsetType={CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT}
+                />
+            ) : (
+                <ScrollView
+                    style={[styles.flexRow, styles.overflowScroll, styles.flexGrow0]}
+                    ref={scrollRef}
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                >
+                    {options.map((item, index) => {
+                        const onPress = singleExecution(() => {
+                            onStatusChange?.();
+                            const query = buildSearchQueryString({...queryJSON, status: item.status});
+                            Navigation.setParams({q: query});
+                        });
+                        const isActive = Array.isArray(queryJSON.status) ? queryJSON.status.includes(item.status) : queryJSON.status === item.status;
+                        const isFirstItem = index === 0;
+                        const isLastItem = index === options.length - 1;
 
-                return (
-                    <Button
-                        key={item.status}
-                        onLayout={(e) => {
-                            if (!isActive || isScrolledRef.current || !('left' in e.nativeEvent.layout)) {
-                                return;
-                            }
-                            isScrolledRef.current = true;
-                            scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});
-                        }}
-                        text={translate(item.text)}
-                        onPress={onPress}
-                        icon={item.icon}
-                        iconFill={isActive ? theme.success : undefined}
-                        iconHoverFill={theme.success}
-                        innerStyles={!isActive && styles.bgTransparent}
-                        hoverStyles={StyleUtils.getBackgroundColorStyle(!isActive ? theme.highlightBG : theme.border)}
-                        textStyles={!isActive && StyleUtils.getTextColorStyle(theme.textSupporting)}
-                        textHoverStyles={StyleUtils.getTextColorStyle(theme.text)}
-                        // We add padding to the first and last items so that they align with the header and table but can overflow outside the screen when scrolled.
-                        style={[isFirstItem && styles.pl5, isLastItem && styles.pr5]}
-                    />
-                );
-            })}
-        </ScrollView>
+                        return (
+                            <Button
+                                key={item.status}
+                                onLayout={(e) => {
+                                    if (!isActive || isScrolledRef.current || !('left' in e.nativeEvent.layout)) {
+                                        return;
+                                    }
+                                    isScrolledRef.current = true;
+                                    scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});
+                                }}
+                                text={translate(item.text)}
+                                onPress={onPress}
+                                icon={item.icon}
+                                iconFill={isActive ? theme.success : undefined}
+                                iconHoverFill={theme.success}
+                                innerStyles={!isActive && styles.bgTransparent}
+                                hoverStyles={StyleUtils.getBackgroundColorStyle(!isActive ? theme.highlightBG : theme.border)}
+                                textStyles={!isActive && StyleUtils.getTextColorStyle(theme.textSupporting)}
+                                textHoverStyles={StyleUtils.getTextColorStyle(theme.text)}
+                                // We add padding to the first and last items so that they align with the header and table but can overflow outside the screen when scrolled.
+                                style={[isFirstItem && styles.pl5, isLastItem && styles.pr5]}
+                            />
+                        );
+                    })}
+                </ScrollView>
+            )}
+        </View>
     );
 }