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

package/lib/components/Select/types.tsx

@@ -0,0 +1,102 @@
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
+
+export enum SelectMenuAlignment {
+    START = 'start',
+    CENTER = 'center',
+    END = 'end',
+}
+
+export enum SelectMenuVariant {
+    CONTAINER = 'container',
+    NO_CONTAINER = 'no-container',
+}
+
+export enum SelectMenuSize {
+    SMALL = 'sm',
+    MEDIUM = 'md',
+    LARGE = 'lg',
+}
+
+export enum SelectMenuSide {
+    TOP = 'top',
+    LEFT = 'left',
+    RIGHT = 'right',
+    BOTTOM = 'bottom',
+}
+
+export type SelectMenuGroupType = {
+    groupLabel?: string
+    items: SelectMenuItemType[]
+    showSeparator?: boolean
+}
+
+export type SelectMenuProps = {
+    trigger?: React.ReactNode
+    items: SelectMenuGroupType[]
+    asModal?: boolean
+    alignment?: SelectMenuAlignment
+    side?: SelectMenuSide
+    sideOffset?: number
+    alignOffset?: number
+    collisonBoundaryRef?: Element | null | Array<Element | null>
+    maxHeight?: number
+    selected?: string | string[]
+    onSelect?: (value: string | string[]) => void
+    allowMultiSelect?: boolean
+    enableSearch?: boolean
+    onOpenChange?: (open: boolean) => void
+}
+
+export type SelectMenuItemType = {
+    label: string
+    value: string
+    checked?: boolean
+    subLabel?: string
+    slot1?: React.ReactNode
+    slot2?: React.ReactNode
+    slot3?: React.ReactNode
+    slot4?: React.ReactNode
+    disabled?: boolean
+    onClick?: () => void
+    subMenu?: SelectMenuItemType[]
+
+    tooltip?: string | React.ReactNode
+    tooltipProps?: {
+        side?: TooltipSide
+        align?: TooltipAlign
+        size?: TooltipSize
+        showArrow?: boolean
+        delayDuration?: number
+        offset?: number
+    }
+    disableTruncation?: boolean
+    isDisabled?: boolean
+}
+
+export const dummyMenuItemsLong: SelectMenuGroupType[] = Array.from(
+    { length: 5 },
+    (_, groupIndex) => ({
+        groupLabel: `Group ${groupIndex + 1}`,
+        showSeparator: groupIndex < 99,
+        items: Array.from({ length: 2 }, (_, itemIndex) => {
+            const itemNumber = groupIndex * 10 + itemIndex + 1
+            return {
+                label: `Item ${itemNumber}`,
+                value: `item-${itemNumber}`,
+                subMenu:
+                    itemNumber % 20 === 0
+                        ? [
+                              {
+                                  label: `Sub Item ${itemNumber}-1`,
+                                  value: `sub-item-${itemNumber}-1`,
+                              },
+                              {
+                                  label: `Sub Item ${itemNumber}-2`,
+                                  value: `sub-item-${itemNumber}-2`,
+                              },
+                          ]
+                        : undefined,
+            }
+        }),
+    })
+)

package/lib/components/SelectV2/SelectItemV2.tsx

