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

package/lib/components/VirtualList/VirtualList.tsx

@@ -0,0 +1,269 @@
+import React, {
+    useRef,
+    useState,
+    useEffect,
+    useCallback,
+    useMemo,
+    forwardRef,
+    useImperativeHandle,
+} from 'react'
+import type { VirtualListProps, VirtualListRef, VirtualListItem } from './types'
+import Block from '../../components/Primitives/Block/Block'
+import {
+    findStartNode,
+    findEndNode,
+    calculateChildPositions,
+    calculateTotalHeight,
+} from './utils'
+
+/* ---------------------------------------------
+ * Scroll-aware hook with rAF throttling
+ * ------------------------------------------- */
+function useScrollAware<T extends HTMLElement>() {
+    const ref = useRef<T>(null)
+    const [scrollTop, setScrollTop] = useState(0)
+    const rafId = useRef<number | null>(null)
+
+    const handleScroll = useCallback((event: Event) => {
+        if (rafId.current !== null) {
+            cancelAnimationFrame(rafId.current)
+        }
+
+        rafId.current = requestAnimationFrame(() => {
+            setScrollTop((event.target as T).scrollTop)
+            rafId.current = null
+        })
+    }, [])
+
+    useEffect(() => {
+        const el = ref.current
+        if (!el) return
+
+        setScrollTop(el.scrollTop)
+        el.addEventListener('scroll', handleScroll)
+
+        return () => {
+            el.removeEventListener('scroll', handleScroll)
+            if (rafId.current !== null) {
+                cancelAnimationFrame(rafId.current)
+            }
+        }
+    }, [handleScroll])
+
+    return [scrollTop, ref] as const
+}
+
+/* ---------------------------------------------
+ * VirtualList Component
+ * ------------------------------------------- */
+function VirtualListInner<T extends VirtualListItem>(
+    {
+        items,
+        renderItem,
+        height = 400,
+        itemHeight,
+        overscan = 20,
+        onScroll,
+        onEndReached,
+        endReachedThreshold = 200,
+        isLoading = false,
+        hasMore = false,
+        className,
+        style,
+    }: VirtualListProps<T>,
+    ref: React.Ref<VirtualListRef>
+) {
+    const [scrollTop, containerRef] = useScrollAware<HTMLDivElement>()
+    const [containerHeight, setContainerHeight] = useState(
+        typeof height === 'number' ? height : 400
+    )
+
+    const endReachedCalledRef = useRef(false)
+
+    /* ---------------------------------------------
+     * Measure container height
+     * ------------------------------------------- */
+    const rafRef = useRef<number | null>(null)
+
+    useEffect(() => {
+        const container = containerRef.current
+        if (!container) return
+
+        const updateHeight = () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current)
+            }
+
+            rafRef.current = requestAnimationFrame(() => {
+                if (containerRef.current) {
+                    setContainerHeight(containerRef.current.clientHeight)
+                }
+                rafRef.current = null
+            })
+        }
+
+        updateHeight()
+        const observer = new ResizeObserver(updateHeight)
+        observer.observe(container)
+
+        return () => {
+            observer.disconnect()
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current)
+            }
+        }
+    }, [containerRef])
+
+    /* ---------------------------------------------
+     * Virtualization calculations
+     * ------------------------------------------- */
+    const childPositions = useMemo(
+        () => calculateChildPositions(items.length, itemHeight),
+        [items.length, itemHeight]
+    )
+
+    const totalHeight = useMemo(
+        () => calculateTotalHeight(childPositions, items.length, itemHeight),
+        [childPositions, items.length, itemHeight]
+    )
+
+    const firstVisibleIndex = useMemo(() => {
+        if (!items.length) return 0
+        return findStartNode(scrollTop, childPositions, items.length)
+    }, [scrollTop, childPositions, items.length])
+
+    const startIndex = Math.max(0, firstVisibleIndex - overscan)
+
+    const lastVisibleIndex = useMemo(() => {
+        if (!containerHeight) return Math.min(20, items.length - 1)
+
+        return findEndNode(
+            childPositions,
+            firstVisibleIndex,
+            items.length,
+            containerHeight
+        )
+    }, [childPositions, firstVisibleIndex, items.length, containerHeight])
+
+    const endIndex = Math.min(items.length - 1, lastVisibleIndex + overscan)
+
+    const offsetY = childPositions[startIndex] ?? 0
+
+    /* ---------------------------------------------
+     * Render visible items
+     * ------------------------------------------- */
+    const visibleItems = useMemo(() => {
+        const rendered: React.ReactNode[] = []
+
+        for (let index = startIndex; index <= endIndex; index++) {
+            const item = items[index]
+            if (!item) continue
+
+            rendered.push(
+                <Block key={item.id ?? index}>
+                    {renderItem({ item, index })}
+                </Block>
+            )
+        }
+
+        return rendered
+    }, [items, startIndex, endIndex, renderItem])
+
+    /* ---------------------------------------------
+     * Scroll callbacks & infinite scroll
+     * ------------------------------------------- */
+    useEffect(() => {
+        onScroll?.(scrollTop)
+
+        if (
+            hasMore &&
+            !isLoading &&
+            onEndReached &&
+            !endReachedCalledRef.current
+        ) {
+            const distanceFromBottom =
+                totalHeight - (scrollTop + containerHeight)
+
+            if (distanceFromBottom < endReachedThreshold) {
+                endReachedCalledRef.current = true
+                onEndReached()
+            }
+        }
+    }, [
+        scrollTop,
+        onScroll,
+        hasMore,
+        isLoading,
+        onEndReached,
+        totalHeight,
+        containerHeight,
+        endReachedThreshold,
+    ])
+
+    useEffect(() => {
+        if (!isLoading) {
+            endReachedCalledRef.current = false
+        }
+    }, [isLoading])
+
+    /* ---------------------------------------------
+     * Imperative API
+     * ------------------------------------------- */
+    useImperativeHandle(
+        ref,
+        () => ({
+            scrollTo(offset: number) {
+                containerRef.current?.scrollTo({ top: offset })
+            },
+            scrollToIndex(index: number) {
+                const top = childPositions[index]
+                if (top !== undefined) {
+                    containerRef.current?.scrollTo({ top })
+                }
+            },
+        }),
+        [childPositions, containerRef]
+    )
+
+    /* ---------------------------------------------
+     * Render
+     * ------------------------------------------- */
+    return (
+        <Block
+            ref={containerRef}
+            className={className}
+            style={{
+                height,
+                overflow: 'auto',
+                position: 'relative',
+                ...style,
+            }}
+        >
+            <Block
+                style={{
+                    height: totalHeight,
+                    position: 'relative',
+                    overflow: 'hidden',
+                }}
+            >
+                <Block
+                    style={{
+                        transform: `translateY(${offsetY}px)`,
+                        willChange: 'transform',
+                    }}
+                >
+                    {visibleItems}
+                </Block>
+            </Block>
+        </Block>
+    )
+}
+const VirtualList = forwardRef(VirtualListInner) as (<
+    T extends VirtualListItem,
+>(
+    props: VirtualListProps<T> & { ref?: React.Ref<VirtualListRef> }
+) => ReturnType<typeof VirtualListInner>) & { displayName?: string }
+
+VirtualList.displayName = 'VirtualList'
+
+export default VirtualList

