Update advanced filters button to open filters popover

src/CONST/index.ts

@@ -277,6 +277,9 @@ const CONST = {
     POPOVER_DATE_RANGE_WIDTH: 672,
     POPOVER_DATE_MAX_HEIGHT: 366,
     POPOVER_DATE_MIN_HEIGHT: 322,
+    ADVANCED_FILTERS_POPOVER_HEIGHT: 520,
+    ADVANCED_FILTERS_POPOVER_WIDTH: 582,
+    ADVANCED_FILTERS_CONTENT_WIDTH: 331,
     TOOLTIP_ANIMATION_DURATION: 500,
     DROPDOWN_SCROLL_THRESHOLD: 5,
     // Multiplier for gyroscope animation in order to make it a bit more subtle
@@ -8469,6 +8472,7 @@ const CONST = {
             ADVANCED_FILTER_ITEM: 'Search-AdvancedFilterItem',
             SAVE_SEARCH_BUTTON: 'Search-SaveSearchButton',
             VIEW_RESULTS_BUTTON: 'Search-ViewResultsButton',
+            CLEAR_FILTERS_BUTTON: 'Search-ClearFiltersButton',
             ACTION_CELL_VIEW: 'Search-ActionCellView',
             ACTION_CELL_PAY: 'Search-ActionCellPay',
             ACTION_CELL_ACTION: 'Search-ActionCellAction',

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -70,6 +70,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCardLock from '@assets/images/credit-card-lock.svg';
+import CreditCardMultiple from '@assets/images/credit-card-multiple.svg';
 import CreditCardWithPlaneHourglass from '@assets/images/credit-card-with-plane-hourglass.svg';
 import CreditCardWithPlane from '@assets/images/credit-card-with-plane.svg';
 import CreditCard from '@assets/images/creditcard.svg';
@@ -186,6 +187,7 @@ import OfflineCloud from '@assets/images/offline-cloud.svg';
 import Offline from '@assets/images/offline.svg';
 import Paperclip from '@assets/images/paperclip.svg';
 import Pause from '@assets/images/pause.svg';
+import Paycheck from '@assets/images/paycheck.svg';
 import Pencil from '@assets/images/pencil.svg';
 import Percent from '@assets/images/percent.svg';
 import Phone from '@assets/images/phone.svg';
@@ -249,6 +251,7 @@ import TreasureChest from '@assets/images/treasure-chest.svg';
 import Unlock from '@assets/images/unlock.svg';
 import UploadAlt from '@assets/images/upload-alt.svg';
 import Upload from '@assets/images/upload.svg';
+import UserArrowLeft from '@assets/images/user-arrow-left.svg';
 import UserCheck from '@assets/images/user-check.svg';
 import UserEye from '@assets/images/user-eye.svg';
 import UserLock from '@assets/images/user-lock.svg';
@@ -320,6 +323,7 @@ const Expensicons = {
     ConnectionComplete,
     Copy,
     CreditCard,
+    CreditCardMultiple,
     Crop,
     CreditCardHourglass,
     CreditCardExclamation,
@@ -417,6 +421,7 @@ const Expensicons = {
     OdometerEnd,
     Paperclip,
     Pause,
+    Paycheck,
     Pencil,
     Percent,
     Phone,
@@ -462,6 +467,7 @@ const Expensicons = {
     Upload,
     UploadAlt,
     User,
+    UserArrowLeft,
     UserCheck,
     Users,
     VideoSlash,

src/components/PopoverWithMeasuredContent/index.tsx

@@ -11,7 +11,7 @@ import type PopoverWithMeasuredContentProps from './types';
  * This component is a perf optimization, it return BOTTOM_DOCKED early, for small screens avoiding Popover measurement logic calculations.
  * It defers rendering of PopoverWithMeasuredContentBase to idle time to avoid blocking more priority UI updates with measurements.
  */
-function PopoverWithMeasuredContent({shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode, ...props}: PopoverWithMeasuredContentProps) {
+function PopoverWithMeasuredContent({shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode, smallScreenModalType, ...props}: PopoverWithMeasuredContentProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
 
@@ -32,7 +32,7 @@ function PopoverWithMeasuredContent({shouldWrapModalChildrenInScrollViewIfBottom
         return (
             <Modal
                 {...props}
-                type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+                type={smallScreenModalType ?? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
                 animationIn="slideInUp"
                 animationOut="slideOutDown"
                 shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode={shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode}

src/components/PopoverWithMeasuredContent/types.ts

@@ -1,3 +1,4 @@
+import type BaseModalProps from '@components/Modal/types';
 import type PopoverProps from '@components/Popover/types';
 import type {AnchorDimensions, AnchorPosition} from '@styles/index';
 
@@ -19,6 +20,9 @@ type PopoverWithMeasuredContentProps = Omit<PopoverProps, 'anchorPosition'> & {
 
     /** Whether to skip re-measurement when becoming visible (for components with static dimensions) */
     shouldSkipRemeasurement?: boolean;
+
+    /** The modal type for modal when rendered in small screen */
+    smallScreenModalType?: BaseModalProps['type'];
 };
 
 export default PopoverWithMeasuredContentProps;

src/components/SafeTriangle/index.native.tsx

@@ -0,0 +1,11 @@
+import type SafeTriangleProps from './types';
+
+/**
+ * A component that provides a "safe triangle" wrapper.
+ * On native platforms, hover interactions are not applicable, so this is a no-op wrapper.
+ */
+function SafeTriangle({children}: SafeTriangleProps) {
+    return children;
+}
+
+export default SafeTriangle;

src/components/SafeTriangle/index.tsx

@@ -0,0 +1,194 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
+import {Polygon, Svg} from 'react-native-svg';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {isMobile} from '@libs/Browser';
+import htmlDivElementRef from '@src/types/utils/htmlDivElementRef';
+import type SafeTriangleProps from './types';
+
+type Point = [number, number];
+
+type SafeTriangleOverlayProps = {
+    submenuRef: React.RefObject<View | null>;
+    containerRef: React.RefObject<View | null>;
+};
+
+type Rect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+
+/** Time in ms before the safe triangle is cleared after cursor stops moving toward submenu */
+const SAFE_TRIANGLE_CLEAR_DELAY_MS = 50;
+
+const OFFSET = 2;
+
+function isPointInPolygon(point: Point, polygon: Point[]) {
+    const [x, y] = point;
+    let isInside = false;
+    const length = polygon.length;
+    for (let i = 0, j = length - 1; i < length; j = i++) {
+        const [xi, yi] = polygon.at(i) ?? [0, 0];
+        const [xj, yj] = polygon.at(j) ?? [0, 0];
+        const intersect = yi >= y !== yj >= y && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+        if (intersect) {
+            isInside = !isInside;
+        }
+    }
+    return isInside;
+}
+
+function SafeTriangleOverlay({submenuRef, containerRef}: SafeTriangleOverlayProps) {
+    const styles = useThemeStyles();
+
+    const [points, setPoints] = useState<string | null>(null);
+    const [svgRect, setSvgRect] = useState<Rect | null>(null);
+
+    const apexRef = useRef<Point | null>(null);
+    const lastCursorPosition = useRef<Point | null>(null);
+    const lastCursorTime = useRef<number>(0);
+    const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+    const getCursorSpeed = (x: number, y: number): number | null => {
+        const currentTime = performance.now();
+        const elapsedTime = currentTime - lastCursorTime.current;
+
+        if (lastCursorPosition.current === null || elapsedTime === 0) {
+            lastCursorPosition.current = [x, y];
+            lastCursorTime.current = currentTime;
+            return null;
+        }
+
+        const deltaX = x - lastCursorPosition.current[0];
+        const deltaY = y - lastCursorPosition.current[1];
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const speed = distance / elapsedTime; // px / ms
+
+        lastCursorPosition.current = [x, y];
+        lastCursorTime.current = currentTime;
+
+        return speed;
+    };
+
+    const clearTriangle = () => {
+        setPoints(null);
+        setSvgRect(null);
+        apexRef.current = null;
+    };
+
+    const onMouseMove = (event: MouseEvent) => {
+        clearTimeout(timeoutRef.current);
+
+        const {clientX, clientY} = event;
+        const speed = getCursorSpeed(clientX, clientY);
+
+        if (!submenuRef.current) {
+            clearTriangle();
+            return;
+        }
+
+        const rect = submenuRef.current.getBoundingClientRect();
+        if (!rect) {
+            clearTriangle();
+            return;
+        }
+
+        // If speed is slow, update the apex to the current cursor position
+        if (speed === null || speed < 0.1) {
+            apexRef.current = [clientX, clientY];
+        }
+
+        const [x, y] = apexRef.current ?? [clientX, clientY];
+
+        // Create a polygon from apex to the submenu's left edge
+        const cursorPoint: Point = [0, y - rect.top];
+        // We subtract OFFSET from x-coordinates to account for the offset in the container's left style
+        const topLeftSubMenuPoint: Point = [rect.left - x - OFFSET, 0];
+        const bottomLeftSubMenuPoint: Point = [rect.left - x - OFFSET, rect.bottom - rect.top];
+
+        const polygon = [cursorPoint, topLeftSubMenuPoint, bottomLeftSubMenuPoint];
+
+        // Check if the current mouse position is within the safe triangle
+        // The polygon points are relative to [x + OFFSET, rect.top], so we adjust the mouse position accordingly
+        const isSafe = isPointInPolygon([clientX - x + OFFSET, clientY - rect.top], polygon);
+
+        if (isSafe) {
+            const pointsString = polygon.map((p) => p.join(',')).join(' ');
+            setPoints(pointsString);
+            setSvgRect({
+                top: rect.top,
+                left: x + OFFSET,
+                height: rect.height,
+                width: rect.left - x - OFFSET,
+            });
+            timeoutRef.current = setTimeout(clearTriangle, SAFE_TRIANGLE_CLEAR_DELAY_MS);
+        } else {
+            clearTriangle();
+        }
+    };
+
+    useEffect(() => {
+        const container = htmlDivElementRef(containerRef).current;
+        if (!container) {
+            return;
+        }
+
+        container.addEventListener('mousemove', onMouseMove, true);
+
+        return () => {
+            container.removeEventListener('mousemove', onMouseMove, true);
+            clearTimeout(timeoutRef.current);
+        };
+    }, [onMouseMove, containerRef]);
+
+    if (!points || !svgRect) {
+        return null;
+    }
+
+    return (
+        <Svg
+            style={[styles.pFixed, styles.cursorPointer, svgRect, {zIndex: 1000}]}
+            width={svgRect.width}
+            height={svgRect.height}
+            onWheel={clearTriangle}
+            pointerEvents="none"
+        >
+            <Polygon
+                points={points}
+                fill="transparent"
+                pointerEvents="auto"
+            />
+        </Svg>
+    );
+}
+
+/**
+ * A component that creates a "safe triangle" area between the cursor and a submenu.
+ * This prevents the submenu from switching when the user moves the cursor
+ * diagonally towards the submenu by rendering an invisible SVG overlay.
+ */
+function SafeTriangle({submenuRef, children}: SafeTriangleProps) {
+    const styles = useThemeStyles();
+    const containerRef = useRef<View>(null);
+
+    if (isMobile()) {
+        return children;
+    }
+
+    return (
+        <View
+            ref={containerRef}
+            style={styles.flex1}
+        >
+            {children}
+            <SafeTriangleOverlay
+                containerRef={containerRef}
+                submenuRef={submenuRef}
+            />
+        </View>
+    );
+}
+
+export default SafeTriangle;

src/components/SafeTriangle/types.ts

@@ -0,0 +1,8 @@
+import type {View} from 'react-native';
+
+type SafeTriangleProps = {
+    submenuRef: React.RefObject<View | null>;
+    children: React.ReactNode;
+};
+
+export default SafeTriangleProps;