@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/lib/components/SingleSelectV2/SingleSelectV2Menu.tsx

@@ -0,0 +1,357 @@
+import { useState, useMemo, useRef, useEffect } from 'react'
+import * as RadixMenu from '@radix-ui/react-dropdown-menu'
+import styled from 'styled-components'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import {
+    SingleSelectV2Alignment,
+    SingleSelectV2Side,
+    SingleSelectV2Size,
+    SingleSelectV2Variant,
+    type SingleSelectV2MenuProps,
+} from './singleSelectV2.types'
+import Text from '../Text/Text'
+import Block from '../Primitives/Block/Block'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { usePreventParentScroll, useScrollLock } from '../../hooks'
+import { SingleSelectV2TokensType } from './singleSelectV2.tokens'
+import SingleSelectV2Skeleton from './SingleSelectV2Skeleton'
+import {
+    hasExactMatch as checkExactMatch,
+    getFilteredItemsWithCustomValue,
+} from '../Select/selectUtils'
+import {
+    flattenGroups,
+    filterSingleSelectV2MenuGroups,
+    getVirtualRowEstimate,
+    defaultSingleSelectV2Skeleton,
+    MENU_SCROLL_SELECTORS,
+    DEFAULT_END_REACHED_THRESHOLD,
+} from './utils'
+import { menuContentAnimations } from './singleSelectV2.animations'
+import SingleSelectV2Search from './SingleSelectV2Search'
+import SingleSelectV2List from './SingleSelectV2List'
+import SingleSelectV2VirtualList from './SingleSelectV2VirtualList'
+import { SELECT_V2_MENU_Z_INDEX } from '../SelectV2/selectV2.constants'
+import { useSelectV2MenuBehavior } from '../SelectV2/useSelectV2MenuBehavior'
+import {
+    getBaseVirtualViewportHeight,
+    getAdjustedVirtualViewportHeight,
+} from '../common/virtualViewport'
+
+const Content = styled(RadixMenu.Content)`
+    position: relative;
+    z-index: ${SELECT_V2_MENU_Z_INDEX};
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    scrollbar-color: transparent transparent;
+
+    &[data-state='closed'] {
+        pointer-events: none;
+    }
+
+    ${menuContentAnimations}
+`
+
+const SingleSelectV2Menu = ({
+    items,
+    selected,
+    onSelect,
+    trigger,
+    menuDimensions,
+    search,
+    disabled,
+    menuPosition,
+    collisionBoundary,
+    open,
+    onOpenChange,
+    size = SingleSelectV2Size.MD,
+    variant = SingleSelectV2Variant.CONTAINER,
+    enableVirtualization = false,
+    virtualListItemHeight = 48,
+    virtualListOverscan = 2,
+    onEndReached,
+    endReachedThreshold = DEFAULT_END_REACHED_THRESHOLD,
+    hasMore,
+    loadingComponent,
+    skeleton = defaultSingleSelectV2Skeleton,
+    allowCustomValue = false,
+    customValueLabel = 'Specify',
+    menuId,
+}: SingleSelectV2MenuProps) => {
+    const singleSelectTokens =
+        useResponsiveTokens<SingleSelectV2TokensType>('SINGLE_SELECT_V2')
+
+    const enableSearch = search?.show
+    const searchPlaceholder = search?.placeholder ?? 'Search options...'
+    const maxMenuHeight = menuDimensions?.maxHeight as number | undefined
+    const alignment = menuPosition?.alignment ?? SingleSelectV2Alignment.START
+    const side = menuPosition?.side ?? SingleSelectV2Side.BOTTOM
+    const sideOffset = menuPosition?.sideOffset ?? 8
+    const alignOffset = menuPosition?.alignOffset ?? 0
+
+    const [searchText, setSearchText] = useState('')
+    const searchInputRef = useRef<HTMLInputElement>(null)
+    const searchContainerRef = useRef<HTMLDivElement>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
+    const virtualScrollRef = useRef<HTMLDivElement>(null)
+    const [virtualReady, setVirtualReady] = useState(false)
+
+    usePreventParentScroll(open, contentRef, [...MENU_SCROLL_SELECTORS])
+    useScrollLock(open)
+
+    const hasMatch = useMemo(
+        () => checkExactMatch(searchText, items),
+        [searchText, items]
+    )
+
+    const filteredItems = useMemo(() => {
+        const base = searchText
+            ? filterSingleSelectV2MenuGroups(items, searchText)
+            : items
+        return getFilteredItemsWithCustomValue(
+            base,
+            searchText,
+            hasMatch,
+            allowCustomValue ?? false,
+            enableSearch ?? false,
+            customValueLabel
+        )
+    }, [
+        items,
+        searchText,
+        allowCustomValue,
+        hasMatch,
+        enableSearch,
+        customValueLabel,
+    ])
+
+    const flattenedItems = useMemo(
+        () => flattenGroups(filteredItems),
+        [filteredItems]
+    )
+    const virtualViewportHeight = getBaseVirtualViewportHeight(maxMenuHeight)
+
+    useEffect(() => {
+        if (enableVirtualization && open && virtualScrollRef.current) {
+            setVirtualReady(true)
+            return
+        }
+        if (!open) {
+            setVirtualReady(false)
+        }
+    }, [enableVirtualization, open])
+
+    const virtualizer = useVirtualizer({
+        count: flattenedItems.length,
+        getScrollElement: () => virtualScrollRef.current,
+        getItemKey: (index: number) => flattenedItems[index]?.id ?? index,
+        estimateSize: (index: number) =>
+            getVirtualRowEstimate(flattenedItems, index) ??
+            virtualListItemHeight,
+        overscan: virtualListOverscan,
+        initialRect: {
+            width: 0,
+            height: virtualViewportHeight,
+        },
+        enabled:
+            enableVirtualization && flattenedItems.length > 0 && virtualReady,
+    })
+
+    const { searchHeight } = useSelectV2MenuBehavior({
+        open,
+        enableSearch,
+        searchText,
+        searchInputRef,
+        searchContainerRef,
+        shouldMeasureSearchHeight: true,
+        refocusSearchOnTextChange: true,
+        enableVirtualization,
+        onVirtualizedSearchChange: () => virtualizer.scrollToIndex(0),
+        virtualScrollRef,
+        onEndReached,
+        hasMore,
+        endReachedThreshold,
+    })
+
+    const adjustedVirtualViewportHeight = getAdjustedVirtualViewportHeight(
+        maxMenuHeight,
+        enableSearch ? searchHeight : 0
+    )
+
+    const handleOpenChange = (newOpen: boolean) => {
+        if (disabled && newOpen) return
+        if (newOpen && enableSearch) setSearchText('')
+        onOpenChange(newOpen)
+    }
+
+    const menuContent = singleSelectTokens.menu.content
+    const menuItem = singleSelectTokens.menu.item
+
+    const showEmptyState =
+        items.length === 0 ||
+        (filteredItems.length === 0 && searchText.length > 0)
+    const emptyMessage =
+        items.length === 0 ? 'No items available' : 'No results found'
+
+    const showVirtualList =
+        enableVirtualization &&
+        flattenedItems.length > 0 &&
+        !showEmptyState &&
+        virtualReady
+    const virtualItems = virtualizer.getVirtualItems()
+
+    return (
+        <RadixMenu.Root
+            modal={false}
+            open={open}
+            onOpenChange={handleOpenChange}
+        >
+            <RadixMenu.Trigger asChild disabled={disabled}>
+                {trigger}
+            </RadixMenu.Trigger>
+            <RadixMenu.Portal>
+                <Content
+                    id={menuId}
+                    ref={contentRef}
+                    data-dropdown="dropdown"
+                    align={alignment}
+                    side={side}
+                    sideOffset={sideOffset}
+                    alignOffset={alignOffset}
+                    avoidCollisions
+                    collisionBoundary={collisionBoundary}
+                    style={{
+                        backgroundColor: menuContent.backgroundColor,
+                        border: menuContent.border,
+                        borderRadius: menuContent.borderRadius,
+                        boxShadow: menuContent.boxShadow,
+                        maxHeight: maxMenuHeight,
+                        minWidth: menuDimensions?.minWidth ?? '250px',
+                        width: 'max(var(--radix-dropdown-menu-trigger-width))',
+                        maxWidth:
+                            menuDimensions?.maxWidth ??
+                            'var(--radix-dropdown-menu-trigger-width)',
+                    }}
+                    onKeyDown={(e) => {
+                        if (!enableSearch || !searchInputRef.current) return
+                        const targetIsSearch =
+                            e.target === searchInputRef.current ||
+                            searchInputRef.current.contains(e.target as Node)
+                        if (targetIsSearch) return
+
+                        const isTypingKey =
+                            e.key.length === 1 &&
+                            !e.ctrlKey &&
+                            !e.metaKey &&
+                            !e.altKey
+
+                        if (e.key === 'Backspace') {
+                            e.preventDefault()
+                            setSearchText((prev) =>
+                                prev.length > 0 ? prev.slice(0, -1) : prev
+                            )
+                            searchInputRef.current.focus()
+                            return
+                        }
+
+                        if (e.key === 'Delete') {
+                            e.preventDefault()
+                            searchInputRef.current.focus()
+                            return
+                        }
+
+                        if (isTypingKey) {
+                            searchInputRef.current.focus()
+                        }
+                    }}
+                >
+                    {skeleton.show ? (
+                        <SingleSelectV2Skeleton
+                            singleSelectTokens={singleSelectTokens}
+                            skeleton={skeleton}
+                        />
+                    ) : (
+                        <>
+                            <SingleSelectV2Search
+                                enabled={enableSearch}
+                                hasItems={items.length > 0}
+                                backgroundColor={
+                                    menuContent.backgroundColor as string
+                                }
+                                searchPlaceholder={searchPlaceholder}
+                                searchText={searchText}
+                                onSearchTextChange={setSearchText}
+                                searchInputRef={searchInputRef}
+                                containerRef={searchContainerRef}
+                            />
+
+                            {showEmptyState ? (
+                                <Block
+                                    display="flex"
+                                    justifyContent="center"
+                                    alignItems="center"
+                                    style={{
+                                        paddingTop: menuItem.paddingTop,
+                                        paddingRight: menuItem.paddingRight,
+                                        paddingBottom: menuItem.paddingBottom,
+                                        paddingLeft: menuItem.paddingLeft,
+                                    }}
+                                >
+                                    <Text
+                                        variant="body.md"
+                                        fontSize={
+                                            menuItem.groupLabelText.fontSize
+                                        }
+                                        fontWeight={
+                                            menuItem.groupLabelText.fontWeight
+                                        }
+                                        color={
+                                            menuItem.groupLabelText.color
+                                                .default
+                                        }
+                                        textAlign="center"
+                                    >
+                                        {emptyMessage}
+                                    </Text>
+                                </Block>
+                            ) : showVirtualList ? (
+                                <SingleSelectV2VirtualList
+                                    flattenedItems={flattenedItems}
+                                    selected={selected}
+                                    onSelect={onSelect}
+                                    singleSelectTokens={singleSelectTokens}
+                                    size={size}
+                                    variant={variant}
+                                    virtualViewportHeight={
+                                        adjustedVirtualViewportHeight
+                                    }
+                                    virtualItems={virtualItems}
+                                    totalSize={virtualizer.getTotalSize()}
+                                    measureElement={virtualizer.measureElement}
+                                    loadingComponent={loadingComponent}
+                                    hasMore={hasMore}
+                                    virtualScrollRef={virtualScrollRef}
+                                />
+                            ) : (
+                                <SingleSelectV2List
+                                    filteredItems={filteredItems}
+                                    selected={selected}
+                                    onSelect={onSelect}
+                                    singleSelectTokens={singleSelectTokens}
+                                    size={size}
+                                    variant={variant}
+                                    enableSearch={enableSearch}
+                                />
+                            )}
+                        </>
+                    )}
+                </Content>
+            </RadixMenu.Portal>
+        </RadixMenu.Root>
+    )
+}
+
+SingleSelectV2Menu.displayName = 'SingleSelectV2Menu'
+
+export default SingleSelectV2Menu