@@ -0,0 +1,328 @@
+import { forwardRef, useRef, useState, useEffect, useCallback } from 'react'
+import * as RadixMenu from '@radix-ui/react-dropdown-menu'
+import { Check } from 'lucide-react'
+import Block from '../Primitives/Block/Block'
+import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
+import { Checkbox } from '../Checkbox'
+import { Tooltip, TooltipSide } from '../Tooltip'
+import { checkIfTruncated } from '../Select/SelectItem/utils'
+import type { SelectItemV2Props } from './types'
+
+const SlotWrapper = ({ slot }: { slot: React.ReactNode }) => (
+    <Block data-element="icon" flexShrink={0} height="auto" contentCentered>
+        {slot}
+    </Block>
+)
+
+const SelectItemV2 = forwardRef<HTMLDivElement, SelectItemV2Props>(
+    (props, ref) => {
+        const {
+            item,
+            onSelect,
+            itemTokens,
+            index = 0,
+            selectedPosition = 'none',
+            className,
+        } = props
+
+        const textRef = useRef<HTMLDivElement>(null)
+        const subLabelRef = useRef<HTMLDivElement>(null)
+        const [showTooltip, setShowTooltip] = useState(false)
+        const [showSubLabelTooltip, setShowSubLabelTooltip] = useState(false)
+        const resizeObserverRef = useRef<ResizeObserver | null>(null)
+        const rafRef = useRef<number | null>(null)
+
+        const isSelected =
+            props.mode === 'single'
+                ? props.selected === item.value
+                : props.selectedValues.includes(item.value)
+
+        const isMulti = props.mode === 'multi'
+        const showCheckmark =
+            props.mode === 'single' ? (props.showCheckmark ?? true) : false
+
+        const checkTruncation = useCallback(() => {
+            if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+            resizeObserverRef.current?.disconnect()
+            rafRef.current = requestAnimationFrame(() => {
+                let nextShow = false
+                let nextSub = false
+                if (textRef.current)
+                    nextShow = checkIfTruncated(textRef.current)
+                if (item.subLabel && subLabelRef.current)
+                    nextSub = checkIfTruncated(subLabelRef.current)
+                setShowTooltip((p) => (p !== nextShow ? nextShow : p))
+                setShowSubLabelTooltip((p) => (p !== nextSub ? nextSub : p))
+                requestAnimationFrame(() => {
+                    const ro = resizeObserverRef.current
+                    if (!ro) return
+                    if (textRef.current) ro.observe(textRef.current)
+                    if (subLabelRef.current) ro.observe(subLabelRef.current)
+                })
+                rafRef.current = null
+            })
+        }, [item.subLabel])
+
+        useEffect(() => {
+            if (item.disableTruncation) return
+            resizeObserverRef.current = new ResizeObserver(() =>
+                checkTruncation()
+            )
+            checkTruncation()
+            return () => {
+                resizeObserverRef.current?.disconnect()
+                resizeObserverRef.current = null
+                if (rafRef.current !== null)
+                    cancelAnimationFrame(rafRef.current)
+            }
+        }, [item.label, item.subLabel, item.disableTruncation, checkTruncation])
+
+        const handleSelect = (e: Event) => {
+            if (item.disabled) {
+                e.preventDefault()
+                return
+            }
+            if (isMulti) e.preventDefault()
+            onSelect(item.value)
+        }
+
+        const hasTooltip =
+            (showTooltip && !!item.label) ||
+            (showSubLabelTooltip && !!item.subLabel) ||
+            !!item.tooltip
+        const tooltipContent = item.tooltip ?? (
+            <>
+                {showTooltip && item.label && <span>{item.label}</span>}
+                {showSubLabelTooltip && item.subLabel && (
+                    <Block style={{ display: 'block' }}>{item.subLabel}</Block>
+                )}
+            </>
+        )
+
+        const defaultRadius = String(itemTokens.borderRadius ?? '')
+        const getBorderRadius = (): string => {
+            if (!isSelected || selectedPosition === 'none') return defaultRadius
+            switch (selectedPosition) {
+                case 'first':
+                    return `${defaultRadius} ${defaultRadius} 0 0`
+                case 'middle':
+                    return '0'
+                case 'last':
+                    return `0 0 ${defaultRadius} ${defaultRadius}`
+                default:
+                    return defaultRadius
+            }
+        }
+
+        const colorState = item.disabled
+            ? 'disabled'
+            : isSelected
+              ? 'selected'
+              : 'default'
+
+        const itemContent = (
+            <RadixMenu.Item
+                asChild
+                onSelect={handleSelect}
+                data-disabled={item.disabled}
+                disabled={item.disabled}
+            >
+                <Block
+                    data-numeric={index + 1}
+                    data-state={isSelected ? 'selected' : 'not selected'}
+                    data-element={
+                        isMulti ? 'select-item-v2-multi' : 'select-item'
+                    }
+                    data-id={
+                        item.label ||
+                        (isMulti ? 'select-item-v2-multi' : 'select-item')
+                    }
+                    ref={ref}
+                    role={isMulti ? 'option' : 'menuitem'}
+                    aria-selected={isMulti ? isSelected : undefined}
+                    tabIndex={item.disabled ? -1 : 0}
+                    style={{
+                        paddingTop: itemTokens.paddingTop,
+                        paddingRight: itemTokens.paddingRight,
+                        paddingBottom: itemTokens.paddingBottom,
+                        paddingLeft: itemTokens.paddingLeft,
+                        userSelect: 'none',
+                        overflow: 'hidden',
+                    }}
+                    display="flex"
+                    flexDirection="column"
+                    gap={itemTokens.gap as number}
+                    borderRadius={getBorderRadius()}
+                    outline="none"
+                    border="none"
+                    width="100%"
+                    maxWidth="100%"
+                    minWidth={0}
+                    color={itemTokens.option.color[colorState]}
+                    backgroundColor={
+                        isSelected
+                            ? itemTokens.backgroundColor.selected
+                            : itemTokens.backgroundColor.default
+                    }
+                    _hover={{
+                        backgroundColor: itemTokens.backgroundColor.hover,
+                    }}
+                    _active={{
+                        backgroundColor: itemTokens.backgroundColor.active,
+                    }}
+                    _focus={{
+                        backgroundColor: itemTokens.backgroundColor.focus,
+                    }}
+                    _focusVisible={{
+                        backgroundColor:
+                            itemTokens.backgroundColor.focusVisible,
+                    }}
+                    cursor={item.disabled ? 'not-allowed' : 'pointer'}
+                    className={className}
+                >
+                    <Block
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="space-between"
+                        width="100%"
+                        maxWidth="100%"
+                        gap={8}
+                        style={{ minWidth: 0 }}
+                    >
+                        <Block
+                            as="div"
+                            display="flex"
+                            alignItems="center"
+                            gap={8}
+                            flexGrow={1}
+                            minWidth={0}
+                            style={{ overflow: 'hidden' }}
+                        >
+                            {item.slot1 && <SlotWrapper slot={item.slot1} />}
+                            <Block
+                                data-element="select-item-label"
+                                data-id={item.label || 'select-item-label'}
+                                flexGrow={1}
+                                display="flex"
+                                overflow="hidden"
+                                ref={textRef}
+                                style={{ minWidth: 0, maxWidth: '100%' }}
+                            >
+                                <PrimitiveText
+                                    data-text={item.label}
+                                    fontSize={itemTokens.option.fontSize}
+                                    fontWeight={itemTokens.option.fontWeight}
+                                    truncate={!item.disableTruncation}
+                                    data-truncate="true"
+                                    style={{
+                                        width: '100%',
+                                        minWidth: 0,
+                                        maxWidth: '100%',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }}
+                                >
+                                    {item.label}
+                                </PrimitiveText>
+                            </Block>
+                        </Block>
+
+                        <Block
+                            as="div"
+                            display="flex"
+                            alignItems="center"
+                            gap={4}
+                            flexShrink={0}
+                        >
+                            {item.slot2 && <SlotWrapper slot={item.slot2} />}
+                            {item.slot3 && <SlotWrapper slot={item.slot3} />}
+                            {item.slot4 && <SlotWrapper slot={item.slot4} />}
+
+                            {showCheckmark && isSelected && (
+                                <Block
+                                    as="span"
+                                    display="flex"
+                                    alignItems="center"
+                                    flexShrink={0}
+                                >
+                                    <Check
+                                        data-element="checkbox"
+                                        data-id={item.value || 'checkbox'}
+                                        data-state="selected"
+                                        data-status={
+                                            item.disabled
+                                                ? 'disabled'
+                                                : 'enabled'
+                                        }
+                                        size={16}
+                                    />
+                                </Block>
+                            )}
+
+                            {isMulti && (
+                                <Checkbox
+                                    checked={isSelected}
+                                    disabled={item.disabled}
+                                />
+                            )}
+                        </Block>
+                    </Block>
+
+                    {item.subLabel && (
+                        <Block
+                            data-element="select-item-sublabel"
+                            data-id={item.subLabel || 'select-item-sublabel'}
+                            ref={subLabelRef}
+                            overflow="hidden"
+                            style={{ minWidth: 0, maxWidth: '100%' }}
+                        >
+                            <PrimitiveText
+                                fontSize={itemTokens.description.fontSize}
+                                fontWeight={itemTokens.description.fontWeight}
+                                color={
+                                    itemTokens.description.color[
+                                        isSelected ? 'selected' : 'default'
+                                    ]
+                                }
+                                truncate={!item.disableTruncation}
+                                data-truncate="true"
+                                style={{
+                                    width: '100%',
+                                    minWidth: 0,
+                                    maxWidth: '100%',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }}
+                            >
+                                {item.subLabel}
+                            </PrimitiveText>
+                        </Block>
+                    )}
+                </Block>
+            </RadixMenu.Item>
+        )
+
+        if (hasTooltip) {
+            return (
+                <Tooltip
+                    content={tooltipContent}
+                    fullWidth
+                    side={
+                        (item.tooltipProps?.side as TooltipSide) ??
+                        TooltipSide.RIGHT
+                    }
+                    {...item.tooltipProps}
+                >
+                    {itemContent}
+                </Tooltip>
+            )
+        }
+        return itemContent
+    }
+)
+
+SelectItemV2.displayName = 'SelectItemV2'
+
+export default SelectItemV2

