Merge pull request Expensify#79947 from nyomanjyotisa/issue-79622

Flip the chevron when popover is active

Author: srikarparsi

src/components/CaretWrapper.tsx

@@ -12,9 +12,10 @@ type CaretWrapperProps = ChildrenProps & {
     style?: StyleProp<ViewStyle>;
     caretWidth?: number;
     caretHeight?: number;
+    isActive?: boolean;
 };
 
-function CaretWrapper({children, style, caretWidth, caretHeight}: CaretWrapperProps) {
+function CaretWrapper({children, style, caretWidth, caretHeight, isActive = false}: CaretWrapperProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['DownArrow'] as const);
@@ -27,6 +28,7 @@ function CaretWrapper({children, style, caretWidth, caretHeight}: CaretWrapperPr
                 fill={theme.icon}
                 width={caretWidth ?? variables.iconSizeExtraSmall}
                 height={caretHeight ?? variables.iconSizeExtraSmall}
+                additionalStyles={isActive ? styles.flipUpsideDown : []}
             />
         </View>
     );

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -141,6 +141,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
                     style={[styles.flex1, styles.mw100, caretWrapperStyle]}
                     caretWidth={variables.iconSizeSmall}
                     caretHeight={variables.iconSizeSmall}
+                    isActive={isOverlayVisible}
                 >
                     <Text
                         numberOfLines={1}