feat: add filter on create option and extend type

Author: eshankvaish

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

@@ -31,7 +31,7 @@ import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-ov
 import { ComponentSizeType } from '@Shared/constants'
 import { ConditionalWrap } from '@Common/Helper'
 import Tippy from '@tippyjs/react'
-import { getCommonSelectStyle } from './utils'
+import { getCommonSelectStyle, getSelectPickerOptionByValue } from './utils'
 import {
     SelectPickerMultiValueLabel,
     SelectPickerMultiValueRemove,
@@ -201,7 +201,7 @@ const SelectPicker = forwardRef(
         }: SelectPickerProps,
         ref: ForwardedRef<SelectInstance<SelectPickerOptionType>>,
     ) => {
-        const { inputId, required, isDisabled, controlShouldRenderValue } = props
+        const { inputId, required, isDisabled, controlShouldRenderValue, value } = props
         const {
             isCreatable = false,
             isGroupHeadingSelectable = false,
@@ -230,7 +230,11 @@ const SelectPicker = forwardRef(
         )
 
         // Used to show the create new option for creatable select
-        const isValidNewOption = (inputValue: string) => isCreatable && !!inputValue?.trim()
+        // TODO: FilterButton; Target Platform
+        const isValidNewOption = (inputValue: string) =>
+            isCreatable &&
+            !!inputValue?.trim() &&
+            !getSelectPickerOptionByValue(value as SelectPickerOptionType[], inputValue.trim(), null)
 
         const renderControl = useCallback(
             (controlProps: ControlProps<SelectPickerOptionType>) => (

src/Shared/Components/SelectPicker/type.ts

@@ -17,7 +17,8 @@
 import { OptionType } from '@Common/Types'
 import { ComponentSizeType } from '@Shared/constants'
 import { ReactElement, ReactNode } from 'react'
-import { Props as ReactSelectProps } from 'react-select'
+import { GroupBase, Props as ReactSelectProps } from 'react-select'
+import { CreatableProps } from 'react-select/creatable'
 
 export interface SelectPickerOptionType extends OptionType<number | string, ReactNode> {
     /**
@@ -39,7 +40,7 @@ export enum SelectPickerVariantType {
     BORDER_LESS = 'border-less',
 }
 
-type SelectProps = ReactSelectProps<SelectPickerOptionType>
+type SelectProps = ReactSelectProps<SelectPickerOptionType, boolean, GroupBase<SelectPickerOptionType>>
 
 export type SelectPickerProps = Pick<
     SelectProps,
@@ -138,7 +139,10 @@ export type SelectPickerProps = Pick<
           }
         | {
               isMulti: boolean
-              multiSelectProps?: {
+              multiSelectProps?: Pick<
+                  CreatableProps<SelectPickerOptionType, true, GroupBase<SelectPickerOptionType>>,
+                  'onCreateOption'
+              > & {
                   /**
                    * If true, the select picker creates the new option
                    * Only applicable for isMulti: true

src/Shared/Components/SelectPicker/utils.ts

@@ -16,7 +16,7 @@
 
 import { CHECKBOX_VALUE } from '@Common/Types'
 import { ComponentSizeType } from '@Shared/constants'
-import { MultiValue, StylesConfig } from 'react-select'
+import { GroupBase, MultiValue, OptionsOrGroups, StylesConfig } from 'react-select'
 import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
 
 const getMenuWidthFromSize = (menuSize: SelectPickerProps['menuSize']): string => {
@@ -312,3 +312,39 @@ export const getGroupCheckboxValue = (
 
     return null
 }
+
+/**
+ * Retrieves an option from the options list based on the provided value.
+ *
+ * @param optionsList - The list of options or groups of options.
+ * @param value - The value to compare against the options' values.
+ * @param defaultOption - The default option to return if no match is found.
+ * @returns The matched option or the default option if no match is found.
+ */
+export const getSelectPickerOptionByValue = (
+    optionsList: OptionsOrGroups<SelectPickerOptionType, GroupBase<SelectPickerOptionType>>,
+    value: string | number,
+    defaultOption: SelectPickerOptionType = { label: '', value: '' },
+): SelectPickerOptionType => {
+    const foundOption = (optionsList ?? []).reduce(
+        (acc, curr) => {
+            if (!acc.notFound) return acc
+
+            if ('value' in curr && curr.value === value) {
+                return { data: curr, notFound: false }
+            }
+
+            if ('options' in curr && curr.options) {
+                const nestedOption = curr.options.find(({ value: _value }) => _value === value)
+                if (nestedOption) {
+                    return { data: nestedOption, notFound: false }
+                }
+            }
+
+            return acc
+        },
+        { notFound: true, data: defaultOption },
+    ).data
+
+    return foundOption
+}