Use a floating action bar for bulk actions

src/CONST/index.ts

@@ -6654,6 +6654,35 @@ const CONST = {
         DANGER: 'danger',
     },
 
+    BULK_ACTION_BAR: {
+        /** How many of a selection's actions get a button of their own in the bar before the rest move behind "More". */
+        MAX_INLINE_ACTIONS: 3,
+
+        /** The same at the in-between widths, which do not have the room for a third button. */
+        MAX_INLINE_ACTIONS_MEDIUM_SCREEN: 2,
+
+        /**
+         * Room left between the bar and the edges of the container it floats in. The bar sheds an action before it gets
+         * this close to an edge, rather than only once it has already touched one.
+         */
+        EDGE_MARGIN: 24,
+
+        /** How far the bar floats above the bottom of the container it is rendered in. */
+        BOTTOM_OFFSET: 20,
+
+        /** Breathing room left between the bar and the last row of the list it floats over. */
+        LIST_GAP: 12,
+
+        /** How far below its resting place the bar starts before it springs up into view. */
+        SLIDE_IN_DISTANCE: 24,
+
+        /**
+         * Spring the bar settles into place with. Overdamped, matching the canvas gestures, so it arrives quickly and
+         * without a bounce. The default spring wobbles noticeably over this short a travel.
+         */
+        SLIDE_IN_SPRING: {mass: 1, stiffness: 1000, damping: 500},
+    },
+
     BUTTON_REMOVE_BORDER_RADIUS: {
         LEFT: 'left',
         RIGHT: 'right',
@@ -8952,6 +8981,10 @@ const CONST = {
         BILLING_BANNER: {
             RIGHT_ICON: 'BillingBanner-RightIcon',
         },
+        BULK_ACTION_BAR: {
+            CLEAR_SELECTION: 'BulkActionBar-ClearSelection',
+            MORE: 'BulkActionBar-More',
+        },
         ACCOUNT_MANAGER_BOOK_CALL: {
             BUTTON: 'AccountManagerBookCallButton-Button',
         },
@@ -9084,7 +9117,6 @@ const CONST = {
             FILTER_LIMIT: 'Search-FilterLimit',
             ADVANCED_FILTERS_BUTTON: 'Search-AdvancedFiltersButton',
             COLUMNS_BUTTON: 'Search-ColumnsButton',
-            BULK_ACTIONS_DROPDOWN: 'Search-BulkActionsDropdown',
             SELECT_ALL_CHECKBOX: 'Search-SelectAllCheckbox',
             SELECTION_MODE_MENU_ITEM: 'Search-SelectionModeMenuItem',
             FILTER_RESET_BUTTON: 'Search-FilterResetButton',

src/components/BulkActionBar/BulkActionBarButton.tsx

@@ -0,0 +1,110 @@
+import Button from '@components/Button';
+import PopoverMenu from '@components/PopoverMenu';
+
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import usePopoverPosition from '@hooks/usePopoverPosition';
+import useTheme from '@hooks/useTheme';
+
+import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
+
+import CONST from '@src/CONST';
+import type {AnchorPosition} from '@src/styles';
+
+import type {View} from 'react-native';
+
+import React, {useEffect, useRef, useState} from 'react';
+
+import type {BulkActionBarButtonProps} from './types';
+
+import BulkActionBarMenuTheme from './BulkActionBarMenuTheme';
+import {defaultPopoverAnchorPosition, SUB_MENU_ANCHOR_ALIGNMENT} from './popoverPosition';
+
+/**
+ * A single action in the bulk action bar. An action that carries `subMenuItems` renders a dropdown caret and opens
+ * those items in a menu above itself. Every other action runs `onSelected` directly.
+ */
+function BulkActionBarButton<TValueType>({option, onSubItemSelected}: BulkActionBarButtonProps<TValueType>) {
+    const theme = useTheme();
+    const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'UpArrow']);
+    const {calculatePopoverPosition} = usePopoverPosition();
+
+    const anchorRef = useRef<View | null>(null);
+    const [isMenuVisible, setIsMenuVisible] = useState(false);
+    const [anchorPosition, setAnchorPosition] = useState<AnchorPosition | null>(defaultPopoverAnchorPosition);
+
+    const subMenuItems = option.subMenuItems;
+    const hasSubMenu = !!subMenuItems?.length;
+
+    useEffect(() => {
+        if (!anchorRef.current || !isMenuVisible) {
+            return;
+        }
+
+        // The position is measured asynchronously, so a measurement still in flight when the menu is reopened would
+        // otherwise land after the newer one and place the menu against the button's previous position.
+        let ignore = false;
+
+        calculatePopoverPosition(anchorRef, SUB_MENU_ANCHOR_ALIGNMENT).then((position) => {
+            if (ignore) {
+                return;
+            }
+
+            setAnchorPosition(position);
+        });
+
+        return () => {
+            ignore = true;
+        };
+    }, [isMenuVisible, calculatePopoverPosition]);
+
+    return (
+        <>
+            <Button
+                ref={anchorRef}
+                onPress={() => {
+                    if (hasSubMenu) {
+                        setIsMenuVisible((isVisible) => !isVisible);
+                        return;
+                    }
+
+                    option.onSelected?.();
+                }}
+                size={CONST.BUTTON_SIZE.SMALL}
+                isDisabled={option.disabled}
+                accessibilityLabel={option.text}
+                sentryLabel={option.sentryLabel}
+            >
+                {!!option.icon && (
+                    <Button.Icon
+                        src={option.icon}
+                        hoverFill={theme.iconMenuHovered}
+                    />
+                )}
+                <Button.Text>{option.text}</Button.Text>
+                {hasSubMenu && <Button.Icon src={isMenuVisible ? icons.UpArrow : icons.DownArrow} />}
+            </Button>
+            {hasSubMenu && !!anchorPosition && (
+                <BulkActionBarMenuTheme>
+                    <PopoverMenu
+                        isVisible={isMenuVisible}
+                        anchorRef={anchorRef}
+                        anchorPosition={anchorPosition}
+                        anchorAlignment={SUB_MENU_ANCHOR_ALIGNMENT}
+                        menuItems={subMenuItems.map((subItem) => ({...subItem, shouldCallAfterModalHide: true}))}
+                        onClose={() => setIsMenuVisible(false)}
+                        onItemSelected={(selectedSubItem, index, event) => {
+                            onSubItemSelected?.(selectedSubItem, index, event);
+                            if (selectedSubItem.shouldCloseModalOnSelect === false) {
+                                return;
+                            }
+                            setIsMenuVisible(false);
+                        }}
+                        shouldUseScrollView={shouldPopoverUseScrollView(subMenuItems)}
+                    />
+                </BulkActionBarMenuTheme>
+            )}
+        </>
+    );
+}
+
+export default BulkActionBarButton;

src/components/BulkActionBar/BulkActionBarMenuTheme.tsx

@@ -0,0 +1,26 @@
+import ThemeProvider from '@components/ThemeProvider';
+import ThemeStylesProvider from '@components/ThemeStylesContextProvider';
+
+import useThemePreference from '@hooks/useThemePreference';
+
+import React from 'react';
+
+/**
+ * Puts the app's own theme back for the menus that open off the bar, which would otherwise inherit the inverted theme
+ * the bar itself renders under. The bar stays inverted so it stands out against the table. Its menus read as the
+ * popovers they are everywhere else in the app.
+ *
+ * `useThemePreference` reads the preference rather than the surrounding context, so this reports the page's theme even
+ * from inside the bar's inverted subtree.
+ */
+function BulkActionBarMenuTheme({children}: React.PropsWithChildren) {
+    const pageThemePreference = useThemePreference();
+
+    return (
+        <ThemeProvider theme={pageThemePreference}>
+            <ThemeStylesProvider>{children}</ThemeStylesProvider>
+        </ThemeProvider>
+    );
+}
+
+export default BulkActionBarMenuTheme;