package/lib/components/VirtualList/index.ts

@@ -0,0 +1,7 @@
+export { default as VirtualList } from './VirtualList'
+export type {
+    VirtualListItem,
+    VirtualListProps,
+    VirtualListRef,
+    VirtualListRenderParams,
+} from './types'

package/lib/components/VirtualList/types.ts

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export type VirtualListItem = {
+    id: string | number
+    [key: string]: unknown
+}
+
+export type VirtualListRenderParams<T> = {
+    item: T
+    index: number
+}
+
+export type VirtualListProps<T> = {
+    items: T[]
+    renderItem: (params: VirtualListRenderParams<T>) => React.ReactNode
+    height?: number | string
+    itemHeight?: number
+    overscan?: number // Number of items to render outside viewport
+    onScroll?: (scrollTop: number) => void
+    onEndReached?: () => void
+    endReachedThreshold?: number // Distance from bottom to trigger onEndReached
+    isLoading?: boolean
+    hasMore?: boolean
+    className?: string
+    style?: React.CSSProperties
+}
+
+export type VirtualListRef = {
+    scrollTo: (offset: number) => void
+    scrollToIndex: (index: number) => void
+}

package/lib/components/VirtualList/utils.ts

@@ -0,0 +1,169 @@
+export const isBrowser = typeof window !== 'undefined'
+
+/**
+ * Binary search to find the first visible node
+ */
+export function findStartNode(
+    scrollTop: number,
+    nodePositions: number[],
+    itemCount: number
+): number {
+    let startRange = 0
+    let endRange = itemCount - 1
+
+    while (endRange !== startRange) {
+        const middle = Math.floor((endRange - startRange) / 2 + startRange)
+
+        if (
+            nodePositions[middle] <= scrollTop &&
+            nodePositions[middle + 1] > scrollTop
+        ) {
+            return middle
+        }
+
+        if (middle === startRange) {
+            // Edge case - start and end range are consecutive
+            return endRange
+        } else {
+            if (nodePositions[middle] <= scrollTop) {
+                startRange = middle
+            } else {
+                endRange = middle
+            }
+        }
+    }
+    return 0
+}
+
+/**
+ * Find the last visible node
+ */
+export function findEndNode(
+    nodePositions: number[],
+    startNode: number,
+    itemCount: number,
+    viewportHeight: number
+): number {
+    let endNode
+    for (endNode = startNode; endNode < itemCount; endNode++) {
+        if (
+            nodePositions[endNode] >
+            nodePositions[startNode] + viewportHeight
+        ) {
+            return endNode
+        }
+    }
+    return endNode
+}
+
+/**
+ * Calculate which items should be visible based on scroll position
+ */
+export function calculateVisibleRange(
+    scrollTop: number,
+    containerHeight: number,
+    itemOffsets: number[],
+    itemsLength: number,
+    overscan: number
+): { startIndex: number; endIndex: number } {
+    if (!containerHeight || itemsLength === 0) {
+        return { startIndex: 0, endIndex: Math.min(20, itemsLength - 1) }
+    }
+
+    const viewportTop = scrollTop
+    const viewportBottom = scrollTop + containerHeight
+
+    // Find start index
+    let startIndex = 0
+    for (let i = 0; i < itemOffsets.length; i++) {
+        if (itemOffsets[i] >= viewportTop) {
+            startIndex = Math.max(0, i - overscan)
+            break
+        }
+    }
+
+    // Find end index
+    let endIndex = itemsLength - 1
+    for (let i = startIndex; i < itemOffsets.length; i++) {
+        if (itemOffsets[i] > viewportBottom) {
+            endIndex = Math.min(itemsLength - 1, i + overscan)
+            break
+        }
+    }
+
+    return { startIndex, endIndex }
+}
+
+/**
+ * Calculate child positions for virtual list items
+ */
+export function calculateChildPositions(
+    itemsLength: number,
+    itemHeight: number | undefined,
+    defaultHeight: number = 50
+): number[] {
+    if (!itemsLength) return [0]
+
+    const results = new Array(itemsLength)
+    results[0] = 0
+    const height = itemHeight || defaultHeight
+
+    for (let i = 1; i < itemsLength; i++) {
+        results[i] = results[i - 1] + height
+    }
+
+    return results
+}
+
+/**
+ * Calculate total height based on child positions and item height
+ */
+export function calculateTotalHeight(
+    childPositions: number[],
+    itemsLength: number,
+    itemHeight: number | undefined,
+    defaultHeight: number = 50
+): number {
+    if (!childPositions.length || !itemsLength) return 0
+    return childPositions[itemsLength - 1] + (itemHeight || defaultHeight)
+}
+
+/**
+ * Calculate visible range with overscan
+ */
+export function calculateVisibleNodes(
+    firstVisibleNode: number,
+    lastVisibleNode: number,
+    itemsLength: number,
+    overscan: number
+): { startNode: number; endNode: number; visibleNodeCount: number } {
+    const startNode = Math.max(0, firstVisibleNode - overscan)
+    const endNode = Math.min(itemsLength - 1, lastVisibleNode + overscan)
+    const visibleNodeCount = Math.max(0, endNode - startNode + 1)
+
+    return { startNode, endNode, visibleNodeCount }
+}
+
+/**
+ * Calculate total height and offsets for all items
+ */
+export function calculateItemPositions(
+    itemsLength: number,
+    itemHeight: number | undefined,
+    measuredHeights: Map<number, number>,
+    defaultHeight: number = 50
+): { totalHeight: number; itemOffsets: number[] } {
+    const offsets: number[] = []
+    let currentOffset = 0
+
+    for (let i = 0; i < itemsLength; i++) {
+        offsets.push(currentOffset)
+        const height = itemHeight || measuredHeights.get(i) || defaultHeight
+        currentOffset += height
+    }
+
+    return {
+        totalHeight: currentOffset,
+        itemOffsets: offsets,
+    }
+}

