feat: add support for menuListFooterConfig instead of renderMenuListFooter

Author: eshankvaish

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

@@ -44,6 +44,7 @@ import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } fr
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
 import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper'
 import { getFormFieldAriaAttributes } from '../FormFieldWrapper'
+import './selectPicker.scss'
 
 /**
  * Generic component for select picker
@@ -83,16 +84,15 @@ import { getFormFieldAriaAttributes } from '../FormFieldWrapper'
  * <SelectPicker ... helperText="Help information" />
  * ```
  *
- * @example Menu list footer
+ * @example Menu list footer config
  * The footer is sticky by default
  * ```tsx
  * <SelectPicker
  *      ...
- *      renderMenuListFooter={() => (
- *          <div className="px-8 py-6 dc__border-top bg__secondary cn-6">
- *              <div>Foot note</div>
- *          </div>
- *      )}
+ *      menuListFooterConfig={{
+ *          type: 'text',
+ *          value: 'Info text',
+ *     }}
  * />
  * ```
  *
@@ -206,7 +206,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     shouldMenuAlignRight = false,
     fullWidth = false,
     customSelectedOptionsCount = null,
-    renderMenuListFooter,
+    menuListFooterConfig,
     isCreatable = false,
     onCreateOption,
     closeMenuOnSelect = false,
@@ -460,7 +460,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                         isValidNewOption={isValidNewOption}
                         createOptionPosition="first"
                         onCreateOption={handleCreateOption}
-                        renderMenuListFooter={!optionListError && renderMenuListFooter}
+                        menuListFooterConfig={!optionListError ? menuListFooterConfig : null}
                         inputValue={props.inputValue ?? inputValue}
                         onInputChange={handleInputChange}
                         icon={icon}

src/Shared/Components/SelectPicker/common.tsx

@@ -39,8 +39,11 @@ 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 { SelectPickerGroupHeadingProps, SelectPickerOptionType, SelectPickerProps } from './type'
 import { getGroupCheckboxValue } from './utils'
+import { Icon } from '../Icon'
+import { Button, ButtonProps } from '../Button'
 
 const getTooltipProps = (tooltipProps: SelectPickerOptionType['tooltipProps'] = {}): TooltipProps => {
     if (tooltipProps) {
@@ -242,12 +245,46 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
     )
 }
 
+const SelectPickerMenuListFooter = ({
+    menuListFooterConfig,
+}: Required<Pick<SelectPickerProps, 'menuListFooterConfig'>>) => {
+    if (!menuListFooterConfig) {
+        return null
+    }
+
+    const { type } = menuListFooterConfig
+
+    if (type === 'text') {
+        const { value } = menuListFooterConfig
+
+        return (
+            <div className="flex left dc__gap-6">
+                <Icon name="ic-info-outline" color="N700" size={16} />
+                <p className="fs-12 fw-4 fs-16 cn-8 dc__truncate">{value}</p>
+            </div>
+        )
+    }
+
+    if (type === 'button') {
+        const { buttonProps } = menuListFooterConfig
+
+        return (
+            // We are adding justify-content: flex-start for secondary variant
+            <div className={`select-picker__menu-list-footer-button--${buttonProps.variant}`}>
+                <Button {...(buttonProps as ButtonProps)} size={ComponentSizeType.small} fullWidth />
+            </div>
+        )
+    }
+
+    return null
+}
+
 export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPickerOptionType<OptionValue>>) => {
     const {
         children,
         selectProps: {
             inputValue,
-            renderMenuListFooter,
+            menuListFooterConfig,
             shouldRenderCustomOptions,
             renderCustomOptions,
             renderOptionsFooter,
@@ -270,9 +307,9 @@ export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPi
                 </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 && (
-                <div className="dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bg__menu--primary dc__zi-2">
-                    {renderMenuListFooter()}
+            {!shouldRenderCustomOptions && menuListFooterConfig && (
+                <div className="dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bg__menu--primary dc__zi-2 p-8 dc__border-top-n1">
+                    <SelectPickerMenuListFooter menuListFooterConfig={menuListFooterConfig} />
                 </div>
             )}
         </>

src/Shared/Components/SelectPicker/selectPicker.scss

@@ -0,0 +1,9 @@
+.select-picker {
+    &__menu-list-footer-button {
+        &--secondary {
+            button {
+                justify-content: flex-start;
+            }
+        }
+    }
+}

src/Shared/Components/SelectPicker/type.ts

@@ -25,6 +25,7 @@ import type {} from 'react-select/base'
 import { TooltipProps } from '@Common/Tooltip/types'
 import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector'
 import { FormFieldWrapperProps } from '../FormFieldWrapper/types'
+import { ButtonProps, ButtonVariantType } from '../Button'
 
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
     /**
@@ -54,17 +55,31 @@ type SelectProps<OptionValue, IsMulti extends boolean> = ReactSelectProps<
     GroupBase<SelectPickerOptionType<OptionValue>>
 >
 
+export type MenuListFooterConfigType =
+    | {
+          type: 'text'
+          value: string
+          buttonProps?: never
+      }
+    | {
+          type: 'button'
+          value?: never
+          buttonProps: {
+              variant: ButtonVariantType.primary | ButtonVariantType.secondary
+          } & Omit<ButtonProps, 'size' | 'fullWidth' | 'icon' | 'endIcon' | 'variant'>
+      }
+
 declare module 'react-select/base' {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
         /**
-         * Render function for the footer at the bottom of menu list. It is sticky by default
+         * Config for the footer at the bottom of menu list. It is sticky by default
          */
-        renderMenuListFooter?: () => ReactNode
+        menuListFooterConfig?: MenuListFooterConfigType
         /**
          * 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
+         * Note: renderCustomOptions is required to be passed; menuListFooterConfig is also not used
          *
          * @default false
          */
@@ -147,7 +162,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
     Partial<
         Pick<
             SelectProps<OptionValue, IsMulti>,
-            | 'renderMenuListFooter'
+            | 'menuListFooterConfig'
             | 'shouldRenderCustomOptions'
             | 'renderCustomOptions'
             | 'icon'