package/lib/components/SelectV2/index.ts

@@ -0,0 +1,11 @@
+export { default as SelectItemV2 } from './SelectItemV2'
+export type {
+    SelectItemV2Props,
+    SingleSelectItemV2Props,
+    MultiSelectItemV2Props,
+    SelectV2ItemType,
+    SelectV2MenuItemTokensBase,
+} from './types'
+export { SELECT_V2_MENU_Z_INDEX } from './selectV2.constants'
+export * from './selectV2.shared.types'
+export * from './useSelectV2MenuBehavior'

package/lib/components/SelectV2/selectV2.constants.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared constants for SelectV2-family components.
+ *
+ * Kept as constants (not theme tokens) because layering/z-index is behavioral
+ * infrastructure, not a visual theme primitive.
+ */
+export const SELECT_V2_MENU_Z_INDEX = 101

package/lib/components/SelectV2/selectV2.shared.types.ts

@@ -0,0 +1,113 @@
+import type {
+    ReactNode,
+    ReactElement,
+    CSSProperties,
+    KeyboardEvent,
+    RefObject,
+} from 'react'
+import type { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'
+import type { SkeletonVariant } from '../Skeleton'
+import type { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
+
+export enum SelectV2Alignment {
+    START = 'start',
+    CENTER = 'center',
+    END = 'end',
+}
+
+export enum SelectV2Variant {
+    CONTAINER = 'container',
+    NO_CONTAINER = 'no-container',
+}
+
+export enum SelectV2Size {
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+}
+
+export enum SelectV2Side {
+    TOP = 'top',
+    LEFT = 'left',
+    RIGHT = 'right',
+    BOTTOM = 'bottom',
+}
+export type SelectV2SkeletonProps = {
+    count?: number
+    show?: boolean
+    variant?: SkeletonVariant
+}
+
+export type SelectV2TooltipProps = {
+    side?: TooltipSide
+    align?: TooltipAlign
+    size?: TooltipSize
+    showArrow?: boolean
+    delayDuration?: number
+    offset?: number
+}
+
+export type SelectV2BaseItemType = {
+    label: string
+    value: string
+    checked?: boolean
+    subLabel?: string
+    slot1?: ReactNode
+    slot2?: ReactNode
+    slot3?: ReactNode
+    slot4?: ReactNode
+    disabled?: boolean
+    onClick?: () => void
+    tooltip?: string | ReactNode
+    tooltipProps?: SelectV2TooltipProps
+    disableTruncation?: boolean
+}
+
+export type SelectV2FlattenedItemBase<T = unknown> = {
+    id: string
+    type: 'item' | 'label' | 'separator'
+    item?: T
+    label?: string
+    groupId?: number
+}
+
+export type SelectV2PopoverPositioningProps = {
+    alignment?: SelectV2Alignment
+    side?: SelectV2Side
+    sideOffset?: number
+    alignOffset?: number
+    collisionBoundary?: DropdownMenuContentProps['collisionBoundary']
+    minPopoverWidth?: number
+    maxPopoverWidth?: number
+    maxPopoverHeight?: number
+}
+
+export type SelectV2VirtualizationProps = {
+    enableVirtualization?: boolean
+    virtualListItemHeight?: number
+    virtualListOverscan?: number
+}
+
+export type SelectV2InfiniteScrollProps = {
+    onEndReached?: () => void
+    endReachedThreshold?: number
+    hasMore?: boolean
+    loadingComponent?: ReactNode
+}
+
+export type SelectV2MenuRootPropsBase = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    disabled?: boolean
+    trigger: ReactElement
+    menuId?: string
+    alignment: SelectV2Alignment
+    side: SelectV2Side
+    sideOffset: number
+    alignOffset: number
+    collisionBoundary?: DropdownMenuContentProps['collisionBoundary']
+    contentStyle: CSSProperties
+    onContentKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void
+    contentRef?: RefObject<HTMLDivElement | null>
+    children: ReactNode
+}

package/lib/components/SelectV2/selectV2.tokenStates.ts

@@ -0,0 +1,15 @@
+export type SelectV2TriggerStates =
+    | 'open'
+    | 'closed'
+    | 'hover'
+    | 'focus'
+    | 'error'
+
+export type SelectV2ItemStates =
+    | 'default'
+    | 'hover'
+    | 'active'
+    | 'focus'
+    | 'focusVisible'
+    | 'disabled'
+    | 'selected'

package/lib/components/SelectV2/types.ts

@@ -0,0 +1,115 @@
+import type { ReactNode } from 'react'
+import type { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
+import type { SingleSelectV2MenuItemTokensType } from '../SingleSelectV2/singleSelectV2.tokens'
+import type { MultiSelectV2TokensType } from '../MultiSelectV2/multiSelectV2.tokens'
+import type { CSSObject } from 'styled-components'
+
+// ---------------------------------------------------------------------------
+// Shared item type (used by SelectItemV2 and MultiSelectItemV2)
+// ---------------------------------------------------------------------------
+
+/** Item type for SelectV2-family components. */
+export type SelectV2ItemType = {
+    label: string
+    value: string
+    checked?: boolean
+    subLabel?: string
+    slot1?: ReactNode
+    slot2?: ReactNode
+    slot3?: ReactNode
+    slot4?: ReactNode
+    disabled?: boolean
+    onClick?: () => void
+    subMenu?: SelectV2ItemType[]
+    tooltip?: string | ReactNode
+    tooltipProps?: {
+        side?: TooltipSide
+        align?: TooltipAlign
+        size?: TooltipSize
+        showArrow?: boolean
+        delayDuration?: number
+        offset?: number
+    }
+    disableTruncation?: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Unified menu-item token shape
+// Both SSV2 and MSV2 item tokens are compatible with this base after the
+// optionText→option rename in SSV2 tokens.
+// ---------------------------------------------------------------------------
+
+type SelectV2ItemStateToken<T> = {
+    default: T
+    hover: T
+    active: T
+    focus: T
+    focusVisible: T
+    disabled: T
+    selected: T
+}
+
+export type SelectV2MenuItemTokensBase = {
+    paddingTop: CSSObject['paddingTop']
+    paddingRight: CSSObject['paddingRight']
+    paddingBottom: CSSObject['paddingBottom']
+    paddingLeft: CSSObject['paddingLeft']
+    margin: CSSObject['margin']
+    borderRadius: CSSObject['borderRadius']
+    gap: CSSObject['gap']
+    backgroundColor: SelectV2ItemStateToken<CSSObject['backgroundColor']>
+    /** Option label text styles. Key is `option` in both V2 token types. */
+    option: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: SelectV2ItemStateToken<CSSObject['color']>
+    }
+    description: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: SelectV2ItemStateToken<CSSObject['color']>
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Discriminated-union props for the unified SelectItemV2 component
+// ---------------------------------------------------------------------------
+
+type SelectItemV2BaseProps = {
+    item: SelectV2ItemType
+    onSelect: (value: string) => void
+    itemTokens: SelectV2MenuItemTokensBase
+    index?: number
+    selectedPosition?: 'first' | 'middle' | 'last' | 'only' | 'none'
+    className?: string
+}
+
+/** Single-select mode: one value selected at a time; optional checkmark. */
+export type SingleSelectItemV2Props = SelectItemV2BaseProps & {
+    mode: 'single'
+    selected: string
+    showCheckmark?: boolean
+}
+
+/** Multi-select mode: multiple values; renders a Checkbox. */
+export type MultiSelectItemV2Props = SelectItemV2BaseProps & {
+    mode: 'multi'
+    selectedValues: string[]
+}
+
+/** Discriminated union: covers both single and multi selection modes. */
+export type SelectItemV2Props = SingleSelectItemV2Props | MultiSelectItemV2Props
+
+// ---------------------------------------------------------------------------
+// Backward-compat named export aliases used by existing consumers
+// ---------------------------------------------------------------------------
+
+/** @deprecated Use SelectItemV2Props with mode="single" */
+export type SelectItemV2SingleProps = SingleSelectItemV2Props & {
+    itemTokens: SingleSelectV2MenuItemTokensType
+}
+
+/** @deprecated Use SelectItemV2Props with mode="multi" */
+export type MultiSelectItemV2LegacyProps = MultiSelectItemV2Props & {
+    itemTokens: MultiSelectV2TokensType['menu']['item']
+}