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

package/lib/components/SingleSelectV2/SingleSelectV2Trigger.tsx

@@ -0,0 +1,308 @@
+import React, { useRef } from 'react'
+import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
+import Block from '../Primitives/Block/Block'
+import { toPixels } from '../../global-utils/GlobalUtils'
+import FloatingLabels from '../Inputs/utils/FloatingLabels/FloatingLabels'
+import { TruncatedTextWithTooltip } from '../common'
+import { ChevronDown } from 'lucide-react'
+import {
+    SingleSelectV2Size,
+    SingleSelectV2Variant,
+    type SelectV2TriggerDimensions,
+} from './singleSelectV2.types'
+import type { SingleSelectV2TokensType } from './singleSelectV2.tokens'
+
+export type SingleSelectV2TriggerProps = {
+    size: SingleSelectV2Size
+    selected: string
+    label: string
+    name: string
+    placeholder: string
+    required: boolean
+    valueLabelMap: Record<string, string>
+    open: boolean
+    slot?: React.ReactNode
+    variant: SingleSelectV2Variant
+    isSmallScreenWithLargeSize: boolean
+    isItemSelected: boolean
+    singleSelectTokens: SingleSelectV2TokensType
+    inline?: boolean
+    error?: boolean
+    disabled?: boolean
+    triggerDimensions?: SelectV2TriggerDimensions
+    singleSelectGroupPosition?: 'center' | 'left' | 'right'
+    borderRadius?: string
+    borderRight?: string
+    [key: string]: unknown
+}
+
+const DEFAULT_TRIGGER_DIMENSIONS: SelectV2TriggerDimensions = {
+    width: 'auto',
+    minWidth: 'auto',
+    maxWidth: 'auto',
+}
+
+const SingleSelectV2Trigger = ({
+    triggerDimensions = DEFAULT_TRIGGER_DIMENSIONS,
+    size,
+    selected,
+    label,
+    name,
+    placeholder,
+    required,
+    valueLabelMap,
+    open,
+    slot,
+    variant,
+    isSmallScreenWithLargeSize,
+    isItemSelected,
+    singleSelectTokens,
+    inline = false,
+    error,
+    disabled,
+    singleSelectGroupPosition: _singleSelectGroupPosition,
+    borderRadius,
+    borderRight,
+    ...rest
+}: SingleSelectV2TriggerProps) => {
+    void _singleSelectGroupPosition
+    const slotRef = useRef<HTMLDivElement>(null)
+    const slotWidth = slotRef.current?.offsetWidth
+
+    const fallbackPadding = {
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px',
+    }
+    const triggerTokens = singleSelectTokens?.trigger
+    const labelDisabledColor = singleSelectTokens?.label?.color?.disabled
+    const placeholderTokens = triggerTokens?.placeholder ?? {
+        color: 'inherit',
+        fontSize: '14px',
+        fontWeight: 400,
+    }
+    const selectedValueTokens = triggerTokens?.selectedValue ?? {
+        color: 'inherit',
+        fontSize: '14px',
+        fontWeight: 400,
+    }
+    const variantOutlineTokens = triggerTokens?.outline?.[variant] ?? {
+        open: 'none',
+        closed: 'none',
+        hover: 'none',
+        focus: 'none',
+        error: 'none',
+    }
+    const variantBackgroundTokens = triggerTokens?.backgroundColor?.[
+        variant
+    ] ?? {
+        open: 'transparent',
+        closed: 'transparent',
+        hover: 'transparent',
+        focus: 'transparent',
+        error: 'transparent',
+    }
+    const triggerHeight = triggerTokens?.height?.[size]?.[variant] ?? 'auto'
+    const padding = triggerTokens?.padding?.[size]?.[variant] ?? fallbackPadding
+    const paddingLeft = toPixels(padding.left)
+    const paddingRight = toPixels(padding.right)
+    const paddingTop = toPixels(padding.top)
+    const paddingBottom = toPixels(padding.bottom)
+    const paddingInlineStart =
+        slot && slotWidth ? paddingLeft + slotWidth + 8 : paddingLeft
+
+    const isContainer = variant === SingleSelectV2Variant.CONTAINER
+    const resolvedBorderRadius =
+        borderRadius ?? triggerTokens?.borderRadius?.[size]?.[variant] ?? '0px'
+
+    return (
+        <PrimitiveButton
+            data-element="single-select-button"
+            type="button"
+            disabled={disabled}
+            maxWidth={triggerDimensions.maxWidth}
+            minWidth={triggerDimensions.minWidth}
+            width={triggerDimensions.width}
+            name={name}
+            id={name}
+            position="relative"
+            display="flex"
+            alignItems="center"
+            overflow="hidden"
+            justifyContent="space-between"
+            gap={8}
+            borderRadius={resolvedBorderRadius}
+            border={
+                variantOutlineTokens[error ? 'error' : open ? 'open' : 'closed']
+            }
+            borderRight={borderRight}
+            {...((!inline || isContainer) && {
+                paddingLeft: paddingLeft,
+                paddingRight: paddingRight,
+                paddingTop: paddingTop,
+                paddingBottom: paddingBottom,
+                backgroundColor:
+                    variantBackgroundTokens[
+                        error ? 'error' : open ? 'open' : 'closed'
+                    ],
+                height: triggerHeight,
+                maxHeight: triggerHeight,
+                ...(!disabled && {
+                    _hover: {
+                        border: variantOutlineTokens[error ? 'error' : 'hover'],
+                        backgroundColor:
+                            variantBackgroundTokens[error ? 'error' : 'hover'],
+                        borderRight: borderRight,
+                    },
+                }),
+                _focus: {
+                    border: variantOutlineTokens[error ? 'error' : 'focus'],
+                    backgroundColor:
+                        variantBackgroundTokens[error ? 'error' : 'focus'],
+                    borderRight: borderRight,
+                },
+                _disabled: {
+                    cursor: 'not-allowed',
+                    backgroundColor: variantBackgroundTokens.closed,
+                    color: labelDisabledColor,
+                },
+            })}
+            {...rest}
+        >
+            <Block
+                display="flex"
+                alignItems="center"
+                gap={8}
+                style={{
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: 'hidden',
+                }}
+            >
+                {slot && (
+                    <Block
+                        data-element="icon"
+                        ref={slotRef}
+                        contentCentered
+                        style={{
+                            flexShrink: 0,
+                        }}
+                    >
+                        {slot}
+                    </Block>
+                )}
+                {isSmallScreenWithLargeSize && isContainer ? (
+                    <Block
+                        as="span"
+                        textAlign="left"
+                        paddingTop={
+                            isSmallScreenWithLargeSize && isItemSelected
+                                ? paddingTop * 1.5
+                                : 0
+                        }
+                        style={{
+                            textAlign: 'left',
+                            flexGrow: 1,
+                            flexShrink: 1,
+                            minWidth: 0,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
+                        <Block
+                            position="absolute"
+                            top={
+                                isItemSelected
+                                    ? toPixels(paddingTop - paddingTop / 1.3) +
+                                      (!required ? 3 : 0)
+                                    : '50%'
+                            }
+                            left={toPixels(paddingInlineStart)}
+                            height={'max-content'}
+                            style={{
+                                transition: 'all 0.2s ease-in-out',
+                                transform: isItemSelected
+                                    ? 'scale(0.95)'
+                                    : 'translateY(-50%) scale(1)',
+                                transformOrigin: 'left center',
+                                pointerEvents: 'none',
+                                zIndex: 1,
+                            }}
+                        >
+                            <FloatingLabels
+                                label={label || ''}
+                                required={required || false}
+                                name={name || ''}
+                                isFocused={isItemSelected}
+                            />
+                        </Block>
+                        {selected && (
+                            <TruncatedTextWithTooltip
+                                text={valueLabelMap[selected] || selected}
+                                style={{
+                                    fontSize: placeholderTokens.fontSize,
+                                    color: disabled
+                                        ? labelDisabledColor
+                                        : placeholderTokens.color,
+                                    fontWeight: placeholderTokens.fontWeight,
+                                }}
+                            />
+                        )}
+                    </Block>
+                ) : (
+                    <TruncatedTextWithTooltip
+                        text={
+                            selected
+                                ? valueLabelMap[selected] || selected
+                                : placeholder
+                        }
+                        data-element="placeholder"
+                        data-id={
+                            selected
+                                ? valueLabelMap[selected] || selected
+                                : placeholder
+                        }
+                        style={{
+                            flexGrow: 1,
+                            flexShrink: 1,
+                            minWidth: 0,
+                            color: disabled
+                                ? labelDisabledColor
+                                : selected
+                                  ? selectedValueTokens.color
+                                  : placeholderTokens.color,
+                            fontWeight: selected
+                                ? selectedValueTokens.fontWeight
+                                : placeholderTokens.fontWeight,
+                            fontSize: selected
+                                ? selectedValueTokens.fontSize
+                                : placeholderTokens.fontSize,
+                        }}
+                    />
+                )}
+            </Block>
+            <Block
+                data-element="chevron-icon"
+                contentCentered
+                style={{
+                    flexShrink: 0,
+                }}
+            >
+                <ChevronDown
+                    size={16}
+                    color={
+                        disabled
+                            ? labelDisabledColor
+                            : selected
+                              ? selectedValueTokens.color
+                              : placeholderTokens.color
+                    }
+                />
+            </Block>
+        </PrimitiveButton>
+    )
+}
+
+export default SingleSelectV2Trigger

package/lib/components/SingleSelectV2/SingleSelectV2VirtualList.tsx

@@ -0,0 +1,161 @@
+import * as RadixMenu from '@radix-ui/react-dropdown-menu'
+import styled from 'styled-components'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import type { CSSProperties } from 'react'
+import { MenuItem } from './SingleSelectV2MenuItems'
+import type { VirtualListProps, FlattenedItem } from './singleSelectV2.types'
+import { getItemOrdinalIndex } from './utils'
+
+const GroupLabel = styled(RadixMenu.Label)`
+    user-select: none;
+    text-transform: uppercase;
+    overflow: clip;
+`
+
+const rowStyle: CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+}
+
+const SingleSelectV2VirtualList = ({
+    flattenedItems,
+    selected,
+    onSelect,
+    singleSelectTokens,
+    size,
+    variant,
+    virtualViewportHeight,
+    virtualItems,
+    totalSize,
+    measureElement,
+    loadingComponent,
+    hasMore,
+    virtualScrollRef,
+}: VirtualListProps) => {
+    const menuGroupLabel = singleSelectTokens.menu.groupLabel
+    const menuItem = singleSelectTokens.menu.item
+
+    const renderVirtualRow = (flatItem: FlattenedItem, flatIndex: number) => {
+        if (flatItem.type === 'label') {
+            return (
+                <Block style={rowStyle}>
+                    <GroupLabel
+                        style={{
+                            margin: menuGroupLabel.margin,
+                            paddingTop: menuGroupLabel.paddingTop,
+                            paddingRight: menuGroupLabel.paddingRight,
+                            paddingBottom: menuGroupLabel.paddingBottom,
+                            paddingLeft: menuGroupLabel.paddingLeft,
+                            width: '100%',
+                        }}
+                    >
+                        <Text
+                            fontSize={menuItem.groupLabelText.fontSize}
+                            color={menuItem.groupLabelText.color.default}
+                            fontWeight={menuItem.groupLabelText.fontWeight}
+                        >
+                            {flatItem.label}
+                        </Text>
+                    </GroupLabel>
+                </Block>
+            )
+        }
+
+        if (flatItem.type === 'separator') {
+            return (
+                <Block style={rowStyle}>
+                    <RadixMenu.Separator asChild>
+                        <Block
+                            height={menuItem.separator.height}
+                            backgroundColor={menuItem.separator.color}
+                            margin={menuItem.separator.margin}
+                            width="100%"
+                        />
+                    </RadixMenu.Separator>
+                </Block>
+            )
+        }
+
+        if (flatItem.type === 'item' && flatItem.item) {
+            const ordinalIndex = getItemOrdinalIndex(flattenedItems, flatIndex)
+            return (
+                <Block style={rowStyle}>
+                    <Block width="100%" style={{ minWidth: 0 }}>
+                        <MenuItem
+                            item={flatItem.item}
+                            selected={selected}
+                            onSelect={onSelect}
+                            singleSelectTokens={singleSelectTokens}
+                            index={ordinalIndex}
+                        />
+                    </Block>
+                </Block>
+            )
+        }
+
+        return null
+    }
+
+    return (
+        <Block
+            ref={virtualScrollRef}
+            data-element="virtual-list"
+            style={{
+                paddingTop: 0,
+                paddingRight:
+                    singleSelectTokens.menu.padding[size][variant].right,
+                paddingBottom:
+                    singleSelectTokens.menu.padding[size][variant].bottom,
+                paddingLeft:
+                    singleSelectTokens.menu.padding[size][variant].left,
+                height: virtualViewportHeight,
+                overflow: 'auto',
+            }}
+        >
+            <div
+                style={{
+                    height: `${totalSize}px`,
+                    width: '100%',
+                    position: 'relative',
+                }}
+            >
+                {virtualItems.map((virtualItem) => (
+                    <div
+                        key={String(virtualItem.key)}
+                        data-index={virtualItem.index}
+                        ref={measureElement}
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            transform: `translateY(${virtualItem.start}px)`,
+                        }}
+                    >
+                        {renderVirtualRow(
+                            flattenedItems[virtualItem.index],
+                            virtualItem.index
+                        )}
+                    </div>
+                ))}
+            </div>
+            {loadingComponent && hasMore && (
+                <Block
+                    style={{
+                        paddingTop: menuItem.paddingTop,
+                        paddingRight: menuItem.paddingRight,
+                        paddingBottom: menuItem.paddingBottom,
+                        paddingLeft: menuItem.paddingLeft,
+                    }}
+                >
+                    {loadingComponent}
+                </Block>
+            )}
+        </Block>
+    )
+}
+
+export default SingleSelectV2VirtualList