package/lib/components/SingleSelectV2/SingleSelectV2MenuItems.tsx

@@ -0,0 +1,228 @@
+import * as RadixMenu from '@radix-ui/react-dropdown-menu'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import { ChevronRight } from 'lucide-react'
+import styled from 'styled-components'
+import { SelectItemV2 } from '../SelectV2'
+import type { SingleSelectV2ItemType } from './singleSelectV2.types'
+import type { SingleSelectV2TokensType } from './singleSelectV2.tokens'
+import {
+    submenuContentAnimations,
+    hoverTransition,
+} from './singleSelectV2.animations'
+
+const StyledSubMenu = styled(RadixMenu.Sub)<{
+    $padding: string
+    $margin: string
+}>`
+    padding: ${({ $padding }) => $padding};
+    margin: ${({ $margin }) => $margin};
+`
+
+const SubTrigger = styled(RadixMenu.SubTrigger)<{
+    $padding: string
+    $margin: string
+    $borderRadius: string
+    $bgHover: string
+    $bgFocus: string
+}>`
+    align-items: center;
+    padding: ${({ $padding }) => $padding};
+    margin: ${({ $margin }) => $margin};
+    border-radius: ${({ $borderRadius }) => $borderRadius};
+    ${hoverTransition}
+    &:hover {
+        background-color: ${({ $bgHover }) => $bgHover};
+    }
+    &[data-disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    &[data-highlighted] {
+        border: none;
+        outline: none;
+        background-color: ${({ $bgFocus }) => $bgFocus};
+    }
+`
+
+const SubContent = styled(RadixMenu.SubContent)<{
+    $backgroundColor: string
+    $border: string
+    $borderRadius: string
+    $padding: string
+    $boxShadow: string
+}>`
+    background-color: ${({ $backgroundColor }) => $backgroundColor};
+    border: ${({ $border }) => $border};
+    border-radius: ${({ $borderRadius }) => $borderRadius};
+    padding: ${({ $padding }) => $padding};
+    box-shadow: ${({ $boxShadow }) => $boxShadow};
+    z-index: 1000;
+    ${submenuContentAnimations}
+`
+
+export type SubMenuProps = {
+    item: SingleSelectV2ItemType
+    selected: string
+    onSelect: (value: string) => void
+    singleSelectTokens: SingleSelectV2TokensType
+}
+
+export const SubMenu = ({
+    item,
+    onSelect,
+    selected,
+    singleSelectTokens,
+}: SubMenuProps) => {
+    const sub = singleSelectTokens.menu.submenu
+    const triggerPadding = [
+        sub.trigger.paddingTop,
+        sub.trigger.paddingRight,
+        sub.trigger.paddingBottom,
+        sub.trigger.paddingLeft,
+    ]
+        .filter(Boolean)
+        .join(' ')
+    const triggerMargin = String(sub.trigger.margin ?? '')
+    const triggerRadius = String(sub.trigger.borderRadius ?? '')
+    const bgHover = String(sub.trigger.backgroundColor.hover ?? '')
+    const bgFocus = String(sub.trigger.backgroundColor.focus ?? '')
+    const contentBg = String(sub.content.backgroundColor ?? '')
+    const contentBorder = String(sub.content.border ?? '')
+    const contentRadius = String(sub.content.borderRadius ?? '')
+    const contentPadding = [
+        sub.content.paddingTop,
+        sub.content.paddingRight,
+        sub.content.paddingBottom,
+        sub.content.paddingLeft,
+    ]
+        .filter(Boolean)
+        .join(' ')
+    const contentShadow = String(sub.content.boxShadow ?? '')
+    return (
+        <StyledSubMenu $padding={triggerPadding} $margin={triggerMargin}>
+            <SubTrigger
+                asChild
+                $padding={triggerPadding}
+                $margin={triggerMargin}
+                $borderRadius={triggerRadius}
+                $bgHover={bgHover}
+                $bgFocus={bgFocus}
+            >
+                <Block
+                    display="flex"
+                    alignItems="center"
+                    gap={8}
+                    justifyContent="space-between"
+                >
+                    <Block
+                        as="span"
+                        display="flex"
+                        alignItems="center"
+                        gap={8}
+                        flexGrow={1}
+                    >
+                        {item.slot1 && (
+                            <Block flexShrink={0} height="auto" contentCentered>
+                                {item.slot1}
+                            </Block>
+                        )}
+                        <Text
+                            variant="body.md"
+                            color={sub.optionText.color}
+                            fontWeight={sub.optionText.fontWeight}
+                            fontSize={sub.optionText.fontSize}
+                            truncate
+                        >
+                            {item.label}
+                        </Text>
+                    </Block>
+                    {item.slot2 && (
+                        <Block flexShrink={0} height="auto" contentCentered>
+                            {item.slot2}
+                        </Block>
+                    )}
+                    {item.slot3 && (
+                        <Block flexShrink={0} height="auto" contentCentered>
+                            {item.slot3}
+                        </Block>
+                    )}
+                    {item.slot4 && (
+                        <Block flexShrink={0} height="auto" contentCentered>
+                            {item.slot4}
+                        </Block>
+                    )}
+                    <Block flexShrink={0} size={20} contentCentered>
+                        <ChevronRight size={16} color={sub.iconColor} />
+                    </Block>
+                </Block>
+            </SubTrigger>
+            <SubContent
+                avoidCollisions
+                sideOffset={8}
+                $backgroundColor={contentBg}
+                $border={contentBorder}
+                $borderRadius={contentRadius}
+                $padding={contentPadding}
+                $boxShadow={contentShadow}
+            >
+                {item.subMenu?.map((subItem, subIdx) => (
+                    <MenuItem
+                        key={subIdx}
+                        item={subItem}
+                        onSelect={onSelect}
+                        selected={selected}
+                        singleSelectTokens={singleSelectTokens}
+                    />
+                ))}
+            </SubContent>
+        </StyledSubMenu>
+    )
+}
+
+export type MenuItemProps = {
+    item: SingleSelectV2ItemType
+    selected: string
+    onSelect: (value: string) => void
+    singleSelectTokens?: SingleSelectV2TokensType
+    index?: number
+}
+
+export const MenuItem = ({
+    item,
+    onSelect,
+    selected,
+    singleSelectTokens,
+    index,
+}: MenuItemProps) => {
+    if (item.subMenu) {
+        if (!singleSelectTokens) {
+            console.error(
+                'SingleSelectV2 MenuItem: singleSelectTokens is required when item has subMenu'
+            )
+            return null
+        }
+        return (
+            <SubMenu
+                item={item}
+                onSelect={onSelect}
+                selected={selected}
+                singleSelectTokens={singleSelectTokens}
+            />
+        )
+    }
+
+    if (!singleSelectTokens) return null
+
+    return (
+        <SelectItemV2
+            mode="single"
+            item={item}
+            onSelect={onSelect}
+            selected={selected}
+            itemTokens={singleSelectTokens.menu.item}
+            index={index}
+            showCheckmark
+        />
+    )
+}

