fix: add disabled state for option

Author: eshankvaish

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

@@ -225,6 +225,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     const labelId = `${inputId}-label`
     const errorElementId = `${inputId}-error-msg`
 
+    // Option disabled, group null state, checkbox hover, create option visibility (scroll reset on search)
     const selectStyles = useMemo(
         () =>
             getCommonSelectStyle({

src/Shared/Components/SelectPicker/common.tsx

@@ -117,6 +117,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
         data,
         selectProps: { isMulti },
         selectOption,
+        isDisabled,
     } = props
     const { description, startIcon, endIcon } = data ?? {}
     const showDescription = !!description
@@ -139,6 +140,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                         isChecked={props.isSelected || false}
                         value={CHECKBOX_VALUE.CHECKED}
                         rootClassName="mb-0 w-20 p-2 dc__align-self-start dc__no-shrink"
+                        disabled={isDisabled}
                     />
                 )}
                 <div className={`flex left ${showDescription ? 'top' : ''} dc__gap-8`}>

src/Shared/Components/SelectPicker/utils.ts

@@ -149,6 +149,13 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         ':hover': {
             backgroundColor: 'var(--N50)',
         },
+
+        ...(state.isDisabled && {
+            cursor: 'not-allowed',
+            // Adding to ensure no active or hover is applied
+            // backgroundColor: 'var(--N0) !important',
+            opacity: 0.5,
+        }),
     }),
     dropdownIndicator: (base, state) => ({
         ...base,