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

package/lib/components/DataTable/TableCell/types.ts

@@ -15,6 +15,7 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     hasCustomBackground?: boolean
     onFieldChange: (value: unknown) => void
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown
+    dateLabel?: string
     'data-row-index'?: number
     'data-col-index'?: number
     tabIndex?: number

package/lib/components/DataTable/columnTypes.ts

@@ -1,4 +1,4 @@
-import { FilterType, ColumnType } from './types'
+import { FilterType, ColumnType, DateFormat } from './types'
 
 export type ColumnFilterOption = {
     id: string
@@ -45,13 +45,15 @@ export type MultiSelectData = {
 
 export type DateData = {
     date: Date | string
-    format?: string
+    format?: DateFormat
+    dateLabel?: string
 }
 
 export type DateRangeData = {
     startDate: Date | string
     endDate: Date | string
-    format?: string
+    format?: DateFormat
+    dateLabel?: string
 }
 
 export type ColumnDataTypeMap = {

package/lib/components/DataTable/dataTable.tokens.ts

@@ -198,6 +198,11 @@ export type TableTokenType = BasicCSSProps & {
                     color: CSSObject['color']
                     fontSize: CSSObject['fontSize']
                     borderTop: CSSObject['borderTop']
+
+                    dateLabel: {
+                        fontSize: CSSObject['fontSize']
+                        color: CSSObject['color']
+                    }
                     expandable: {
                         padding: CSSObject['padding']
                         borderTop: CSSObject['borderTop']
@@ -467,6 +472,11 @@ export const getTableToken = (
                             fontSize:
                                 foundationToken.font.size.body.md.fontSize,
                             borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
+                            dateLabel: {
+                                fontSize:
+                                    foundationToken.font.size.body.xs.fontSize,
+                                color: foundationToken.colors.gray[400],
+                            },
                             expandable: {
                                 padding: foundationToken.unit[16],
                                 borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
@@ -732,6 +742,11 @@ export const getTableToken = (
                             fontSize:
                                 foundationToken.font.size.body.md.fontSize,
                             borderTop: `1px solid ${foundationToken.colors.gray[150]}`,
+                            dateLabel: {
+                                fontSize:
+                                    foundationToken.font.size.body.xs.fontSize,
+                                color: foundationToken.colors.gray[400],
+                            },
                             expandable: {
                                 padding: foundationToken.unit[16],
                                 borderTop: `1px solid ${foundationToken.colors.gray[150]}`,

package/lib/components/DataTable/types.ts

@@ -88,10 +88,30 @@ export type DropdownColumnProps = {
     onSelect?: (value: unknown) => void
 }
 
+/**
+ * Format string for date display in DataTable DATE columns.
+ * @example 'DD MMM YYYY'           → "24 Jun 2026"
+ * @example 'DD/MM/YYYY'            → "24/06/2026"
+ * @example 'DD MMM YYYY, hh:mm A'  → "24 Jun 2026, 10:30 AM"
+ */
+
+export type DateFormat =
+    | 'DD MMM YYYY'
+    | 'DD/MM/YYYY'
+    | 'MM/DD/YYYY'
+    | 'YYYY-MM-DD'
+    | 'DD MMM YYYY, hh:mm A'
+    | 'DD MMM YYYY, HH:mm'
+    | 'MMM DD, YYYY'
+    | 'YYYY/MM/DD HH:mm'
+    | 'HH:mm:ss'
+    | (string & {})
+
 export type DateColumnProps = {
     date: Date | string
-    format?: string
+    format?: DateFormat
     showTime?: boolean
+    dateLabel?: string
 }
 
 export type SliderColumnProps = {
@@ -253,8 +273,13 @@ export type ColumnDefinition<T> =
               row: T,
               index: number
           ) => ReactNode
-          dateFormat?: string
+          dateFormat?: DateFormat
           showTime?: boolean
+          /**
+           * Optional label appended after the formatted date, e.g. "(IST)".
+           * Column-level value can be overridden per-cell via DateColumnProps.dateLabel.
+           */
+          dateLabel?: string
       })
     | (BaseColumnDefinition<T> & {
           type: ColumnType.SLIDER
@@ -457,6 +482,12 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     // Mobile configuration
     mobileColumnsToShow?: number
 
+    /**
+     * Optional label appended after formatted dates in DATE columns,
+     * e.g. "(IST)". Can be overridden per-column or per-cell.
+     */
+    dateLabel?: string
+
     // Internal pivot modal configuration
     enablePivotTable?: boolean
     pivotTableConfig?: {

package/lib/components/DataTable/utils.ts

@@ -7,6 +7,7 @@ import {
     ColumnDefinition,
     ColumnType,
     PivotAggregationType,
+    DateFormat,
 } from './types'
 import {
     validateColumnData,
@@ -904,6 +905,91 @@ export const formatDate = (dateString: string): string => {
     }).format(date)
 }
 
+/**
+ * Token map for the lightweight format-string parser. Supports the common
+ * dashboard tokens; anything else is passed through literally.
+ *
+ *   YYYY  -> 4-digit year          YY   -> 2-digit year
+ *   MM    -> 2-digit month         MMM  -> short month name (Jan)
+ *   DD    -> 2-digit day           dd   -> 2-digit day (alias)
+ *   HH    -> 24h hour (2-digit)    hh   -> 12h hour (2-digit)
+ *   mm    -> minutes (2-digit)     ss   -> seconds (2-digit)
+ *   A     -> AM/PM                 a    -> am/pm
+ */
+const FORMAT_TOKEN_PATTERN = /YYYY|YY|MMM|MM|dd|DD|HH|hh|mm|ss|A|a/g
+
+const pad2 = (n: number): string => String(n).padStart(2, '0')
+
+// Format a Date using a format string like "DD MMM YYYY, hh:mm A"
+export const formatDateString = (date: Date, format: string): string => {
+    if (isNaN(date.getTime())) return '-'
+
+    const parts = new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    }).formatToParts(date)
+
+    const lookup: Record<string, string> = {}
+    for (const p of parts) {
+        if (p.type !== 'literal') lookup[p.type] = p.value
+    }
+
+    const year = lookup.year ?? ''
+    const monthNum = lookup.month ?? ''
+    const day = lookup.day ?? ''
+    const hour24 = lookup.hour ?? ''
+    const minute = lookup.minute ?? ''
+    const second = lookup.second ?? ''
+
+    // Short month name via a separate formatter (month: 'short' gives 'Jan' etc.)
+    const shortMonth = new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+    }).format(date)
+
+    // Normalize the 24-hour value: some browsers/locales return "24" for
+    // midnight instead of "00". Convert 24 -> 0 so HH always prints 00.
+    const hourNumRaw = parseInt(hour24, 10)
+    const hourNum = hourNumRaw === 24 ? 0 : hourNumRaw
+    const hour12 = (hourNum % 12 || 12).toString()
+    const ampm = hourNum < 12 ? 'AM' : 'PM'
+
+    FORMAT_TOKEN_PATTERN.lastIndex = 0
+    return format.replace(FORMAT_TOKEN_PATTERN, (token) => {
+        switch (token) {
+            case 'YYYY':
+                return year
+            case 'YY':
+                return year.slice(-2)
+            case 'MMM':
+                return shortMonth
+            case 'MM':
+                return monthNum
+            case 'DD':
+            case 'dd':
+                return day
+            case 'HH':
+                return pad2(hourNum)
+            case 'hh':
+                return pad2(parseInt(hour12, 10))
+            case 'mm':
+                return minute
+            case 'ss':
+                return second
+            case 'A':
+                return ampm
+            case 'a':
+                return ampm.toLowerCase()
+            default:
+                return token
+        }
+    })
+}
+
 export const updateColumnFilter = (
     currentFilters: ColumnFilter[],
     field: keyof Record<string, unknown>,
@@ -994,7 +1080,7 @@ const getExportValue = <T extends Record<string, unknown>>(
             ) {
                 const dateData = value as {
                     date: Date | string
-                    format?: string
+                    format?: DateFormat
                     showTime?: boolean
                 }
                 const date = new Date(dateData.date)
@@ -1267,7 +1353,7 @@ export const createMultiSelectData = (
 
 export const createDateData = (
     date: Date | string,
-    format?: string
+    format?: DateFormat
 ): DateData => ({
     date,
     format,
@@ -1276,7 +1362,7 @@ export const createDateData = (
 export const createDateRangeData = (
     startDate: Date | string,
     endDate: Date | string,
-    format?: string
+    format?: DateFormat
 ): DateRangeData => ({
     startDate,
     endDate,
@@ -1317,9 +1403,9 @@ const getExpectedTypeDescription = (columnType: ColumnType): string => {
         case ColumnType.MULTISELECT:
             return 'MultiSelectData { values: string[], labels?: string[] } or string[]'
         case ColumnType.DATE:
-            return 'DateData { date: Date | string, format?: string } or Date or string'
+            return 'DateData { date: Date | string, format?: DateFormat } or Date or string'
         case ColumnType.DATE_RANGE:
-            return 'DateRangeData { startDate: Date | string, endDate: Date | string, format?: string }'
+            return 'DateRangeData { startDate: Date | string, endDate: Date | string, format?: DateFormat }'
         case ColumnType.TEXT:
             return 'string or number'
         case ColumnType.NUMBER:

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