feat: SelectPicker - add support for load more button in menu list

Author: RohitRaj011

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

@@ -214,7 +214,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     onCreateOption,
     closeMenuOnSelect = false,
     shouldShowNoOptionsMessage = true,
-    formatCreateLabel,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
@@ -408,7 +407,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onInputChange={onInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
-                            formatCreateLabel={formatCreateLabel}
                             onKeyDown={handleKeyDown}
                         />
                     </div>

src/Shared/Components/SelectPicker/common.tsx

@@ -38,6 +38,8 @@ import { ReactSelectInputAction } from '@Common/Constants'
 import { isNullOrUndefined } from '@Shared/Helpers'
 import { Tooltip } from '@Common/Tooltip'
 import { TooltipProps } from '@Common/Tooltip/types'
+import { ComponentSizeType } from '@Shared/constants'
+import { Button, ButtonVariantType } from '../Button'
 import { SelectPickerGroupHeadingProps, SelectPickerOptionType, SelectPickerProps } from './type'
 import { getGroupCheckboxValue } from './utils'
 
@@ -203,14 +205,40 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
 export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPickerOptionType<OptionValue>>) => {
     const {
         children,
-        selectProps: { inputValue, renderMenuListFooter, shouldRenderCustomOptions, renderCustomOptions },
+        selectProps: {
+            inputValue,
+            renderMenuListFooter,
+            shouldRenderCustomOptions,
+            renderCustomOptions,
+            loadMoreButtonConfig,
+        },
     } = props
 
     return (
         <>
             {/* added key here to explicitly re-render the list on input change so that the top option is rendered */}
             <components.MenuList {...props} key={inputValue}>
-                <div className="py-4 cursor">{shouldRenderCustomOptions ? renderCustomOptions() : children}</div>
+                <div className="py-4 cursor">
+                    {shouldRenderCustomOptions ? (
+                        renderCustomOptions()
+                    ) : (
+                        <>
+                            {children}
+                            {loadMoreButtonConfig?.show && (
+                                <div className="px-4">
+                                    <Button
+                                        {...loadMoreButtonConfig}
+                                        dataTestId="load-more-previous-deployments"
+                                        variant={ButtonVariantType.borderLess}
+                                        text="Load more"
+                                        size={ComponentSizeType.small}
+                                        fullWidth
+                                    />
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
                 {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
             </components.MenuList>
             {!shouldRenderCustomOptions && renderMenuListFooter && (

src/Shared/Components/SelectPicker/type.ts

@@ -23,6 +23,7 @@ import { CreatableProps } from 'react-select/creatable'
 // This import allows to extend the base interface in react-select module via module augmentation
 import type {} from 'react-select/base'
 import { TooltipProps } from '@Common/Tooltip/types'
+import { ButtonProps } from '../Button'
 
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
     /**
@@ -84,6 +85,11 @@ declare module 'react-select/base' {
          * @default 'true'
          */
         showSelectedOptionIcon?: boolean
+        /** Renders "Load more" button at the end of the menu list. */
+        loadMoreButtonConfig?: Pick<ButtonProps, 'isLoading' | 'disabled'> & {
+            show?: boolean
+            onClick?: () => void
+        }
     }
 }
 
@@ -131,6 +137,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
             | 'renderCustomOptions'
             | 'icon'
             | 'showSelectedOptionIcon'
+            | 'loadMoreButtonConfig'
         >
     > &
     Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> &