feat: add support for options

Author: eshankvaish

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

@@ -2,14 +2,13 @@ import ReactSelect, { ControlProps, Props as ReactSelectProps } from 'react-sele
 import { ReactNode, useCallback, useMemo } from 'react'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { getCommonSelectStyle } from './utils'
-import { ControlWithIcon, DropdownIndicator, LoadingIndicator } from './common'
+import { ControlWithIcon, DropdownIndicator, SingleSelectOption, LoadingIndicator } from './common'
+import { SelectPickerOptionType } from './type'
 
 export interface SelectPickerProps
     extends Pick<
         ReactSelectProps,
         | 'isMulti'
-        | 'options'
-        | 'value'
         | 'onChange'
         | 'isSearchable'
         | 'isClearable'
@@ -25,6 +24,8 @@ export interface SelectPickerProps
     > {
     icon?: ReactNode
     error?: ReactNode
+    options: SelectPickerOptionType[]
+    value?: SelectPickerOptionType
 }
 
 const SelectPicker = ({ error, icon, placeholder = 'Select a option', ...props }: SelectPickerProps) => {
@@ -43,15 +44,15 @@ const SelectPicker = ({ error, icon, placeholder = 'Select a option', ...props }
 
     return (
         <div>
-            <ReactSelect
+            <ReactSelect<SelectPickerOptionType, boolean>
                 {...props}
                 placeholder={placeholder}
                 components={{
                     IndicatorSeparator: null,
                     LoadingIndicator,
                     DropdownIndicator,
                     Control: renderControl,
-                    // Option,
+                    Option: SingleSelectOption,
                     // ValueContainer,
                 }}
                 styles={selectStyles}

src/Shared/Components/SelectPicker/common.tsx

@@ -1,7 +1,8 @@
-import { components, DropdownIndicatorProps, ControlProps } from 'react-select'
+import { components, DropdownIndicatorProps, ControlProps, OptionProps } from 'react-select'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { Progressing } from '@Common/Progressing'
 import { SelectPickerProps } from './SelectPicker.component'
+import { SelectPickerOptionType } from './type'
 
 export const DropdownIndicator = (props: DropdownIndicatorProps) => {
     const { isDisabled } = props
@@ -25,3 +26,25 @@ export const ControlWithIcon = ({ icon, ...props }: ControlProps & Pick<SelectPi
 }
 
 export const LoadingIndicator = () => <Progressing />
+
+export const SingleSelectOption = (props: OptionProps<SelectPickerOptionType>) => {
+    const { label, data } = props
+    const { description, startIcon, endIcon } = data ?? {}
+    const showDescription = !!description
+
+    return (
+        <components.Option {...props}>
+            <div className={`flex left ${showDescription ? 'top' : ''} dc__gap-8`}>
+                {startIcon && (
+                    <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{startIcon}</div>
+                )}
+                <div className="flex-grow-1">
+                    <h4 className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate">{label}</h4>
+                    {/* TODO Eshank: Add support for custom ellipsis */}
+                    {showDescription && <p className="m-0 fs-12 fw-4 lh-18 cn-7 dc__truncate">{description}</p>}
+                </div>
+                {endIcon && <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{endIcon}</div>}
+            </div>
+        </components.Option>
+    )
+}

src/Shared/Components/SelectPicker/type.ts

@@ -0,0 +1,9 @@
+import { OptionType } from '@Common/Types'
+import { ReactNode } from 'react'
+
+// TODO Eshank: Make this configurable
+export interface SelectPickerOptionType extends OptionType<number | string, ReactNode> {
+    description?: string
+    startIcon?: ReactNode
+    endIcon?: ReactNode
+}

src/Shared/Components/SelectPicker/utils.ts

@@ -6,6 +6,13 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
             pointerEvents: 'auto',
         }),
     }),
+    menu: (base) => ({
+        ...base,
+        overflow: 'hidden',
+        marginBlock: '4px',
+        backgroundColor: 'var(--N0)',
+        boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.20)',
+    }),
     menuList: (base) => ({
         ...base,
         padding: 0,
@@ -35,8 +42,8 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
         ...base,
         color: 'var(--N900)',
         // eslint-disable-next-line no-nested-ternary
-        backgroundColor: state.isSelected ? 'var(--B100)' : state.isFocused ? 'var(--N100)' : 'white',
-        padding: '10px 12px',
+        backgroundColor: state.isSelected ? 'var(--B100)' : state.isFocused ? 'var(--N50)' : 'var(--N0)',
+        padding: '6px 8px',
         cursor: 'pointer',
         fontSize: '13px',
         lineHeight: '20px',