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

package/lib/components/Menu/types.tsx

@@ -21,6 +21,11 @@ export type MenuSkeletonProps = {
     variant?: SkeletonVariant
 }
 
+export type MenuSearchSortFn = (
+    items: MenuItemType[],
+    searchText: string
+) => MenuItemType[]
+
 export type MenuProps = {
     trigger: React.ReactNode
     items?: MenuGroupType[]
@@ -32,6 +37,8 @@ export type MenuProps = {
 
     enableSearch?: boolean
     searchPlaceholder?: string
+    searchSortFn?: MenuSearchSortFn
+    onEnter?: (searchText: string, filteredGroups: MenuGroupType[]) => void
     enableVirtualScrolling?: boolean
     virtualItemHeight?: number | ((item: MenuItemType, index: number) => number)
     virtualOverscan?: number
@@ -79,6 +86,13 @@ export type MenuItemType = {
     subMenu?: MenuItemType[]
     enableSubMenuSearch?: boolean
     subMenuSearchPlaceholder?: string
+    /** Custom sort function for submenu search results. Defaults to exact → prefix → substring. */
+    subMenuSearchSortFn?: MenuSearchSortFn
+    /** Called when the user presses Enter while focused on the submenu search input. */
+    onSubMenuSearchEnter?: (
+        searchText: string,
+        filteredResults: MenuItemType[]
+    ) => void
     tooltip?: string | React.ReactNode
     tooltipProps?: {
         side?: TooltipSide

package/lib/components/Menu/utils.ts

@@ -1,9 +1,52 @@
-import { MenuGroupType, type MenuItemType } from './types'
+import {
+    MenuGroupType,
+    type MenuItemType,
+    type MenuSearchSortFn,
+} from './types'
+
+export enum MenuMatchRank {
+    EXACT = 0,
+    PREFIX = 1,
+    SUBSTRING = 2,
+    NONE = 3,
+}
+
+const getFieldMatchRank = (
+    fieldValue: string | undefined,
+    lower: string
+): MenuMatchRank => {
+    if (!fieldValue) return MenuMatchRank.NONE
+    const value = fieldValue.toLowerCase()
+    if (value === lower) return MenuMatchRank.EXACT
+    if (value.startsWith(lower)) return MenuMatchRank.PREFIX
+    if (value.includes(lower)) return MenuMatchRank.SUBSTRING
+    return MenuMatchRank.NONE
+}
+
+export const getItemMatchRank = (
+    item: MenuItemType,
+    lower: string
+): MenuMatchRank => {
+    return Math.min(
+        getFieldMatchRank(item.label, lower),
+        getFieldMatchRank(item.subLabel, lower)
+    ) as MenuMatchRank
+}
+
+export const defaultSearchSortFn: MenuSearchSortFn = (items, searchText) => {
+    if (!searchText.trim()) return items
+    const lower = searchText.toLowerCase()
+    return items
+        .map((item) => ({ item, rank: getItemMatchRank(item, lower) }))
+        .sort((a, b) => a.rank - b.rank)
+        .map((x) => x.item)
+}
 
 // Utility: Recursively filter menu items and groups by search text
 export const filterMenuGroups = (
     groups: MenuGroupType[],
-    searchText: string
+    searchText: string,
+    searchSortFn: MenuSearchSortFn = defaultSearchSortFn
 ): MenuGroupType[] => {
     if (!searchText) return groups
     const lower = searchText.toLowerCase()
@@ -17,7 +60,7 @@ export const filterMenuGroups = (
                 .map((item: MenuItemType) => filterMenuItem(item, lower))
                 .filter(Boolean) as MenuItemType[]
             if (filteredItems.length === 0) return null
-            return { ...group, items: filteredItems }
+            return { ...group, items: searchSortFn(filteredItems, searchText) }
         })
         .filter(Boolean) as MenuGroupType[]
 }

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/Modal/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ModalV2 instead. */
 export { default as Modal } from './Modal'
 export * from './modal.tokens'
 export * from './types'

package/lib/components/ModalV2/ModalV2.tsx

@@ -0,0 +1,269 @@
+import { forwardRef, useCallback } from 'react'
+import { ModalV2Props } from './modalV2.types'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import type { ModalV2TokensType } from './modalV2.tokens.types'
+import { useBreakpoints } from '../../hooks/useBreakPoints'
+import { useModal } from '../Modal/useModal'
+import { useId } from 'react'
+import Block from '../Primitives/Block/Block'
+import MobileModalV2 from './mobileModalV2'
+import styled from 'styled-components'
+import { modalBackdropAnimationsV2 } from './modalAnimationV2'
+import { modalContentAnimationsV2 } from './modalAnimationV2'
+import ModalV2Header from './ModalV2Header'
+import ModalV2Skeleton from './ModalV2Skeleton'
+import ModalV2Footer from './ModalV2Footer'
+import { createPortal } from 'react-dom'
+import { filterBlockedProps } from '../../utils/prop-helpers'
+
+const AnimatedBackdrop = styled(Block)<{ $isAnimatingIn: boolean }>`
+    ${({ $isAnimatingIn }) => modalBackdropAnimationsV2($isAnimatingIn)}
+`
+
+const AnimatedModalContent = styled(Block)<{ $isAnimatingIn: boolean }>`
+    ${({ $isAnimatingIn }) => modalContentAnimationsV2($isAnimatingIn)}
+`
+
+const ModalV2 = forwardRef<HTMLDivElement, ModalV2Props>(
+    (
+        {
+            isOpen,
+            isCustom = false,
+            onClose,
+            title,
+            subtitle,
+            children,
+            primaryAction,
+            secondaryAction,
+            showCloseButton = true,
+            showHeader = true,
+            showFooter = true,
+            closeOnBackdropClick = true,
+            customHeader,
+            customFooter,
+            headerSlot,
+            showDivider = true,
+            dimensions = {},
+            useDrawerOnMobile = true,
+            skeleton,
+            ...props
+        },
+        ref
+    ) => {
+        const filteredRest = filterBlockedProps(props)
+        const {
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledBy,
+            'aria-describedby': ariaDescribedBy,
+            ...dialogProps
+        } = filteredRest
+        const modalTokens = useResponsiveTokens<ModalV2TokensType>('MODALV2')
+        const { innerWidth } = useBreakpoints()
+        const isMobile = innerWidth < 1024
+        const { shouldRender, isAnimatingIn, portalContainer } = useModal(
+            isOpen,
+            onClose
+        )
+
+        const baseId = useId()
+        const shouldUseGeneratedHeader = showHeader && !customHeader
+        const titleId =
+            shouldUseGeneratedHeader && title ? `${baseId}-title` : undefined
+        const subtitleId =
+            shouldUseGeneratedHeader && subtitle
+                ? `${baseId}-subtitle`
+                : undefined
+
+        const handleBackdropClick = useCallback(() => {
+            if (closeOnBackdropClick) {
+                onClose()
+            }
+        }, [closeOnBackdropClick, onClose])
+
+        if (!shouldRender || !portalContainer) return null
+
+        const shouldShowSkeleton = skeleton?.show
+        const skeletonVariant = skeleton?.variant || 'pulse'
+        const shouldShowBodySkeleton = Boolean(
+            shouldShowSkeleton && skeleton?.bodySkeletonProps?.show
+        )
+        const hasFooterContent = Boolean(
+            customFooter ||
+            primaryAction ||
+            secondaryAction ||
+            shouldShowSkeleton
+        )
+        const {
+            width,
+            height,
+            minWidth = '',
+            minHeight = '',
+            maxWidth = '90vw',
+            maxHeight = '90vh',
+        } = dimensions
+
+        const modalContent = (() => {
+            if (isMobile && useDrawerOnMobile) {
+                return (
+                    <MobileModalV2
+                        isOpen={isOpen}
+                        onClose={onClose}
+                        skeleton={skeleton}
+                        title={title}
+                        subtitle={subtitle}
+                        primaryAction={primaryAction}
+                        secondaryAction={secondaryAction}
+                        showCloseButton={showCloseButton}
+                        showHeader={showHeader}
+                        showFooter={showFooter}
+                        closeOnBackdropClick={closeOnBackdropClick}
+                        customHeader={customHeader}
+                        customFooter={customFooter}
+                        headerSlot={headerSlot}
+                        showDivider={showDivider}
+                        ref={ref}
+                        {...filteredRest}
+                    >
+                        {children}
+                    </MobileModalV2>
+                )
+            }
+
+            return (
+                <Block
+                    position="fixed"
+                    inset={0}
+                    zIndex={99}
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    boxShadow={modalTokens.boxShadow}
+                    paddingTop={modalTokens.paddingTop}
+                    paddingRight={modalTokens.paddingRight}
+                    paddingBottom={modalTokens.paddingBottom}
+                    paddingLeft={modalTokens.paddingLeft}
+                >
+                    <AnimatedBackdrop
+                        onClick={handleBackdropClick}
+                        position="absolute"
+                        inset={0}
+                        backgroundColor={modalTokens.overlay.backgroundColor}
+                        pointerEvents="auto"
+                        role="presentation"
+                        aria-hidden="true"
+                        zIndex={0}
+                        $isAnimatingIn={isAnimatingIn}
+                    />
+
+                    <AnimatedModalContent
+                        {...dialogProps}
+                        data-modal={title ?? 'modal'}
+                        ref={ref}
+                        display="flex"
+                        flexDirection="column"
+                        position="relative"
+                        backgroundColor={modalTokens.backgroundColor}
+                        width={width}
+                        height={height}
+                        minWidth={minWidth}
+                        minHeight={minHeight}
+                        maxWidth={maxWidth}
+                        maxHeight={maxHeight}
+                        borderRadius={modalTokens.borderRadius}
+                        boxShadow={modalTokens.boxShadow}
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby={
+                            ariaLabel ? undefined : (ariaLabelledBy ?? titleId)
+                        }
+                        aria-label={
+                            ariaLabel ??
+                            (ariaLabelledBy || titleId
+                                ? undefined
+                                : title || 'Modal dialog')
+                        }
+                        aria-describedby={ariaDescribedBy ?? subtitleId}
+                        zIndex={1}
+                        pointerEvents="auto"
+                        $isAnimatingIn={isAnimatingIn}
+                    >
+                        {showHeader &&
+                            (customHeader ?? (
+                                <ModalV2Header
+                                    title={title}
+                                    subtitle={subtitle}
+                                    onClose={onClose}
+                                    showCloseButton={showCloseButton}
+                                    headerSlot={headerSlot}
+                                    showDivider={showDivider}
+                                    showSkeleton={shouldShowSkeleton}
+                                    skeletonVariant={skeletonVariant}
+                                    titleId={titleId}
+                                    subtitleId={subtitleId}
+                                />
+                            ))}
+
+                        <Block
+                            data-element="body"
+                            paddingTop={
+                                isCustom ? '0' : modalTokens.body.paddingTop
+                            }
+                            paddingRight={
+                                isCustom ? '0' : modalTokens.body.paddingRight
+                            }
+                            paddingBottom={
+                                isCustom ? '0' : modalTokens.body.paddingBottom
+                            }
+                            paddingLeft={
+                                isCustom ? '0' : modalTokens.body.paddingLeft
+                            }
+                            overflow="auto"
+                            flexShrink={1}
+                            minHeight={0}
+                            borderRadius={
+                                !showFooter || !hasFooterContent
+                                    ? `0 0 ${modalTokens.borderRadius} ${modalTokens.borderRadius}`
+                                    : undefined
+                            }
+                        >
+                            {shouldShowBodySkeleton ? (
+                                <ModalV2Skeleton
+                                    modalTokens={modalTokens}
+                                    bodySkeleton={{
+                                        show: true,
+                                        width:
+                                            skeleton?.bodySkeletonProps
+                                                ?.width || '100%',
+                                        height:
+                                            skeleton?.bodySkeletonProps
+                                                ?.height || 300,
+                                    }}
+                                    skeletonVariant={skeletonVariant}
+                                />
+                            ) : (
+                                children
+                            )}
+                        </Block>
+
+                        {showFooter &&
+                            (customFooter ?? (
+                                <ModalV2Footer
+                                    primaryAction={primaryAction}
+                                    secondaryAction={secondaryAction}
+                                    showDivider={showDivider}
+                                    showSkeleton={shouldShowSkeleton}
+                                    skeletonVariant={skeletonVariant}
+                                />
+                            ))}
+                    </AnimatedModalContent>
+                </Block>
+            )
+        })()
+
+        return createPortal(modalContent, portalContainer)
+    }
+)
+
+ModalV2.displayName = 'ModalV2'
+
+export default ModalV2

package/lib/components/ModalV2/ModalV2Footer.tsx

@@ -0,0 +1,76 @@
+import Block from '../Primitives/Block/Block'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { ButtonV2, ButtonV2Type } from '../ButtonV2'
+import type { ModalV2TokensType } from './modalV2.tokens.types'
+import { ModalV2Props } from './modalV2.types'
+import { SkeletonVariant } from '../Skeleton'
+import ModalV2Skeleton from './ModalV2Skeleton'
+
+const ModalV2Footer = ({
+    primaryAction,
+    secondaryAction,
+    showDivider,
+    showSkeleton,
+    skeletonVariant,
+}: {
+    primaryAction?: ModalV2Props['primaryAction']
+    secondaryAction?: ModalV2Props['secondaryAction']
+    showDivider?: boolean
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+}) => {
+    const modalTokens = useResponsiveTokens<ModalV2TokensType>('MODALV2')
+
+    if (showSkeleton) {
+        return (
+            <ModalV2Skeleton
+                modalTokens={modalTokens}
+                footerSkeleton={{
+                    show: showSkeleton || false,
+                    showDivider: showDivider || false,
+                }}
+                skeletonVariant={
+                    skeletonVariant || ('pulse' as SkeletonVariant)
+                }
+            />
+        )
+    }
+
+    if (!primaryAction && !secondaryAction) return null
+
+    return (
+        <Block
+            data-element="footer"
+            display="flex"
+            backgroundColor={modalTokens.footer.backgroundColor}
+            justifyContent="flex-end"
+            gap={modalTokens.footer.gap}
+            paddingTop={modalTokens.footer.paddingTop}
+            paddingRight={modalTokens.footer.paddingRight}
+            paddingBottom={modalTokens.footer.paddingBottom}
+            paddingLeft={modalTokens.footer.paddingLeft}
+            flexShrink={0}
+            borderTop={showDivider ? modalTokens.footer.borderTop : undefined}
+            borderRadius={`0 0 ${modalTokens.borderRadius} ${modalTokens.borderRadius}`}
+        >
+            {secondaryAction && (
+                <ButtonV2
+                    {...secondaryAction}
+                    buttonType={
+                        secondaryAction.buttonType || ButtonV2Type.SECONDARY
+                    }
+                />
+            )}
+            {primaryAction && (
+                <ButtonV2
+                    {...primaryAction}
+                    buttonType={
+                        primaryAction.buttonType || ButtonV2Type.PRIMARY
+                    }
+                />
+            )}
+        </Block>
+    )
+}
+
+export default ModalV2Footer