@juspay/blend-design-system 0.0.37-beta.8 → 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/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

package/lib/components/ModalV2/ModalV2Header.tsx

@@ -0,0 +1,144 @@
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import type { ReactNode } from 'react'
+import { SkeletonVariant } from '../Skeleton'
+import type { ModalV2TokensType } from './modalV2.tokens.types'
+import ModalV2Skeleton from './ModalV2Skeleton'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import { ButtonV2, ButtonV2Type, ButtonV2SubType } from '../ButtonV2'
+import { XIcon } from '@phosphor-icons/react'
+
+const formatLineHeight = (value: string | number | undefined) =>
+    typeof value === 'number' ? `${value}px` : value
+
+const ModalV2Header = ({
+    title,
+    subtitle,
+    onClose,
+    showCloseButton,
+    headerSlot,
+    showDivider,
+    showSkeleton,
+    skeletonVariant,
+    titleId,
+    subtitleId,
+}: {
+    title?: string
+    subtitle?: string
+    onClose: () => void
+    showCloseButton?: boolean
+    headerSlot?: ReactNode
+    showDivider?: boolean
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+    titleId?: string
+    subtitleId?: string
+}) => {
+    const modalTokens = useResponsiveTokens<ModalV2TokensType>('MODALV2')
+
+    if (showSkeleton) {
+        return (
+            <ModalV2Skeleton
+                modalTokens={modalTokens}
+                headerSkeleton={{
+                    show: showSkeleton || false,
+                    showDivider: showDivider || false,
+                    showCloseButton: showCloseButton || false,
+                }}
+                skeletonVariant={
+                    skeletonVariant || ('pulse' as SkeletonVariant)
+                }
+            />
+        )
+    }
+
+    if (!title && !subtitle && !headerSlot && !showCloseButton) return null
+
+    return (
+        <Block
+            display="flex"
+            justifyContent="space-between"
+            alignItems="flex-start"
+            paddingTop={modalTokens.header.paddingTop}
+            paddingRight={modalTokens.header.paddingRight}
+            paddingBottom={modalTokens.header.paddingBottom}
+            paddingLeft={modalTokens.header.paddingLeft}
+            flexShrink={0}
+            overflow="auto"
+            maxHeight={modalTokens.header.maxHeight}
+            gap={modalTokens.header.gap}
+            backgroundColor={modalTokens.header.backgroundColor}
+            borderTopLeftRadius={modalTokens.header.borderTopLeftRadius}
+            borderTopRightRadius={modalTokens.header.borderTopRightRadius}
+            borderBottom={
+                showDivider ? modalTokens.header.borderBottom : undefined
+            }
+        >
+            <Block display="flex" flexDirection="column">
+                <Block
+                    display="flex"
+                    flexDirection="row"
+                    gap={modalTokens.header.slot.gap}
+                    alignItems="center"
+                >
+                    {title && (
+                        <Text
+                            id={titleId}
+                            data-element="header"
+                            data-id={title ?? ''}
+                            as="span"
+                            fontSize={modalTokens.header.text.title.fontSize}
+                            fontWeight={
+                                modalTokens.header.text.title.fontWeight
+                            }
+                            lineHeight={formatLineHeight(
+                                modalTokens.header.text.title.lineHeight
+                            )}
+                            color={modalTokens.header.text.title.color}
+                        >
+                            {title}
+                        </Text>
+                    )}
+                    {headerSlot}
+                </Block>
+
+                {subtitle && (
+                    <Text
+                        id={subtitleId}
+                        data-element="header-subtitle"
+                        data-id={subtitle}
+                        as="span"
+                        fontSize={modalTokens.header.text.subtitle.fontSize}
+                        color={modalTokens.header.text.subtitle.color}
+                        fontWeight={modalTokens.header.text.subtitle.fontWeight}
+                        lineHeight={formatLineHeight(
+                            modalTokens.header.text.subtitle.lineHeight
+                        )}
+                    >
+                        {subtitle}
+                    </Text>
+                )}
+            </Block>
+            {showCloseButton && (
+                <ButtonV2
+                    subType={ButtonV2SubType.INLINE}
+                    buttonType={ButtonV2Type.SECONDARY}
+                    leftSlot={{
+                        slot: (
+                            <XIcon
+                                size={modalTokens.closeButton.width}
+                                color={modalTokens.closeButton.color}
+                                aria-hidden="true"
+                            />
+                        ),
+                        maxHeight: modalTokens.closeButton.height,
+                    }}
+                    onClick={onClose}
+                    aria-label="Close modal"
+                />
+            )}
+        </Block>
+    )
+}
+
+export default ModalV2Header

package/lib/components/ModalV2/ModalV2Skeleton.tsx

@@ -0,0 +1,80 @@
+import Block from '../Primitives/Block/Block'
+import { Skeleton } from '../Skeleton'
+import type { FC } from 'react'
+import type { ModalV2SkeletonProps } from './modalV2.types'
+
+const ModalV2Skeleton: FC<ModalV2SkeletonProps> = ({
+    modalTokens,
+    headerSkeleton,
+    bodySkeleton,
+    footerSkeleton,
+
+    skeletonVariant,
+}) => {
+    const {
+        show: showHeaderSkeleton = false,
+        showDivider: showHeaderDivider = false,
+    } = headerSkeleton || {}
+    const { show: showBodySkeleton = false, width, height } = bodySkeleton || {}
+    const { show: showFooterSkeleton = false } = footerSkeleton || {}
+
+    if (showHeaderSkeleton) {
+        return (
+            <Block
+                display="flex"
+                justifyContent="space-between"
+                alignItems="flex-start"
+                paddingTop={modalTokens.skeleton.header.paddingTop}
+                paddingRight={modalTokens.skeleton.header.paddingRight}
+                paddingBottom={modalTokens.skeleton.header.paddingBottom}
+                paddingLeft={modalTokens.skeleton.header.paddingLeft}
+                flexShrink={0}
+                gap={modalTokens.skeleton.header.gap}
+                borderBottom={
+                    showHeaderDivider
+                        ? modalTokens.skeleton.header.borderBottom
+                        : undefined
+                }
+            >
+                <Block
+                    display="flex"
+                    flexDirection="column"
+                    flexGrow={1}
+                    gap={modalTokens.skeleton.header.gap}
+                >
+                    <Skeleton
+                        variant={skeletonVariant}
+                        width={modalTokens.skeleton.header.width}
+                        height={modalTokens.skeleton.header.height}
+                        borderRadius={modalTokens.skeleton.header.borderRadius}
+                    />
+                </Block>
+            </Block>
+        )
+    }
+
+    if (showBodySkeleton) {
+        return (
+            <Block
+                display="flex"
+                flexDirection="column"
+                gap={modalTokens.skeleton.body.gap}
+            >
+                <Skeleton
+                    variant={skeletonVariant}
+                    width={width || modalTokens.skeleton.body.width}
+                    height={height || modalTokens.skeleton.body.height}
+                    borderRadius={modalTokens.skeleton.body.borderRadius}
+                />
+            </Block>
+        )
+    }
+
+    if (showFooterSkeleton) {
+        return null
+    }
+
+    return null
+}
+
+export default ModalV2Skeleton

package/lib/components/ModalV2/index.ts

@@ -0,0 +1,4 @@
+export { default as ModalV2 } from './ModalV2'
+export * from './modalV2.tokens'
+export * from './modalV2.tokens.types'
+export * from './modalV2.types'