feat: add support for close icon

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -1,9 +1,10 @@
 import ReactSelect, { ControlProps, MenuProps, Props as ReactSelectProps } from 'react-select'
 import { ReactElement, ReactNode, useCallback, useMemo } from 'react'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
-import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
+import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled.svg'
 import { getCommonSelectStyle } from './utils'
 import {
+    SelectPickerClearIndicator,
     SelectPickerControl,
     SelectPickerDropdownIndicator,
     SelectPickerLoadingIndicator,
@@ -99,6 +100,7 @@ const SelectPicker = ({
                         Control: renderControl,
                         Option: SelectPickerOption,
                         Menu: renderMenu,
+                        ClearIndicator: SelectPickerClearIndicator,
                         // TODO Eshank: need to export variants of ValueContainer: Icon, No Icon etc
                     }}
                     styles={selectStyles}

src/Shared/Components/SelectPicker/common.tsx

@@ -1,6 +1,14 @@
-import { components, DropdownIndicatorProps, ControlProps, OptionProps, MenuProps } from 'react-select'
-import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
+import {
+    components,
+    DropdownIndicatorProps,
+    ControlProps,
+    OptionProps,
+    MenuProps,
+    ClearIndicatorProps,
+} from 'react-select'
 import { Progressing } from '@Common/Progressing'
+import { ReactComponent as ICChevronDown } from '@Icons/ic-chevron-down.svg'
+import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { SelectPickerProps } from './SelectPicker.component'
 import { SelectPickerOptionType } from './type'
 
@@ -9,11 +17,17 @@ export const SelectPickerDropdownIndicator = (props: DropdownIndicatorProps) =>
 
     return (
         <components.DropdownIndicator {...props}>
-            <ICCaretDown className={`icon-dim-16 ${isDisabled ? 'fcn-3' : 'fcn-6'} dc__no-shrink`} />
+            <ICChevronDown className={`icon-dim-16 ${isDisabled ? 'fcn-3' : 'fcn-6'} dc__no-shrink`} />
         </components.DropdownIndicator>
     )
 }
 
+export const SelectPickerClearIndicator = (props: ClearIndicatorProps) => (
+    <components.ClearIndicator {...props}>
+        <ICClose className="icon-dim-16 fcn-6 dc__no-shrink" />
+    </components.ClearIndicator>
+)
+
 export const SelectPickerControl = ({ icon, ...props }: ControlProps & Pick<SelectPickerProps, 'icon'>) => {
     const { children } = props
 

src/Shared/Components/SelectPicker/utils.ts

@@ -61,6 +61,10 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
         transition: 'all .2s ease',
         transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
     }),
+    clearIndicator: (base) => ({
+        ...base,
+        padding: 0,
+    }),
     valueContainer: (base) => ({
         ...base,
         padding: '0',
@@ -112,4 +116,9 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     }),
+    indicatorsContainer: (base) => ({
+        ...base,
+        gap: '4px',
+        flexShrink: 0,
+    }),
 })