feat: add support for rendering custom options

Author: eshankvaish

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

@@ -127,6 +127,9 @@ const SelectPicker = ({
     isMulti,
     name,
     classNamePrefix,
+    renderCustomOptions,
+    shouldRenderCustomOptions = false,
+    isSearchable,
     ...props
 }: SelectPickerProps) => {
     const { inputId, required, isDisabled, controlShouldRenderValue } = props
@@ -135,6 +138,7 @@ const SelectPicker = ({
     // Only large variant is supported for multi select picker
     const selectSize = isMulti && !controlShouldRenderValue ? ComponentSizeType.large : size
     const shouldShowSelectedOptionIcon = !isMulti && showSelectedOptionIcon
+    const isSelectSearchable = !shouldRenderCustomOptions && isSearchable
 
     const labelId = `${inputId}-label`
     const errorElementId = `${inputId}-error-msg`
@@ -163,9 +167,14 @@ const SelectPicker = ({
 
     const renderMenuList = useCallback(
         (menuProps: MenuListProps<SelectPickerOptionType>) => (
-            <SelectPickerMenuList {...menuProps} renderMenuListFooter={renderMenuListFooter} />
+            <SelectPickerMenuList
+                {...menuProps}
+                renderMenuListFooter={renderMenuListFooter}
+                renderCustomOptions={renderCustomOptions}
+                shouldRenderCustomOptions={shouldRenderCustomOptions}
+            />
         ),
-        [],
+        [shouldRenderCustomOptions],
     )
 
     const renderValueContainer = useCallback(
@@ -228,6 +237,7 @@ const SelectPicker = ({
                                 isMulti
                                 name={name || inputId}
                                 classNamePrefix={classNamePrefix || inputId}
+                                isSearchable={isSelectSearchable}
                                 placeholder={placeholder}
                                 components={{
                                     IndicatorSeparator: null,
@@ -260,6 +270,7 @@ const SelectPicker = ({
                                 {...props}
                                 name={name || inputId}
                                 classNamePrefix={classNamePrefix || inputId}
+                                isSearchable={isSelectSearchable}
                                 placeholder={placeholder}
                                 components={{
                                     IndicatorSeparator: null,

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

@@ -144,15 +144,18 @@ export const SelectPickerOption = ({
 
 export const SelectPickerMenuList = ({
     renderMenuListFooter,
+    shouldRenderCustomOptions,
+    renderCustomOptions,
     ...props
-}: MenuListProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'renderMenuListFooter'>) => {
+}: MenuListProps<SelectPickerOptionType> &
+    Pick<SelectPickerProps, 'renderMenuListFooter' | 'shouldRenderCustomOptions' | 'renderCustomOptions'>) => {
     const { children } = props
 
     return (
         <components.MenuList {...props}>
-            <div className="py-4 cursor">{children}</div>
+            <div className="py-4 cursor">{shouldRenderCustomOptions ? renderCustomOptions() : children}</div>
             {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
-            {renderMenuListFooter && (
+            {!shouldRenderCustomOptions && renderMenuListFooter && (
                 <div className=" dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0">
                     {renderMenuListFooter()}
                 </div>

src/Shared/Components/SelectPicker/common.tsx

@@ -46,6 +46,9 @@ export type SelectPickerProps = Pick<
     | 'getOptionLabel'
     | 'getOptionValue'
     | 'isOptionSelected'
+    | 'menuIsOpen'
+    | 'onMenuOpen'
+    | 'onMenuClose'
 > &
     Required<Pick<SelectProps, 'inputId'>> & {
         /**
@@ -111,7 +114,7 @@ export type SelectPickerProps = Pick<
          * @default false
          */
         disableDescriptionEllipsis?: boolean
-        // TODO: Improve typing and add support for custom option list; isMenuOpen prop expose?
+        // TODO: ref support?
     } & (
         | {
               isMulti?: never
@@ -141,4 +144,26 @@ export type SelectPickerProps = Pick<
                   getIsOptionValid?: (option: SelectPickerOptionType) => boolean
               }
           }
+    ) &
+    (
+        | {
+              /**
+               * If true, custom options are rendered in the menuList component of react select
+               *
+               * Note: renderCustomOptions is required to be passed; renderMenuListFooter is also not called
+               *
+               * @default false
+               */
+              shouldRenderCustomOptions: boolean
+              /**
+               * Callback handler for custom options
+               *
+               * Imp Note: The menu open/close needs to handled by the consumer in this case
+               */
+              renderCustomOptions: () => ReactElement
+          }
+        | {
+              shouldRenderCustomOptions?: never
+              renderCustomOptions?: never
+          }
     )