package/lib/components/SingleSelectV2/SingleSelectV2Search.tsx

@@ -0,0 +1,54 @@
+import Block from '../Primitives/Block/Block'
+import { SearchInput } from '../Inputs'
+import type { MenuSearchProps } from './singleSelectV2.types'
+
+const SingleSelectV2Search = ({
+    enabled,
+    hasItems,
+    backgroundColor,
+    searchPlaceholder,
+    searchText,
+    onSearchTextChange,
+    searchInputRef,
+    containerRef,
+}: MenuSearchProps) => {
+    if (!enabled || !hasItems) return null
+
+    return (
+        <Block
+            ref={containerRef}
+            position="sticky"
+            top={0}
+            left={0}
+            right={0}
+            zIndex={50}
+            backgroundColor={backgroundColor}
+        >
+            <SearchInput
+                ref={searchInputRef}
+                placeholder={searchPlaceholder}
+                value={searchText}
+                onChange={(e) => {
+                    onSearchTextChange(e.target.value)
+                }}
+                onKeyDown={(e) => {
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        const menuEl = e.currentTarget.closest(
+                            '[data-dropdown="dropdown"]'
+                        )
+                        const first = menuEl?.querySelector<HTMLElement>(
+                            '[role="menuitem"]:not([data-disabled])'
+                        )
+                        first?.focus()
+                    }
+                }}
+                autoFocus
+                aria-label={searchPlaceholder ?? 'Search options'}
+            />
+        </Block>
+    )
+}
+
+export default SingleSelectV2Search

