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

package/dist/{node-C_DmV86X.js → node-CovJEwot.js}

@@ -7082,6 +7082,14 @@ const f = (r) => {
           color: r.colors.gray[600]
         },
         iconColor: r.colors.gray[400]
+      },
+      footer: {
+        paddingTop: r.unit[16],
+        paddingRight: r.unit[16],
+        paddingBottom: r.unit[16],
+        paddingLeft: r.unit[16],
+        backgroundColor: r.colors.gray[0],
+        borderTop: `${r.border.width[1]} solid ${r.colors.gray[200]}`
       }
     },
     mobilePanel: {
@@ -7428,6 +7436,14 @@ const f = (r) => {
           color: r.colors.gray[200]
         },
         iconColor: r.colors.gray[500]
+      },
+      footer: {
+        paddingTop: r.unit[16],
+        paddingRight: r.unit[16],
+        paddingBottom: r.unit[16],
+        paddingLeft: r.unit[16],
+        backgroundColor: r.colors.gray[800],
+        borderTop: `${r.border.width[1]} solid ${r.colors.gray[700]}`
       }
     },
     mobilePanel: {

package/dist/node.js

@@ -1,4 +1,4 @@
-import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as c, g as b, p as d, o as u, n as S, m as p, a as h, l as m, j as v, i as x, k as A, h as C, f as M, e as B, d as E, c as N, b as P } from "./node-C_DmV86X.js";
+import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as c, g as b, p as d, o as u, n as S, m as p, a as h, l as m, j as v, i as x, k as A, h as C, f as M, e as B, d as E, c as N, b as P } from "./node-CovJEwot.js";
 export {
   a as FOUNDATION_THEME,
   o as Theme,

package/dist/{tokens.js → token-engine.js}

@@ -1,4 +1,4 @@
-import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, v as j, w as U, x as D, y as G, z as H } from "./node-C_DmV86X.js";
+import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, v as j, w as U, x as D, y as G, z as H } from "./node-CovJEwot.js";
 import { BRANCH_COLLECTION as ie, BRANCH_ID_PATTERN as ae, PRESETS as ce, PRESET_BLEND_DEFAULT as fe, PRESET_GREEN as le, PRESET_JUSPAY as Te, PRESET_ORANGE as ue, PRESET_PURPLE as de, RADIUS_PRESETS as Oe, SNAPSHOT_SUBCOLLECTION as ke, STORAGE_KEYS as Ee, TEAM_ROLE_PERMISSIONS as Ve, VERSION_PATTERN as ge, VERSION_SUBCOLLECTION as ve, analyzeContrast as pe, canUserPerformAction as Se, diffBrandConfigs as he, extractOverridePaths as Re, generateBranchId as Ae, generateColorScale as ye, getContrastRatio as Ce, getContrastRatioHex as Ne, getDefaultOnboardingState as Ie, getDefaultPreferences as Pe, getPreset as me, hexToRgb as _e, incrementVersion as Be, isValidHexColor as Le, listPresets as we, meetsWCAG as Me, parseBranchId as je, relativeLuminance as Ue, resolveWithInheritance as De, snapshotsPath as Ge, suggestForeground as He, validateAgainstLocks as xe, validateBranchId as Ke, validateBrandConfig as Fe, validatePaletteContrast as Je, validateVersion as $e, versionsPath as Ye } from "./tokens-server.js";
 function O(e) {
   const o = typeof structuredClone == "function" ? structuredClone(u) : JSON.parse(JSON.stringify(u));

package/lib/components/CodeEditor/MonacoEditorWrapper.tsx

@@ -5,9 +5,13 @@ import Block from '../Primitives/Block/Block'
 import type { CodeBlockTokenType } from '../CodeBlock/codeBlock.token'
 import './monaco-editor.css'
 
+// Monaco registers only `javascript`/`typescript` (VS Code's
+// `javascriptreact`/`typescriptreact` IDs are not registered, so they would
+// fall back to plaintext with no highlighting). Monaco's JS/TS tokenizers
+// handle JSX/TSX syntax fine, so map the ergonomic aliases onto them.
 const LANGUAGE_MAP: Record<string, string> = {
-    jsx: 'javascriptreact',
-    tsx: 'typescriptreact',
+    jsx: 'javascript',
+    tsx: 'typescript',
 }
 
 const mapLanguage = (value: string) => LANGUAGE_MAP[value] ?? value

package/lib/components/CodeEditor/types.ts

@@ -1,11 +1,61 @@
 import type { ReactNode } from 'react'
-import type { SupportedLanguage } from '../CodeBlock/types'
 
 export enum CodeEditorVariant {
     DEFAULT = 'default',
     NO_GUTTER = 'no-gutter',
 }
 
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorLanguage}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorLanguage =
+    | 'javascript'
+    | 'typescript'
+    | 'json'
+    | 'css'
+    | 'scss'
+    | 'less'
+    | 'html'
+    | 'xml'
+    | 'markdown'
+    | 'yaml'
+    | 'ini'
+    | 'graphql'
+    | 'sql'
+    | 'python'
+    | 'rust'
+    | 'go'
+    | 'java'
+    | 'kotlin'
+    | 'swift'
+    | 'c'
+    | 'cpp'
+    | 'csharp'
+    | 'php'
+    | 'ruby'
+    | 'shell'
+    | 'powershell'
+    | 'dockerfile'
+    | 'plaintext'
+
+/**
+ * Language accepted by {@link CodeEditorProps.language}: autocomplete for
+ * {@link KnownCodeEditorLanguage}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (the component forwards to Monaco, whose
+ * own `language` option is a plain `string`). Decoupled from `CodeBlock`'s
+ * `SupportedLanguage`, which is scoped to CodeBlock's hand-rolled tokenizer
+ * rather than Monaco.
+ */
+export type CodeEditorLanguage = KnownCodeEditorLanguage | (string & {})
+
 export type CodeEditorProps = {
     value: string
     onChange?: (value: string) => void
@@ -30,7 +80,7 @@ export type CodeEditorProps = {
      */
     showLeftIcon?: boolean
     showCopyButton?: boolean
-    language?: SupportedLanguage
+    language?: CodeEditorLanguage
     placeholder?: string
     readOnly?: boolean
     disabled?: boolean

package/lib/components/CodeEditorV2/MonacoEditor/MonacoEditorWrapper.tsx

@@ -25,9 +25,13 @@ import { CSSObject } from 'styled-components'
 // Language mapping
 // ---------------------------------------------------------------------------
 
+// Monaco registers only `javascript`/`typescript` (VS Code's
+// `javascriptreact`/`typescriptreact` IDs are not registered, so they would
+// fall back to plaintext with no highlighting). Monaco's JS/TS tokenizers
+// handle JSX/TSX syntax fine, so map the ergonomic aliases onto them.
 const LANGUAGE_MAP: Record<string, string> = {
-    jsx: 'javascriptreact',
-    tsx: 'typescriptreact',
+    jsx: 'javascript',
+    tsx: 'typescript',
 }
 
 const mapLanguage = (lang: string) => LANGUAGE_MAP[lang] ?? lang

package/lib/components/CodeEditorV2/codeEditorV2.types.ts

@@ -21,19 +21,58 @@ export type CodeEditorV2DiffLine = {
     type: CodeEditorV2DiffLineType
 }
 
-export type CodeEditorV2SupportedLanguage =
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorV2Language}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorV2Language =
     | 'javascript'
     | 'typescript'
-    | 'jsx'
-    | 'tsx'
     | 'json'
     | 'css'
+    | 'scss'
+    | 'less'
     | 'html'
+    | 'xml'
     | 'markdown'
     | 'yaml'
+    | 'ini'
+    | 'graphql'
+    | 'sql'
     | 'python'
     | 'rust'
-    | 'haskell'
+    | 'go'
+    | 'java'
+    | 'kotlin'
+    | 'swift'
+    | 'c'
+    | 'cpp'
+    | 'csharp'
+    | 'php'
+    | 'ruby'
+    | 'shell'
+    | 'powershell'
+    | 'dockerfile'
+    | 'plaintext'
+
+/**
+ * Language accepted by {@link CodeEditorV2Props.language}: autocomplete for
+ * {@link KnownCodeEditorV2Language}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (matching the internal
+ * `MonacoEditorWrapper`'s `language: string` — Monaco itself types the option
+ * as a plain `string`).
+ */
+export type CodeEditorV2Language = KnownCodeEditorV2Language | (string & {})
+
+/** @deprecated Use {@link CodeEditorV2Language} instead. */
+export type CodeEditorV2SupportedLanguage = CodeEditorV2Language
 
 export type CodeEditorV2Dimensions = {
     width?: CSSObject['width']
@@ -56,7 +95,7 @@ export type CodeEditorV2Props = {
         rightSlot?: ReactNode
         showCopyButton?: boolean
     }
-    language?: CodeEditorV2SupportedLanguage
+    language?: CodeEditorV2Language
     placeholder?: string
     readOnly?: boolean
     disabled?: boolean

package/lib/components/DateRangePicker/CalendarGrid.tsx

@@ -129,6 +129,7 @@ const CalendarSkeleton = ({
         <Block
             style={{
                 maxHeight: CONTAINER_HEIGHT,
+                height: '100%',
                 padding: FOUNDATION_THEME.unit[16],
             }}
         >
@@ -918,6 +919,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
             <MotionBlock
                 style={{
                     maxHeight: CONTAINER_HEIGHT,
+                    height: '100%',
                     overflowY: 'auto',
                     overflow: 'auto',
                     position: 'relative',
@@ -985,6 +987,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                     }}
                     style={{
                         maxHeight: CONTAINER_HEIGHT,
+                        height: '100%',
                         overflowY: 'auto',
                         overflow: 'auto',
                         position: 'relative',

package/lib/components/DateRangePicker/DateRangePicker.tsx

@@ -292,7 +292,7 @@ const CalendarSection: React.FC<
     isSingleDatePicker,
     maxYearOffset,
 }) => (
-    <Block>
+    <Block flexGrow={1} minHeight={0} overflow="auto">
         <CalendarGrid
             selectedRange={selectedRange}
             onDateSelect={onDateSelect}
@@ -1228,6 +1228,10 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
                         style={{
                             ...calendarToken.calendar,
                         }}
+                        maxHeight="var(--radix-popper-available-height)"
+                        display="flex"
+                        flexDirection="column"
+                        overflow="hidden"
                     >
                         {showDateInput && (
                             <DateInputsSection

package/lib/components/MenuV2/MenuV2.tsx

@@ -23,6 +23,8 @@ const MenuV2 = React.forwardRef<HTMLDivElement, MenuV2Props>(
             dimensions = {} as MenuV2Dimensions,
             enableSearch = false,
             searchPlaceholder = 'Search',
+            searchSortFn,
+            onEnter,
             enableVirtualScrolling = false,
             virtualScrolling,
             open: controlledOpen,
@@ -61,10 +63,14 @@ const MenuV2 = React.forwardRef<HTMLDivElement, MenuV2Props>(
         )
 
         const filteredItems = useMemo(
-            () => filterMenuV2Groups(items, searchText),
-            [items, searchText]
+            () => filterMenuV2Groups(items, searchText, searchSortFn),
+            [items, searchText, searchSortFn]
         )
 
+        const handleSearchEnter = useCallback(() => {
+            onEnter?.(searchText, filteredItems)
+        }, [onEnter, searchText, filteredItems])
+
         const handleInteractOutside = useCallback((e: unknown) => {
             const event = e as {
                 target: HTMLElement | null
@@ -104,6 +110,7 @@ const MenuV2 = React.forwardRef<HTMLDivElement, MenuV2Props>(
                         searchPlaceholder={searchPlaceholder}
                         searchText={searchText}
                         onSearchTextChange={setSearchText}
+                        onEnter={handleSearchEnter}
                         maxHeight={
                             dimensions.maxHeight as CSSObject['maxHeight']
                         }

package/lib/components/MenuV2/MenuV2Content.tsx

@@ -104,6 +104,7 @@ export type MenuV2ContentProps = {
     searchPlaceholder: string
     searchText: string
     onSearchTextChange: (value: string) => void
+    onEnter?: () => void
     maxHeight?: CSSObject['maxHeight']
     minHeight?: CSSObject['minHeight']
     minWidth?: CSSObject['minWidth']
@@ -130,6 +131,7 @@ const MenuV2Content = React.forwardRef<HTMLDivElement, MenuV2ContentProps>(
             searchPlaceholder,
             searchText,
             onSearchTextChange,
+            onEnter,
             maxHeight,
             minHeight,
             minWidth: minWidthProp,
@@ -250,6 +252,10 @@ const MenuV2Content = React.forwardRef<HTMLDivElement, MenuV2ContentProps>(
                             onChange={(e) => onSearchTextChange(e.target.value)}
                             onKeyDown={(e) => {
                                 e.stopPropagation()
+                                if (e.key === 'Enter') {
+                                    e.preventDefault()
+                                    onEnter?.()
+                                }
                             }}
                             aria-label={
                                 searchPlaceholder

package/lib/components/MenuV2/MenuV2SubMenu.tsx

@@ -14,6 +14,7 @@ import {
     getMenuItemDescriptionColor,
     filterMenuV2Item,
     getItemSlots,
+    defaultSearchSortFn,
 } from './menuV2.utils'
 import { menuV2SubmenuContentAnimations } from './menuV2.animations'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
@@ -64,12 +65,15 @@ const MenuV2SubMenu = ({ item, index, maxHeight }: MenuV2SubMenuProps) => {
 
         const lower = searchText.toLowerCase()
 
-        return item.subMenu.reduce<MenuV2ItemType[]>((acc, sub) => {
+        const matched = item.subMenu.reduce<MenuV2ItemType[]>((acc, sub) => {
             const result = filterMenuV2Item(sub, lower)
             if (result) acc.push(result)
             return acc
         }, [])
-    }, [item.subMenu, searchText])
+
+        const sortFn = item.subMenuSearchSortFn ?? defaultSearchSortFn
+        return sortFn(matched, searchText)
+    }, [item.subMenu, searchText, item.subMenuSearchSortFn])
 
     const {
         bgDefault,
@@ -262,6 +266,16 @@ const MenuV2SubMenu = ({ item, index, maxHeight }: MenuV2SubMenuProps) => {
                                 }
                                 value={searchText}
                                 onChange={(e) => setSearchText(e.target.value)}
+                                onKeyDown={(e) => {
+                                    e.stopPropagation()
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault()
+                                        item.onSubMenuSearchEnter?.(
+                                            searchText,
+                                            filteredSubMenuItems
+                                        )
+                                    }
+                                }}
                                 aria-label="Search submenu"
                             />
                         </Block>

package/lib/components/MenuV2/menuV2.types.ts

@@ -38,6 +38,10 @@ export type MenuV2ItemLabel = {
     text: string
     leftSlot?: React.ReactElement
 }
+export type MenuV2SearchSortFn = (
+    items: MenuV2ItemType[],
+    searchText: string
+) => MenuV2ItemType[]
 export type MenuV2ItemType = {
     id?: string
     label: MenuV2ItemLabel
@@ -49,6 +53,11 @@ export type MenuV2ItemType = {
     subMenu?: MenuV2ItemType[]
     enableSubMenuSearch?: boolean
     subMenuSearchPlaceholder?: string
+    subMenuSearchSortFn?: MenuV2SearchSortFn
+    onSubMenuSearchEnter?: (
+        searchText: string,
+        filteredResults: MenuV2ItemType[]
+    ) => void
     tooltip?: string | ReactNode
     tooltipProps?: MenuV2ItemTooltipProps
 }
@@ -82,6 +91,8 @@ export type MenuV2Props = {
     dimensions?: MenuV2Dimensions
     enableSearch?: boolean
     searchPlaceholder?: string
+    searchSortFn?: MenuV2SearchSortFn
+    onEnter?: (searchText: string, filteredGroups: MenuV2GroupType[]) => void
     enableVirtualScrolling?: boolean
     virtualScrolling?: MenuV2VirtualScrollingConfig
     open?: boolean

package/lib/components/MenuV2/menuV2.utils.ts

@@ -1,5 +1,9 @@
 import type { ReactNode } from 'react'
-import type { MenuV2GroupType, MenuV2ItemType } from './menuV2.types'
+import type {
+    MenuV2GroupType,
+    MenuV2ItemType,
+    MenuV2SearchSortFn,
+} from './menuV2.types'
 import type { MenuV2TokensType } from './menuV2.tokens'
 
 import { MenuV2ItemActionType, MenuV2ItemVariant } from './menuV2.types'
@@ -11,6 +15,43 @@ export const getItemSlots = (item: MenuV2ItemType): [ReactNode?] => {
     return [item.label.leftSlot]
 }
 
+export enum MenuV2MatchRank {
+    EXACT = 0,
+    PREFIX = 1,
+    SUBSTRING = 2,
+    NONE = 3,
+}
+
+const getFieldMatchRank = (
+    fieldValue: string | undefined,
+    lower: string
+): MenuV2MatchRank => {
+    if (!fieldValue) return MenuV2MatchRank.NONE
+    const value = fieldValue.toLowerCase()
+    if (value === lower) return MenuV2MatchRank.EXACT
+    if (value.startsWith(lower)) return MenuV2MatchRank.PREFIX
+    if (value.includes(lower)) return MenuV2MatchRank.SUBSTRING
+    return MenuV2MatchRank.NONE
+}
+
+export const getItemMatchRank = (
+    item: MenuV2ItemType,
+    lower: string
+): MenuV2MatchRank => {
+    return Math.min(
+        getFieldMatchRank(item.label.text, lower),
+        getFieldMatchRank(item.subLabel, lower)
+    ) as MenuV2MatchRank
+}
+
+export const defaultSearchSortFn: MenuV2SearchSortFn = (items, searchText) => {
+    if (!searchText.trim()) return items
+    const lower = searchText.toLowerCase()
+    return [...items].sort(
+        (a, b) => getItemMatchRank(a, lower) - getItemMatchRank(b, lower)
+    )
+}
+
 export const filterMenuV2Item = (
     item: MenuV2ItemType,
     lower: string
@@ -140,7 +181,8 @@ export const flattenMenuV2Groups = (
 
 export const filterMenuV2Groups = (
     groups: MenuV2GroupType[],
-    searchText: string
+    searchText: string,
+    searchSortFn: MenuV2SearchSortFn = defaultSearchSortFn
 ): MenuV2GroupType[] => {
     if (!searchText) return groups
     const lower = searchText.toLowerCase()
@@ -150,7 +192,7 @@ export const filterMenuV2Groups = (
                 .map((item) => filterMenuV2Item(item, lower))
                 .filter(Boolean) as MenuV2ItemType[]
             if (filteredItems.length === 0) return null
-            return { ...group, items: filteredItems }
+            return { ...group, items: searchSortFn(filteredItems, searchText) }
         })
         .filter(Boolean) as MenuV2GroupType[]
 }

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

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/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 && (

package/lib/components/MultiSelectV2/MultiSelectV2Menu.tsx

@@ -69,6 +69,10 @@ const ScrollableContent = styled(Block)(() => ({
     },
 }))
 
+const MenuFooter = styled(Block)`
+    flex-shrink: 0;
+`
+
 const MultiSelectV2Menu = ({
     items,
     selected,
@@ -104,6 +108,7 @@ const MultiSelectV2Menu = ({
     allowCustomValue = false,
     customValueLabel = 'Specify',
     menuId,
+    menuFooter,
 }: MultiSelectV2MenuProps) => {
     const multiSelectTokens =
         useResponsiveTokens<MultiSelectV2TokensType>('MULTI_SELECT_V2')
@@ -467,6 +472,9 @@ const MultiSelectV2Menu = ({
                                     onClose={() => handleOpenChange(false)}
                                 />
                             )}
+                            {menuFooter && (
+                                <MenuFooter>{menuFooter}</MenuFooter>
+                            )}
                         </>
                     )}
                 </Content>

package/lib/components/MultiSelectV2/multiSelectV2.types.ts

@@ -97,6 +97,7 @@ export type MultiSelectV2MenuProps = {
     allowCustomValue?: boolean
     customValueLabel?: string
     menuId?: string
+    menuFooter?: ReactNode
 }
 
 export type MultiSelectV2MenuRootProps = SelectV2MenuRootPropsBase & {
@@ -170,4 +171,5 @@ export type MultiSelectV2Props = Omit<
     showClearButton?: boolean
     onClearAllClick?: () => void
     multiSelectGroupPosition?: 'center' | 'left' | 'right'
+    menuFooter?: ReactNode
 }

package/lib/components/SingleSelect/SingleSelect.tsx

@@ -104,6 +104,7 @@ const SingleSelect = ({
     customValueLabel = 'Specify',
     singleSelectGroupPosition,
     allowDeselect = false,
+    menuFooter,
     ...rest
 }: SingleSelectProps) => {
     const { onFocus, onBlur, ...buttonRest } = rest
@@ -298,6 +299,7 @@ const SingleSelect = ({
                         allowCustomValue={allowCustomValue}
                         customValueLabel={customValueLabel}
                         menuId={menuId}
+                        menuFooter={menuFooter}
                         trigger={
                             customTrigger || (
                                 <PrimitiveButton