package/lib/components/SingleSelectV2/index.ts

@@ -0,0 +1,11 @@
+export { default as SingleSelectV2 } from './SingleSelectV2'
+export { default as MobileSingleSelectV2 } from './MobileSingleSelectV2'
+export { default as SingleSelectV2Trigger } from './SingleSelectV2Trigger'
+export { default as SingleSelectV2Menu } from './SingleSelectV2Menu'
+export { default as SingleSelectV2List } from './SingleSelectV2List'
+export { default as SingleSelectV2VirtualList } from './SingleSelectV2VirtualList'
+export { default as SingleSelectV2Search } from './SingleSelectV2Search'
+export { default as SingleSelectV2Skeleton } from './SingleSelectV2Skeleton'
+export * from './singleSelectV2.types'
+export * from './singleSelectV2.tokens'
+export * from './utils'

package/lib/components/SingleSelectV2/mobile/SingleSelectV2MobileItem.tsx

@@ -0,0 +1,127 @@
+import { Check } from 'lucide-react'
+import Block from '../../Primitives/Block/Block'
+import Text from '../../Text/Text'
+import type { SingleSelectV2TokensType } from '../singleSelectV2.tokens'
+import type { SingleSelectV2ItemType } from '../singleSelectV2.types'
+
+type SingleSelectV2MobileItemProps = {
+    item: SingleSelectV2ItemType
+    isSelected: boolean
+    onSelect: (value: string) => void
+    itemTokens: SingleSelectV2TokensType['menu']['item']
+}
+
+const SingleSelectV2MobileItem = ({
+    item,
+    isSelected,
+    onSelect,
+    itemTokens,
+}: SingleSelectV2MobileItemProps) => {
+    const colorState = isSelected ? 'selected' : 'default'
+
+    return (
+        <Block
+            display="flex"
+            flexDirection="column"
+            gap={itemTokens.gap}
+            style={{
+                paddingTop: itemTokens.paddingTop,
+                paddingRight: itemTokens.paddingRight,
+                paddingBottom: itemTokens.paddingBottom,
+                paddingLeft: itemTokens.paddingLeft,
+                transition: 'background-color 0.15s ease-in-out',
+            }}
+            margin={itemTokens.margin}
+            borderRadius={itemTokens.borderRadius}
+            cursor={item.disabled ? 'not-allowed' : 'pointer'}
+            backgroundColor={
+                item.disabled
+                    ? itemTokens.backgroundColor.disabled
+                    : isSelected
+                      ? itemTokens.backgroundColor.selected
+                      : itemTokens.backgroundColor.default
+            }
+            _hover={{
+                backgroundColor: itemTokens.backgroundColor.hover,
+            }}
+            onClick={() => {
+                if (!item.disabled) {
+                    onSelect(item.value)
+                }
+            }}
+        >
+            <Block
+                width="100%"
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={8}
+            >
+                <Block display="flex" alignItems="center" gap={8} flexGrow={1}>
+                    {item.slot1 && (
+                        <Block flexShrink={0} height="auto" contentCentered>
+                            {item.slot1}
+                        </Block>
+                    )}
+                    <Text
+                        variant="body.md"
+                        fontSize={itemTokens.option.fontSize}
+                        fontWeight={itemTokens.option.fontWeight}
+                        color={
+                            item.disabled
+                                ? itemTokens.option.color.disabled
+                                : itemTokens.option.color[colorState]
+                        }
+                        truncate
+                    >
+                        {item.label}
+                    </Text>
+                </Block>
+                <Block
+                    display="flex"
+                    alignItems="center"
+                    gap={4}
+                    flexShrink={0}
+                >
+                    {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>
+                    )}
+                    {isSelected && (
+                        <Block flexShrink={0} height="auto" contentCentered>
+                            <Check
+                                size={16}
+                                color={itemTokens.option.color.selected}
+                            />
+                        </Block>
+                    )}
+                </Block>
+            </Block>
+            {item.subLabel && (
+                <Block display="flex" alignItems="center" width="100%">
+                    <Text
+                        variant="body.sm"
+                        fontSize={itemTokens.description.fontSize}
+                        fontWeight={itemTokens.description.fontWeight}
+                        color={itemTokens.description.color[colorState]}
+                    >
+                        {item.subLabel}
+                    </Text>
+                </Block>
+            )}
+        </Block>
+    )
+}
+
+export default SingleSelectV2MobileItem