package/lib/components/SingleSelectV2/SingleSelectV2Skeleton.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react'
+import Block from '../Primitives/Block/Block'
+import { SingleSelectV2SkeletonProps } from './singleSelectV2.types'
+import { SingleSelectV2TokensType } from './singleSelectV2.tokens'
+import { Skeleton, SkeletonVariant } from '../Skeleton'
+
+export type SingleSelectV2SkeletonComponentProps = {
+    singleSelectTokens: SingleSelectV2TokensType
+    skeleton: SingleSelectV2SkeletonProps
+}
+
+const SingleSelectV2Skeleton = forwardRef<
+    HTMLDivElement,
+    SingleSelectV2SkeletonComponentProps
+>(({ singleSelectTokens, skeleton }, ref) => {
+    return (
+        <Block
+            ref={ref}
+            style={{
+                paddingTop: singleSelectTokens.menu.item.paddingTop,
+                paddingRight: singleSelectTokens.menu.item.paddingRight,
+                paddingBottom: singleSelectTokens.menu.item.paddingBottom,
+                paddingLeft: singleSelectTokens.menu.item.paddingLeft,
+            }}
+            display="flex"
+            flexDirection="column"
+            gap={singleSelectTokens.menu.item.gap || 4}
+            borderRadius={singleSelectTokens.menu.item.borderRadius}
+            outline="none"
+            border="none"
+            width="100%"
+            maxWidth="100%"
+        >
+            {Array.from({ length: skeleton.count || 3 }).map((_, index) => (
+                <Skeleton
+                    key={index}
+                    width="100%"
+                    height="33px"
+                    variant={(skeleton.variant as SkeletonVariant) || 'pulse'}
+                />
+            ))}
+        </Block>
+    )
+})
+
+SingleSelectV2Skeleton.displayName = 'SingleSelectV2Skeleton'
+
+export default SingleSelectV2Skeleton