@juspay/blend-design-system 0.0.37-beta.7 → 0.0.37

package/lib/components/ModalV2/modalV2.dark.tokens.ts

@@ -0,0 +1,183 @@
+import { type FoundationTokenType } from '../../tokens/theme.token'
+import type { ResponsiveModalV2Tokens } from './modalV2.tokens.types'
+
+export const getModalV2DarkToken = (
+    foundationToken: FoundationTokenType
+): ResponsiveModalV2Tokens => {
+    return {
+        sm: {
+            backgroundColor: foundationToken.colors.gray[700],
+            paddingTop: foundationToken.unit[16],
+            paddingRight: foundationToken.unit[16],
+            paddingBottom: foundationToken.unit[16],
+            paddingLeft: foundationToken.unit[16],
+            boxShadow: foundationToken.shadows.xs,
+            borderRadius: foundationToken.border.radius[16],
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                offset: foundationToken.unit[16],
+            },
+            divider: {
+                borderColor: foundationToken.colors.gray[200],
+            },
+            skeleton: {
+                header: {
+                    gap: foundationToken.unit[16],
+                    paddingTop: foundationToken.unit[20],
+                    paddingRight: foundationToken.unit[20],
+                    paddingBottom: foundationToken.unit[20],
+                    paddingLeft: foundationToken.unit[20],
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                    width: '60%',
+                    height: 24,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+                body: {
+                    gap: foundationToken.unit[12],
+                    width: '100%',
+                    height: 300,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+            },
+            header: {
+                slot: {
+                    gap: foundationToken.unit[8],
+                },
+                gap: foundationToken.unit[16],
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                maxHeight: '20vh',
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[700],
+                borderTopLeftRadius: foundationToken.border.radius[16],
+                borderTopRightRadius: foundationToken.border.radius[16],
+                text: {
+                    title: {
+                        color: foundationToken.colors.gray[0],
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                    subtitle: {
+                        color: foundationToken.colors.gray[100],
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[400],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                },
+            },
+
+            body: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                backgroundColor: foundationToken.colors.gray[700],
+            },
+
+            footer: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                borderTop: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[700],
+                gap: foundationToken.unit[12],
+            },
+            closeButton: {
+                color: foundationToken.colors.gray[100],
+                width: foundationToken.unit[16],
+                height: foundationToken.unit[16],
+            },
+        },
+        lg: {
+            backgroundColor: foundationToken.colors.gray[700],
+            paddingTop: foundationToken.unit[16],
+            paddingRight: foundationToken.unit[16],
+            paddingBottom: foundationToken.unit[16],
+            paddingLeft: foundationToken.unit[16],
+            boxShadow: foundationToken.shadows.lg,
+            borderRadius: foundationToken.border.radius[16],
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                offset: foundationToken.unit[16],
+            },
+            divider: {
+                borderColor: foundationToken.colors.gray[200],
+            },
+            skeleton: {
+                header: {
+                    gap: foundationToken.unit[16],
+                    paddingTop: foundationToken.unit[20],
+                    paddingRight: foundationToken.unit[20],
+                    paddingBottom: foundationToken.unit[20],
+                    paddingLeft: foundationToken.unit[20],
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                    width: '60%',
+                    height: 24,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+                body: {
+                    gap: foundationToken.unit[12],
+                    width: '100%',
+                    height: 300,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+            },
+            header: {
+                gap: foundationToken.unit[16],
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                maxHeight: '20vh',
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[700],
+                borderTopLeftRadius: foundationToken.border.radius[16],
+                borderTopRightRadius: foundationToken.border.radius[16],
+                slot: {
+                    gap: foundationToken.unit[8],
+                },
+                text: {
+                    title: {
+                        color: foundationToken.colors.gray[0],
+                        fontSize: foundationToken.font.size.body.lg.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                    subtitle: {
+                        color: foundationToken.colors.gray[100],
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[400],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                },
+            },
+
+            body: {
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                backgroundColor: foundationToken.colors.gray[700],
+            },
+
+            footer: {
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                borderTop: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[700],
+                gap: foundationToken.unit[16],
+            },
+            closeButton: {
+                color: foundationToken.colors.gray[100],
+                width: foundationToken.unit[16],
+                height: foundationToken.unit[16],
+            },
+        },
+    }
+}

package/lib/components/ModalV2/modalV2.light.tokens.ts

@@ -0,0 +1,183 @@
+import { type FoundationTokenType } from '../../tokens/theme.token'
+import type { ResponsiveModalV2Tokens } from './modalV2.tokens.types'
+
+export const getModalV2LightToken = (
+    foundationToken: FoundationTokenType
+): ResponsiveModalV2Tokens => {
+    return {
+        sm: {
+            paddingTop: foundationToken.unit[16],
+            paddingRight: foundationToken.unit[16],
+            paddingBottom: foundationToken.unit[16],
+            paddingLeft: foundationToken.unit[16],
+            boxShadow: foundationToken.shadows.xs,
+            borderRadius: foundationToken.border.radius[16],
+            backgroundColor: foundationToken.colors.gray[0],
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                offset: foundationToken.unit[16],
+            },
+            skeleton: {
+                header: {
+                    gap: foundationToken.unit[16],
+                    paddingTop: foundationToken.unit[20],
+                    paddingRight: foundationToken.unit[20],
+                    paddingBottom: foundationToken.unit[20],
+                    paddingLeft: foundationToken.unit[20],
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                    width: '60%',
+                    height: 24,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+                body: {
+                    gap: foundationToken.unit[12],
+                    width: '100%',
+                    height: 300,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+            },
+            divider: {
+                borderColor: foundationToken.colors.gray[200],
+            },
+            header: {
+                gap: foundationToken.unit[16],
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                maxHeight: '20vh',
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                borderTopLeftRadius: foundationToken.border.radius[16],
+                borderTopRightRadius: foundationToken.border.radius[16],
+                slot: {
+                    gap: foundationToken.unit[8],
+                },
+                text: {
+                    title: {
+                        color: foundationToken.colors.gray[700],
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                    subtitle: {
+                        color: foundationToken.colors.gray[600],
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[400],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                },
+            },
+
+            body: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                backgroundColor: foundationToken.colors.gray[0],
+            },
+
+            footer: {
+                paddingTop: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[16],
+                borderTop: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                gap: foundationToken.unit[12],
+            },
+            closeButton: {
+                color: foundationToken.colors.gray[500],
+                width: foundationToken.unit[16],
+                height: foundationToken.unit[16],
+            },
+        },
+        lg: {
+            backgroundColor: foundationToken.colors.gray[0],
+            paddingTop: foundationToken.unit[16],
+            paddingRight: foundationToken.unit[16],
+            paddingBottom: foundationToken.unit[16],
+            paddingLeft: foundationToken.unit[16],
+            boxShadow: foundationToken.shadows.lg,
+            borderRadius: foundationToken.border.radius[16],
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                offset: foundationToken.unit[16],
+            },
+            divider: {
+                borderColor: foundationToken.colors.gray[200],
+            },
+            header: {
+                gap: foundationToken.unit[16],
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                maxHeight: '20vh',
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                borderTopLeftRadius: foundationToken.border.radius[16],
+                borderTopRightRadius: foundationToken.border.radius[16],
+                slot: {
+                    gap: foundationToken.unit[8],
+                },
+                text: {
+                    title: {
+                        color: foundationToken.colors.gray[700],
+                        fontSize: foundationToken.font.size.body.lg.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                    subtitle: {
+                        color: foundationToken.colors.gray[600],
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[400],
+                        lineHeight: foundationToken.font.lineHeight[20],
+                    },
+                },
+            },
+            skeleton: {
+                header: {
+                    gap: foundationToken.unit[16],
+                    paddingTop: foundationToken.unit[20],
+                    paddingRight: foundationToken.unit[20],
+                    paddingBottom: foundationToken.unit[20],
+                    paddingLeft: foundationToken.unit[20],
+                    borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                    width: '60%',
+                    height: 24,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+                body: {
+                    gap: foundationToken.unit[12],
+                    width: '100%',
+                    height: 300,
+                    borderRadius: foundationToken.border.radius[4],
+                },
+            },
+
+            body: {
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                backgroundColor: foundationToken.colors.gray[0],
+            },
+
+            footer: {
+                paddingTop: foundationToken.unit[20],
+                paddingRight: foundationToken.unit[20],
+                paddingBottom: foundationToken.unit[20],
+                paddingLeft: foundationToken.unit[20],
+                borderTop: `1px solid ${foundationToken.colors.gray[200]}`,
+                backgroundColor: foundationToken.colors.gray[0],
+                gap: foundationToken.unit[16],
+            },
+            closeButton: {
+                color: foundationToken.colors.gray[500],
+                width: foundationToken.unit[16],
+                height: foundationToken.unit[16],
+            },
+        },
+    }
+}

package/lib/components/ModalV2/modalV2.tokens.ts

@@ -0,0 +1,21 @@
+import { type FoundationTokenType } from '../../tokens/theme.token'
+import { Theme } from '../../context/theme.enum'
+import { getModalV2LightToken } from './modalV2.light.tokens'
+import { getModalV2DarkToken } from './modalV2.dark.tokens'
+import type { ResponsiveModalV2Tokens } from './modalV2.tokens.types'
+
+export type {
+    ModalV2State,
+    ModalV2TokensType,
+    ResponsiveModalV2Tokens,
+} from './modalV2.tokens.types'
+
+export const getModalV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsiveModalV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return getModalV2DarkToken(foundationToken)
+    }
+    return getModalV2LightToken(foundationToken)
+}

package/lib/components/ModalV2/modalV2.tokens.types.ts

@@ -0,0 +1,94 @@
+import type { CSSObject } from 'styled-components'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type ModalV2State = 'default'
+
+export type ModalV2TokensType = {
+    boxShadow: CSSObject['boxShadow']
+    borderRadius: CSSObject['borderRadius']
+    overlay: {
+        backgroundColor: CSSObject['backgroundColor']
+        offset: CSSObject['offset']
+    }
+    paddingTop: CSSObject['paddingTop']
+    paddingRight: CSSObject['paddingRight']
+    paddingBottom: CSSObject['paddingBottom']
+    paddingLeft: CSSObject['paddingLeft']
+    backgroundColor: CSSObject['backgroundColor']
+    header: {
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        maxHeight: CSSObject['maxHeight']
+        borderBottom: CSSObject['border']
+        backgroundColor: CSSObject['backgroundColor']
+        borderTopLeftRadius: CSSObject['borderTopLeftRadius']
+        borderTopRightRadius: CSSObject['borderTopRightRadius']
+        slot: {
+            gap: CSSObject['gap']
+        }
+        text: {
+            title: {
+                color: CSSObject['color']
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+            subtitle: {
+                color: CSSObject['color']
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                lineHeight: CSSObject['lineHeight']
+            }
+        }
+    }
+    divider: {
+        borderColor: CSSObject['borderColor']
+    }
+    skeleton: {
+        header: {
+            gap: CSSObject['gap']
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            borderBottom: CSSObject['border']
+            width: CSSObject['width']
+            height: CSSObject['height']
+            borderRadius: CSSObject['borderRadius']
+        }
+        body: {
+            gap: CSSObject['gap']
+            width: CSSObject['width']
+            height: CSSObject['height']
+            borderRadius: CSSObject['borderRadius']
+        }
+    }
+    body: {
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        backgroundColor: CSSObject['backgroundColor']
+    }
+    footer: {
+        paddingTop: CSSObject['paddingTop']
+        paddingRight: CSSObject['paddingRight']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        borderTop: CSSObject['border']
+        backgroundColor: CSSObject['backgroundColor']
+        gap: CSSObject['gap']
+    }
+    closeButton: {
+        color: CSSObject['color']
+        width: CSSObject['width']
+        height: CSSObject['height']
+    }
+}
+
+export type ResponsiveModalV2Tokens = {
+    [key in keyof BreakpointType]: ModalV2TokensType
+}

package/lib/components/ModalV2/modalV2.types.ts

@@ -0,0 +1,80 @@
+// Skeleton types
+import { SkeletonVariant } from '../Skeleton'
+import type { ModalV2TokensType } from './modalV2.tokens.types'
+import type { HTMLAttributes, ReactNode } from 'react'
+import type { ButtonV2Props } from '../ButtonV2'
+import type { CSSObject } from 'styled-components'
+
+export type HeaderSkeletonConfig = {
+    show: boolean
+    showDivider: boolean
+    showCloseButton: boolean
+}
+
+export type BodySkeletonConfig = {
+    show: boolean
+    width: string
+    height: string | number
+}
+
+export type FooterSkeletonConfig = {
+    show: boolean
+    showDivider: boolean
+}
+
+export type ModalV2SkeletonProps = {
+    modalTokens: ModalV2TokensType
+    headerSkeleton?: HeaderSkeletonConfig
+    bodySkeleton?: BodySkeletonConfig
+    footerSkeleton?: FooterSkeletonConfig
+    skeletonVariant: SkeletonVariant
+}
+
+// Modal types - using ButtonV2 props
+export type ModalV2ButtonAction = Omit<ButtonV2Props, 'buttonGroupPosition'>
+
+export type BodySkeletonProps = {
+    show?: boolean
+    width?: string
+    height?: string | number
+}
+
+export type ModalV2BodySkeletonProps = {
+    show?: boolean
+    variant?: SkeletonVariant
+    bodySkeletonProps?: BodySkeletonProps
+}
+
+export type ModalV2Dimensions = {
+    width?: CSSObject['width']
+    height?: CSSObject['height']
+    minWidth?: CSSObject['minWidth']
+    maxWidth?: CSSObject['maxWidth']
+    minHeight?: CSSObject['minHeight']
+    maxHeight?: CSSObject['maxHeight']
+}
+
+export type ModalV2Props = {
+    isOpen: boolean
+    isCustom?: boolean
+    onClose: () => void
+    title?: string
+    subtitle?: string
+    children: ReactNode
+    primaryAction?: ModalV2ButtonAction
+    secondaryAction?: ModalV2ButtonAction
+    showCloseButton?: boolean
+    showHeader?: boolean
+    showFooter?: boolean
+    closeOnBackdropClick?: boolean
+    customHeader?: ReactNode
+    customFooter?: ReactNode
+    headerSlot?: ReactNode
+    showDivider?: boolean
+    dimensions?: ModalV2Dimensions
+    useDrawerOnMobile?: boolean
+    skeleton?: ModalV2BodySkeletonProps
+} & Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children' | 'title' | 'className' | 'style'
+>

package/lib/components/MultiSelect/MultiSelect.tsx

@@ -101,6 +101,7 @@ const MultiSelect = ({
     onClearAllClick,
     onOpenChange,
     multiSelectGroupPosition,
+    menuFooter,
     ...rest
 }: MultiSelectProps) => {
     const { onFocus, onBlur, ...buttonRest } = rest
@@ -356,6 +357,7 @@ const MultiSelect = ({
                             hasMore={hasMore}
                             loadingComponent={loadingComponent}
                             menuId={menuId}
+                            menuFooter={menuFooter}
                             trigger={
                                 customTrigger || (
                                     <PrimitiveButton
@@ -490,7 +492,8 @@ const MultiSelect = ({
                                                 variant ===
                                                     MultiSelectVariant.CONTAINER &&
                                                 isSmallScreenWithLargeSize &&
-                                                isItemSelected
+                                                isItemSelected &&
+                                                label
                                                     ? paddingY * 1.5
                                                     : 0
                                             }

package/lib/components/MultiSelect/MultiSelectMenu.tsx

@@ -86,6 +86,10 @@ const FixedActionButtons = styled(Block)(() => ({
     flexShrink: 0,
 }))
 
+const MenuFooter = styled(Block)(() => ({
+    flexShrink: 0,
+}))
+
 type FlattenedMultiSelectItem = VirtualListItem & {
     type: 'item' | 'label' | 'separator'
     item?: MultiSelectMenuItemType
@@ -171,6 +175,7 @@ const MultiSelectMenu = ({
     allowCustomValue = false,
     customValueLabel = 'Specify',
     menuId,
+    menuFooter,
 }: MultiSelectMenuProps) => {
     const multiSelectTokens =
         useResponsiveTokens<MultiSelectTokensType>('MULTI_SELECT')
@@ -892,6 +897,9 @@ const MultiSelectMenu = ({
                                         )}
                                     </FixedActionButtons>
                                 )}
+                            {menuFooter && (
+                                <MenuFooter>{menuFooter}</MenuFooter>
+                            )}
                         </>
                     )}
                 </Content>

package/lib/components/MultiSelect/MultiSelectTrigger.tsx

@@ -170,7 +170,8 @@ const MultiSelectTrigger = ({
                         paddingTop={
                             variant === MultiSelectVariant.CONTAINER &&
                             isSmallScreenWithLargeSize &&
-                            isItemSelected
+                            isItemSelected &&
+                            label
                                 ? paddingY * 1.5
                                 : 0
                         }

package/lib/components/MultiSelect/index.ts

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelect } from './MultiSelect'
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelectTrigger } from './MultiSelectTrigger'
 export * from './multiSelect.tokens'
 export * from './types'

package/lib/components/MultiSelect/types.ts

@@ -157,6 +157,7 @@ export type MultiSelectProps = {
     showClearButton?: boolean
     onClearAllClick?: () => void
     multiSelectGroupPosition?: 'center' | 'left' | 'right'
+    menuFooter?: React.ReactNode
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onChange'>
 
 // Multi Select Menu Dropdpown
@@ -225,4 +226,5 @@ export type MultiSelectMenuProps = {
     customValueLabel?: string
     menuId?: string
     collisionBoundary?: Element | null | Array<Element | null>
+    menuFooter?: React.ReactNode
 }

package/lib/components/MultiSelectV2/MultiSelectV2.tsx

@@ -91,6 +91,7 @@ const MultiSelectV2 = ({
     onClearAllClick,
     onOpenChange,
     multiSelectGroupPosition,
+    menuFooter,
     ...rest
 }: MultiSelectV2Props) => {
     const { disabled, name, ...buttonRest } = rest as {
@@ -366,6 +367,7 @@ const MultiSelectV2 = ({
                         }
                         allowCustomValue={allowCustomValue}
                         customValueLabel={customValueLabel}
+                        menuFooter={menuFooter}
                     />
 
                     {shouldShowClearButton && (