package/lib/components/SingleSelectV2/mobile/singleSelectV2.mobile.utils.ts

@@ -0,0 +1,55 @@
+import type {
+    SingleSelectV2GroupType,
+    SingleSelectV2ItemType,
+} from '../singleSelectV2.types'
+
+export const filterMobileMenuItem = (
+    item: SingleSelectV2ItemType,
+    searchText: string
+): SingleSelectV2ItemType | null => {
+    const lowerSearch = searchText.toLowerCase()
+    const isMatch =
+        (item.label && item.label.toLowerCase().includes(lowerSearch)) ||
+        (item.subLabel && item.subLabel.toLowerCase().includes(lowerSearch))
+
+    if (!item.subMenu) {
+        return isMatch ? item : null
+    }
+
+    const filteredSubMenu = item.subMenu
+        .map((subItem: SingleSelectV2ItemType) =>
+            filterMobileMenuItem(subItem, lowerSearch)
+        )
+        .filter(Boolean) as SingleSelectV2ItemType[]
+
+    if (filteredSubMenu.length > 0 || isMatch) {
+        return { ...item, subMenu: filteredSubMenu }
+    }
+
+    return null
+}
+
+export const filterMobileMenuGroups = (
+    groups: SingleSelectV2GroupType[],
+    searchText: string
+): SingleSelectV2GroupType[] => {
+    if (!searchText) {
+        return groups
+    }
+
+    return groups
+        .map((group: SingleSelectV2GroupType) => {
+            const filteredItems = group.items
+                .map((item: SingleSelectV2ItemType) =>
+                    filterMobileMenuItem(item, searchText)
+                )
+                .filter(Boolean) as SingleSelectV2ItemType[]
+
+            if (filteredItems.length === 0) {
+                return null
+            }
+
+            return { ...group, items: filteredItems }
+        })
+        .filter(Boolean) as SingleSelectV2GroupType[]
+}