package/lib/components/animations/ChevronAnimation/ChevronAnimation.tsx

@@ -0,0 +1,128 @@
+import { forwardRef } from 'react'
+import { styled } from 'styled-components'
+import { getChevronTransform, getChevronSize } from './utils'
+import {
+    ChevronAnimationProps,
+    ChevronAnimationDirection,
+    ChevronAnimationVariant,
+    ChevronAnimationSize,
+} from './types'
+
+const StyledChevronContainer = styled.div<{
+    $isOpen: boolean
+    $direction: ChevronAnimationDirection
+    $variant: ChevronAnimationVariant
+    $size: ChevronAnimationSize
+    $disabled: boolean
+    $animationDuration: number
+    $color?: string
+}>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform ${(props) => props.$animationDuration}ms
+        cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transform-origin: center;
+    color: ${(props) => props.$color || 'inherit'};
+    width: ${(props) => getChevronSize(props.$size)};
+    height: ${(props) => getChevronSize(props.$size)};
+
+    /* Initial state based on isOpen prop */
+    transform: ${(props) =>
+        getChevronTransform(props.$direction, props.$variant, props.$isOpen)};
+
+    /* Radix UI data-state support - check parent trigger's data-state */
+    /* When parent trigger has data-state="open" */
+    button[data-state='open'] &,
+    [role='button'][data-state='open'] & {
+        transform: ${(props) =>
+            getChevronTransform(props.$direction, props.$variant, true)};
+    }
+
+    /* When parent trigger has data-state="closed" */
+    button[data-state='closed'] &,
+    [role='button'][data-state='closed'] & {
+        transform: ${(props) =>
+            getChevronTransform(props.$direction, props.$variant, false)};
+    }
+
+    /* Disabled state */
+    ${(props) =>
+        props.$disabled &&
+        `
+        opacity: 0.5;
+        cursor: not-allowed;
+    `}
+
+    /* Hover effect - only scale, maintain rotation from parent trigger's data-state */
+    /* When chevron is hovered AND parent trigger has data-state="open" - keep open rotation, add scale */
+    button[data-state='open'] &:hover:not([data-disabled="true"]),
+    [role='button'][data-state='open'] &:hover:not([data-disabled="true"]) {
+        transform: ${(props) =>
+                getChevronTransform(props.$direction, props.$variant, true)}
+            scale(1.05);
+    }
+
+    /* When chevron is hovered AND parent trigger has data-state="closed" - keep closed rotation, add scale */
+    button[data-state='closed'] &:hover:not([data-disabled='true']),
+    [role='button'][data-state='closed'] &:hover:not([data-disabled='true']) {
+        transform: ${(props) =>
+                getChevronTransform(props.$direction, props.$variant, false)}
+            scale(1.05);
+    }
+
+    /* Focus styles for accessibility */
+    &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+        border-radius: 2px;
+    }
+
+    /* Respect reduced motion preferences */
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+        &:hover:not([data-disabled='true']) {
+            transform: inherit;
+        }
+    }
+`
+
+const ChevronAnimation = forwardRef<HTMLDivElement, ChevronAnimationProps>(
+    (
+        {
+            children,
+            isOpen = false,
+            direction = ChevronAnimationDirection.DOWN,
+            variant = ChevronAnimationVariant.ROTATE_180,
+            size = ChevronAnimationSize.MEDIUM,
+            color,
+            className,
+            animationDuration = 300,
+            disabled = false,
+        },
+        ref
+    ) => {
+        return (
+            <StyledChevronContainer
+                ref={ref}
+                $isOpen={isOpen}
+                $direction={direction}
+                $variant={variant}
+                $size={size}
+                $disabled={disabled}
+                $animationDuration={animationDuration}
+                $color={color}
+                className={className}
+                data-disabled={disabled || undefined}
+                role="img"
+                aria-hidden="true"
+            >
+                {children}
+            </StyledChevronContainer>
+        )
+    }
+)
+
+ChevronAnimation.displayName = 'ChevronAnimation'
+
+export default ChevronAnimation

package/lib/components/animations/ChevronAnimation/index.ts

@@ -0,0 +1,3 @@
+export { default as ChevronAnimation } from './ChevronAnimation'
+export * from './types'
+export * from './utils'

package/lib/components/animations/ChevronAnimation/types.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react'
+
+export enum ChevronAnimationDirection {
+    DOWN = 'down',
+    RIGHT = 'right',
+    UP = 'up',
+    LEFT = 'left',
+}
+
+export enum ChevronAnimationVariant {
+    ROTATE_180 = 'rotate-180',
+    ROTATE_90 = 'rotate-90',
+    ROTATE_270 = 'rotate-270',
+}
+
+export enum ChevronAnimationSize {
+    SMALL = 'sm',
+    MEDIUM = 'md',
+    LARGE = 'lg',
+}
+
+export interface ChevronAnimationProps {
+    children: ReactNode
+    isOpen?: boolean
+    direction?: ChevronAnimationDirection
+    variant?: ChevronAnimationVariant
+    size?: ChevronAnimationSize
+    color?: string
+    className?: string
+    animationDuration?: number
+    disabled?: boolean
+}

package/lib/components/animations/ChevronAnimation/utils.ts

@@ -0,0 +1,41 @@
+import {
+    ChevronAnimationSize,
+    ChevronAnimationVariant,
+    ChevronAnimationDirection,
+} from './types'
+
+export const getChevronTransform = (
+    direction: ChevronAnimationDirection,
+    variant: ChevronAnimationVariant,
+    isOpen: boolean
+): string => {
+    if (!isOpen) return 'rotate(0deg)'
+
+    switch (variant) {
+        case ChevronAnimationVariant.ROTATE_180:
+            return 'rotate(180deg)'
+        case ChevronAnimationVariant.ROTATE_90:
+            return direction === ChevronAnimationDirection.RIGHT
+                ? 'rotate(90deg)'
+                : 'rotate(-90deg)'
+        case ChevronAnimationVariant.ROTATE_270:
+            return direction === ChevronAnimationDirection.RIGHT
+                ? 'rotate(270deg)'
+                : 'rotate(-270deg)'
+        default:
+            return 'rotate(0deg)'
+    }
+}
+
+export const getChevronSize = (size: ChevronAnimationSize): string => {
+    switch (size) {
+        case ChevronAnimationSize.SMALL:
+            return '12px'
+        case ChevronAnimationSize.MEDIUM:
+            return '16px'
+        case ChevronAnimationSize.LARGE:
+            return '20px'
+        default:
+            return '16px'
+    }
+}