Add close button to filter chip to clear individual filter

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -5,13 +5,16 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import CaretWrapper from '@components/CaretWrapper';
+import Icon from '@components/Icon';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import Text from '@components/Text';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useOnyx from '@hooks/useOnyx';
 import usePopoverPosition from '@hooks/usePopoverPosition';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
@@ -56,6 +59,7 @@ type DropdownButtonProps = WithSentryLabel & {
 
     /** Wrapper style for the outer view */
     wrapperStyle?: StyleProp<ViewStyle>;
+    onClosePress?: () => void;
 };
 
 const ANCHOR_ORIGIN = {
@@ -75,13 +79,16 @@ function DropdownButton({
     caretWrapperStyle,
     wrapperStyle,
     sentryLabel,
+    onClosePress,
 }: DropdownButtonProps) {
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to distinguish RHL and narrow layout
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
+    const icons = useMemoizedLazyExpensifyIcons(['Close']);
 
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const theme = useTheme();
     const {windowHeight} = useWindowDimensions();
     const triggerRef = useRef<View | null>(null);
     const anchorRef = useRef<View | null>(null);
@@ -144,6 +151,8 @@ function DropdownButton({
         return PopoverComponent({closeOverlay: toggleOverlay, isExpanded: isOverlayVisible, setPopoverWidth: setCustomPopoverWidth});
     }, [PopoverComponent, toggleOverlay, isOverlayVisible]);
 
+    const shouldShowCloseButton = !!onClosePress;
+
     return (
         <View
             ref={anchorRef}
@@ -156,28 +165,49 @@ function DropdownButton({
                     onPress={calculatePopoverPositionAndToggleOverlay}
                 />
             ) : (
-                <Button
-                    ref={triggerRef}
-                    innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}, innerStyles]}
-                    onPress={calculatePopoverPositionAndToggleOverlay}
-                    sentryLabel={sentryLabel}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...(medium ? {medium: true} : {small: true})}
-                >
-                    <CaretWrapper
-                        style={[styles.flex1, styles.mw100, caretWrapperStyle]}
-                        caretWidth={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
-                        caretHeight={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
-                        isActive={isOverlayVisible}
+                <View style={[styles.flexRow]}>
+                    <Button
+                        ref={triggerRef}
+                        innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}, innerStyles, shouldShowCloseButton && styles.pr2]}
+                        onPress={calculatePopoverPositionAndToggleOverlay}
+                        sentryLabel={sentryLabel}
+                        shouldRemoveRightBorderRadius={shouldShowCloseButton}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...(medium ? {medium: true} : {small: true})}
                     >
-                        <Text
-                            numberOfLines={1}
-                            style={[styles.textMicroBold, styles.flexShrink1, labelStyle]}
+                        <CaretWrapper
+                            style={[styles.flex1, styles.mw100, caretWrapperStyle]}
+                            caretWidth={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
+                            caretHeight={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
+                            isActive={isOverlayVisible}
                         >
-                            {buttonText}
-                        </Text>
-                    </CaretWrapper>
-                </Button>
+                            <Text
+                                numberOfLines={1}
+                                style={[styles.textMicroBold, styles.flexShrink1, labelStyle]}
+                            >
+                                {buttonText}
+                            </Text>
+                        </CaretWrapper>
+                    </Button>
+                    {shouldShowCloseButton && (
+                        <>
+                            <View style={[styles.buttonDivider]} />
+                            <Button
+                                small
+                                shouldRemoveLeftBorderRadius
+                                innerStyles={[styles.pl0, styles.pr0half, styles.filterDropDownCloseIcon]}
+                                onPress={onClosePress}
+                            >
+                                <Icon
+                                    src={icons.Close}
+                                    fill={theme.icon}
+                                    width={variables.iconSizeXXSmall}
+                                    height={variables.iconSizeXXSmall}
+                                />
+                            </Button>
+                        </>
+                    )}
+                </View>
             )}
 
             {/* Dropdown overlay */}

src/components/Search/SearchAutocompleteInput.tsx

@@ -58,12 +58,10 @@ type SearchAutocompleteInputProps = {
 
     /** Any additional styles to apply to text input along with FormHelperMessage */
     outerWrapperStyle?: StyleProp<ViewStyle>;
-
     inputStyle?: StyleProp<TextStyle>;
-
     inputContainerStyle?: StyleProp<ViewStyle>;
-
     touchableInputWrapperStyle?: StyleProp<ViewStyle>;
+    clearButtonStyle?: StyleProp<ViewStyle>;
 
     /** Whether the search reports API call is running  */
     isSearchingForReports?: boolean;
@@ -96,6 +94,7 @@ function SearchAutocompleteInput({
     inputStyle,
     inputContainerStyle,
     touchableInputWrapperStyle,
+    clearButtonStyle,
     isSearchingForReports,
     selection,
     substitutionMap,
@@ -222,6 +221,7 @@ function SearchAutocompleteInput({
                     textInputContainerStyles={[styles.borderNone, styles.pb0, styles.ph3, inputContainerStyle]}
                     inputStyle={[inputWidth, styles.lineHeightUndefined, inputStyle]}
                     touchableInputWrapperStyle={touchableInputWrapperStyle}
+                    clearButtonStyle={clearButtonStyle}
                     placeholderTextColor={theme.textSupporting}
                     loadingSpinnerStyle={[styles.mt0, styles.mr1, styles.justifyContentCenter]}
                     onFocus={() => {

src/components/Search/SearchPageHeader/SearchFilterBar.tsx

@@ -14,74 +14,80 @@ import type {FilterItem} from './useSearchFiltersBar';
 
 type SearchDropdownProps = Omit<DropdownButtonProps, 'viewportOffsetTop'>;
 
-function UserDropdown({label, value, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function UserDropdown({label, value, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const users = useFilterUserValue(value);
     return (
         <DropdownButton
             label={label}
             value={users ?? []}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function WorkspaceDropdown({label, value, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function WorkspaceDropdown({label, value, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const workspaceValue = useFilterWorkspaceValue(value);
     return (
         <DropdownButton
             label={label}
             value={workspaceValue ?? []}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function FeedDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function FeedDropdown({label, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const feedValue = useFilterFeedValue();
     return (
         <DropdownButton
             label={label}
             value={feedValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function CardDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function CardDropdown({label, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const cardValue = useFilterCardValue();
     return (
         <DropdownButton
             label={label}
             value={cardValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function TaxRateDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function TaxRateDropdown({label, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const taxRateValue = useFilterTaxRateValue();
     return (
         <DropdownButton
             label={label}
             value={taxRateValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function ReportDropdown({label, value, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function ReportDropdown({label, value, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const reportValue = useFilterReportValue(value);
     return (
         <DropdownButton
             label={label}
             value={reportValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
@@ -111,6 +117,7 @@ function SearchFilterBar({item}: {item: SearchFilter & FilterItem}) {
             value={item.value}
             PopoverComponent={item.PopoverComponent}
             sentryLabel={item.sentryLabel}
+            onClosePress={item.onClosePress}
         />
     );
 }

src/components/Search/SearchPageHeader/SearchPageInputWide.tsx

@@ -74,6 +74,7 @@ function SearchPageInputWide({queryJSON, handleSearch}: SearchPageInputWideProps
                     inputStyle={isAutocompleteListVisible ? undefined : styles.fontSizeLabel}
                     inputContainerStyle={isAutocompleteListVisible ? undefined : styles.ph2}
                     touchableInputWrapperStyle={isAutocompleteListVisible ? undefined : styles.searchPageInputWideTouchableWrapper}
+                    clearButtonStyle={isAutocompleteListVisible ? undefined : styles.mh0}
                     onSubmit={() => {
                         const focusedOption = listRef.current?.getFocusedOption();
                         if (focusedOption) {