@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/lib/components/Charts/Charts.tsx

@@ -29,6 +29,7 @@ const Charts: React.FC<ChartsProps> = ({
     chartHeaderSlot,
     stackedLegends = false,
     stackedLegendsData,
+    showAllLegends = false,
     barsize,
     xAxis,
     yAxis,
@@ -404,6 +405,7 @@ const Charts: React.FC<ChartsProps> = ({
                                               hoveredKey={hoveredKey}
                                               activeKeys={selectedKeys}
                                               stacked={false}
+                                              showAllLegends={showAllLegends}
                                           />
                                       }
                                       <Block
@@ -566,6 +568,7 @@ const Charts: React.FC<ChartsProps> = ({
                                               stackedLegendsData={
                                                   stackedLegendsData
                                               }
+                                              showAllLegends={showAllLegends}
                                           />
                                       </Block>
                                   </Block>
@@ -714,6 +717,9 @@ const Charts: React.FC<ChartsProps> = ({
                                                   hoveredKey={hoveredKey}
                                                   activeKeys={selectedKeys}
                                                   stacked={false}
+                                                  showAllLegends={
+                                                      showAllLegends
+                                                  }
                                               />
                                           </Block>
                                       )}
@@ -827,6 +833,9 @@ const Charts: React.FC<ChartsProps> = ({
                                                           stackedLegendsData={
                                                               stackedLegendsData
                                                           }
+                                                          showAllLegends={
+                                                              showAllLegends
+                                                          }
                                                       />
                                                   )}
                                                   {stackedLegends && (
@@ -987,6 +996,7 @@ const Charts: React.FC<ChartsProps> = ({
                                               stackedLegendsData={
                                                   stackedLegendsData
                                               }
+                                              showAllLegends={showAllLegends}
                                           />
                                       </Block>
                                   </Block>

package/lib/components/Charts/index.ts

@@ -1,14 +1,24 @@
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as Charts } from './Charts'
 
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as CoreChart } from './CoreChart'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartContainer } from './ChartContainer'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartHeader } from './ChartHeader'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartLegends } from './ChartLegend'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyNode } from './SankeyNode'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyLink } from './SankeyLink'
 
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChart } from './BlendChart'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartContainer } from './BlendChartContainer'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartHeader } from './BlendChartHeader'
 export * from './chart.tokens'
 export * from './types'

package/lib/components/Charts/types.tsx

@@ -184,6 +184,7 @@ export type ChartsProps = {
     chartHeaderSlot: ReactNode
     stackedLegends?: boolean
     stackedLegendsData?: StackedLegendsDataPoint[]
+    showAllLegends?: boolean
     barsize?: number
     xAxis?: XAxisConfig
     yAxis?: YAxisConfig
@@ -236,6 +237,7 @@ export type ChartLegendsProps = {
     isSmallScreen?: boolean
     stackedLegendsData?: StackedLegendsDataPoint[]
     legends?: { title: string; total?: string }[]
+    showAllLegends?: boolean
 }
 
 export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {

package/lib/components/ChatInput/index.tsx

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ChatInputV2 instead. */
 export { default as ChatInput } from './ChatInput'
 export * from './chatInput.tokens'
 export * from './types'

package/lib/components/Checkbox/index.ts

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CheckboxV2 instead. */
 export { Checkbox } from './Checkbox'
 export * from './types'

package/lib/components/CodeEditor/index.ts

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CodeEditorV2 instead. */
 export { default as CodeEditor } from './CodeEditor'
 export * from './types'

package/lib/components/DataTable/DataTable.tsx

@@ -155,6 +155,8 @@ const DataTable = forwardRef(
             onInsertRight,
             onDeleteColumn,
             getRowStyle,
+            enableRowAnimation,
+            rowAnimationConfig,
             tableBodyHeight,
             mobileColumnsToShow,
             enablePivotTable = false,
@@ -1997,6 +1999,12 @@ const DataTable = forwardRef(
                                                           ) => boolean)
                                                         | undefined
                                                 }
+                                                enableRowAnimation={
+                                                    enableRowAnimation
+                                                }
+                                                rowAnimationConfig={
+                                                    rowAnimationConfig
+                                                }
                                             />
                                         )}
                                     </table>

package/lib/components/DataTable/TableBody/index.tsx

@@ -1,4 +1,11 @@
-import React, { forwardRef, useMemo, useRef, useEffect, useState } from 'react'
+import React, {
+    forwardRef,
+    useMemo,
+    useRef,
+    useEffect,
+    useState,
+    useCallback,
+} from 'react'
 import {
     Edit,
     Save,
@@ -18,6 +25,7 @@ import Menu from '../../Menu/Menu'
 import { MenuAlignment, MenuSide } from '../../Menu/types'
 import Skeleton from '../../Skeleton/Skeleton'
 import { getSkeletonState } from '../../Skeleton/utils'
+import { useRowFlip } from '../hooks/useRowFlip'
 
 import { Button, ButtonType, ButtonSize, ButtonSubType } from '../../Button'
 import { Checkbox, CheckboxSize } from '../../Checkbox'
@@ -571,6 +579,8 @@ const TableBody = forwardRef<
             isRowLoading,
             focusedCell,
             onCellFocus,
+            enableRowAnimation = false,
+            rowAnimationConfig,
         },
         ref
     ) => {
@@ -650,13 +660,33 @@ const TableBody = forwardRef<
             return `tbody-${len}-${firstId}-${lastId}`
         }, [currentData, dataVersion, idField])
 
+        const orderedRowIds = useMemo(
+            () => currentData.map((row) => String(row[idField])),
+            [currentData, idField]
+        )
+
+        const { register } = useRowFlip(
+            enableRowAnimation ? orderedRowIds : [],
+            rowAnimationConfig
+        )
+
+        const getFlipRefCallback = useCallback(
+            (rowId: string) => (el: HTMLTableRowElement | null) => {
+                if (!enableRowAnimation) return
+                register(rowId, el)
+            },
+            [enableRowAnimation, register]
+        )
+
+        const isPageTransition = !enableRowAnimation
+
         return (
             <motion.tbody
-                key={tbodyKey}
+                key={isPageTransition ? tbodyKey : undefined}
                 ref={ref}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.3 }}
+                initial={isPageTransition ? { opacity: 0 } : undefined}
+                animate={isPageTransition ? { opacity: 1 } : undefined}
+                transition={isPageTransition ? { duration: 0.3 } : undefined}
                 style={{
                     backgroundColor: FOUNDATION_THEME.colors.gray[0],
                 }}
@@ -685,7 +715,6 @@ const TableBody = forwardRef<
                           const isSelected = selectedRows[rowId] || false
                           const rowAriaLabel = `Row ${index + 1}${isSelected ? ', selected' : ''}${isExpanded ? ', expanded' : ''}`
 
-                          // Helper to calculate absolute column index
                           const getAbsoluteColIndex = (
                               relativeColIndex: number
                           ) => {
@@ -695,11 +724,18 @@ const TableBody = forwardRef<
                               return colIndex
                           }
 
-                          const rowKey = `${rowId}-${index}`
+                          const rowKey = enableRowAnimation
+                              ? rowId
+                              : `${rowId}-${index}`
 
                           return (
                               <React.Fragment key={rowKey}>
                                   <TableRow
+                                      ref={
+                                          enableRowAnimation
+                                              ? getFlipRefCallback(rowId)
+                                              : undefined
+                                      }
                                       $isClickable={!!onRowClick}
                                       $customBackgroundColor={
                                           rowStyling.backgroundColor
@@ -1156,6 +1192,9 @@ const TableBody = forwardRef<
                                                           $hasCustomBackground={
                                                               hasCustomBackground
                                                           }
+                                                          $isFirstRow={
+                                                              index === 0
+                                                          }
                                                           data-row-index={index}
                                                           data-col-index={
                                                               absoluteColIndex
@@ -1188,9 +1227,6 @@ const TableBody = forwardRef<
                                                                   getFrozenBodyStyles()),
                                                               outline: 'none',
                                                           }}
-                                                          $isFirstRow={
-                                                              index === 0
-                                                          }
                                                       >
                                                           <Skeleton
                                                               variant={
@@ -1537,6 +1573,7 @@ const TableBody = forwardRef<
                                                       $hasCustomBackground={
                                                           hasCustomBackground
                                                       }
+                                                      $isFirstRow={index === 0}
                                                       data-row-index={index}
                                                       data-col-index={
                                                           columnManagerColIndex
@@ -1562,7 +1599,6 @@ const TableBody = forwardRef<
                                                           )
                                                       }
                                                       role="gridcell"
-                                                      $isFirstRow={index === 0}
                                                       style={{
                                                           minWidth:
                                                               FOUNDATION_THEME

package/lib/components/DataTable/TableBody/types.ts

@@ -1,4 +1,8 @@
-import { ColumnDefinition, RowActionsConfig } from '../types'
+import {
+    ColumnDefinition,
+    RowActionsConfig,
+    RowAnimationConfig,
+} from '../types'
 import { MobileDataTableConfig } from '../hooks/useMobileDataTable'
 import type { SkeletonVariant } from '../../Skeleton/skeleton.tokens'
 
@@ -57,4 +61,6 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     isRowLoading?: (row: T, index: number) => boolean
     focusedCell?: { rowIndex: number; colIndex: number } | null
     onCellFocus?: (rowIndex: number, colIndex: number) => void
+    enableRowAnimation?: boolean
+    rowAnimationConfig?: RowAnimationConfig
 }

package/lib/components/DataTable/TableCell/index.tsx

@@ -576,8 +576,8 @@ const TableCell = forwardRef<
                     column.type === ColumnType.REACT_ELEMENT ||
                     (isEditing && column.isEditable)
                 }
-                $isFirstRow={isFirstRow}
                 $customBackgroundColor={customBackgroundColor}
+                $isFirstRow={isFirstRow}
                 $hasCustomBackground={hasCustomBackground}
                 data-row-index={dataRowIndex}
                 data-col-index={dataColIndex}

package/lib/components/DataTable/hooks/index.ts

@@ -1,2 +1,4 @@
 export { useMobileDataTable } from './useMobileDataTable'
 export type { MobileDataTableConfig } from './useMobileDataTable'
+export { useReducedMotion } from './useReducedMotion'
+export { useRowFlip } from './useRowFlip'

package/lib/components/DataTable/hooks/useReducedMotion.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react'
+
+export function useReducedMotion(): boolean {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+        if (typeof window === 'undefined') return false
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    })
+
+    useEffect(() => {
+        const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
+        const handler = (e: MediaQueryListEvent) => {
+            setPrefersReducedMotion(e.matches)
+        }
+        mql.addEventListener('change', handler)
+        return () => mql.removeEventListener('change', handler)
+    }, [])
+
+    return prefersReducedMotion
+}

package/lib/components/DataTable/hooks/useRowFlip.ts

@@ -0,0 +1,170 @@
+import { useRef, useLayoutEffect, useCallback, useMemo } from 'react'
+import { useReducedMotion } from './useReducedMotion'
+import type { RowAnimationConfig } from '../types'
+
+function toCssTransition(config: RowAnimationConfig): {
+    transition: string
+    duration: number
+} {
+    if (config.transitionType === 'bezier') {
+        const [p0, p1, p2, p3] = config.bezier
+        const cssBezier = `cubic-bezier(${p0}, ${p1}, ${p2}, ${p3})`
+        return {
+            duration: config.duration,
+            transition: `transform ${config.duration}s ${cssBezier}, opacity ${config.duration}s ${cssBezier}`,
+        }
+    }
+
+    const cssBezier = `cubic-bezier(0.32, 0.72, 0, 1)`
+    const transition = `transform 0.35s ${cssBezier}, opacity 0.35s ${cssBezier}`
+    return {
+        duration: 0.35,
+        transition,
+    }
+}
+
+interface UseRowFlipReturn {
+    register: (id: string, el: HTMLTableRowElement | null) => void
+}
+
+export function useRowFlip(
+    orderedIds: string[],
+    animationConfig?: RowAnimationConfig
+): UseRowFlipReturn {
+    const elementsRef = useRef<Map<string, HTMLTableRowElement>>(new Map())
+    const prevTopsRef = useRef<Map<string, number>>(new Map())
+    const prevIdsRef = useRef<Set<string>>(new Set())
+    const configRef = useRef<RowAnimationConfig | undefined>(animationConfig)
+    const orderedIdsRef = useRef(orderedIds)
+    const prefersReducedMotion = useReducedMotion()
+    const cleanupTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const serializedOrderedIds = useMemo(
+        () => JSON.stringify(orderedIds),
+        [orderedIds]
+    )
+
+    configRef.current = animationConfig
+    orderedIdsRef.current = orderedIds
+
+    const register = useCallback(
+        (id: string, el: HTMLTableRowElement | null) => {
+            if (el === null) {
+                elementsRef.current.delete(id)
+            } else {
+                elementsRef.current.set(id, el)
+            }
+        },
+        []
+    )
+
+    useLayoutEffect(() => {
+        const currentOrderedIds = orderedIdsRef.current
+        const currentConfig = configRef.current
+
+        if (prefersReducedMotion) {
+            const newTops = new Map<string, number>()
+            for (const id of currentOrderedIds) {
+                const el = elementsRef.current.get(id)
+                if (el) {
+                    newTops.set(id, el.getBoundingClientRect().top)
+                }
+            }
+            prevTopsRef.current = newTops
+            prevIdsRef.current = new Set(currentOrderedIds)
+            return
+        }
+
+        const currentTops = new Map<string, number>()
+        for (const id of currentOrderedIds) {
+            const el = elementsRef.current.get(id)
+            if (el) {
+                currentTops.set(id, el.getBoundingClientRect().top)
+            }
+        }
+
+        if (!currentConfig) {
+            prevTopsRef.current = currentTops
+            prevIdsRef.current = new Set(currentOrderedIds)
+            return
+        }
+
+        const { transition: cssTransition, duration } =
+            toCssTransition(currentConfig)
+        const enterDuration = currentConfig.enterDuration
+        const enterOffset = currentConfig.enterOffset
+
+        const prevIds = prevIdsRef.current
+        const newRowIdSet = new Set(
+            currentOrderedIds.filter((id) => !prevIds.has(id))
+        )
+
+        for (const [id, newTop] of currentTops) {
+            if (newRowIdSet.has(id)) continue
+
+            const prevTop = prevTopsRef.current.get(id)
+            if (prevTop === undefined) continue
+
+            const delta = prevTop - newTop
+            if (Math.abs(delta) < 1) continue
+
+            const el = elementsRef.current.get(id)
+            if (!el) continue
+
+            el.style.transition = 'none'
+            el.style.transform = `translateY(${delta}px)`
+
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.style.transition = cssTransition
+                    el.style.transform = ''
+                })
+            })
+        }
+
+        for (const id of newRowIdSet) {
+            const el = elementsRef.current.get(id)
+            if (!el) continue
+
+            el.style.transition = 'none'
+            el.style.transform = `translateY(${enterOffset}px)`
+            el.style.opacity = '0'
+
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.style.transition = `transform ${enterDuration}s cubic-bezier(0.32, 0.72, 0, 1), opacity ${enterDuration}s cubic-bezier(0.32, 0.72, 0, 1)`
+                    el.style.transform = ''
+                    el.style.opacity = '1'
+                })
+            })
+        }
+
+        const cleanupTimeout = Math.max(duration, enterDuration) * 1000 + 50
+
+        if (cleanupTimeoutRef.current) {
+            clearTimeout(cleanupTimeoutRef.current)
+        }
+
+        cleanupTimeoutRef.current = setTimeout(() => {
+            for (const id of currentOrderedIds) {
+                const el = elementsRef.current.get(id)
+                if (el) {
+                    el.style.transition = ''
+                    el.style.transform = ''
+                    el.style.opacity = ''
+                }
+            }
+        }, cleanupTimeout)
+
+        prevTopsRef.current = currentTops
+        prevIdsRef.current = new Set(currentOrderedIds)
+
+        return () => {
+            if (cleanupTimeoutRef.current) {
+                clearTimeout(cleanupTimeoutRef.current)
+                cleanupTimeoutRef.current = null
+            }
+        }
+    }, [serializedOrderedIds, prefersReducedMotion])
+
+    return { register }
+}

package/lib/components/DataTable/types.ts

@@ -368,6 +368,35 @@ export type RowSelectionConfig<T extends Record<string, unknown>> = {
     disabledText?: (row: T, index: number) => string
 }
 
+type BaseRowAnimationConfig = {
+    /** Enter animation duration in seconds. */
+    enterDuration: number
+    /** Enter animation Y offset in pixels. */
+    enterOffset: number
+}
+
+export type RowAnimationConfig = BaseRowAnimationConfig &
+    (
+        | {
+              /** Transition type for layout animations. */
+              transitionType: 'bezier'
+              /** Bezier duration in seconds. */
+              duration: number
+              /** Bezier easing curve as [x1, y1, x2, y2] cubic-bezier control points. */
+              bezier: [number, number, number, number]
+          }
+        | {
+              /** Transition type for layout animations. */
+              transitionType: 'spring'
+              /** Spring stiffness. */
+              stiffness: number
+              /** Spring damping. */
+              damping: number
+              /** Spring mass. */
+              mass: number
+          }
+    )
+
 export type DataTableProps<T extends Record<string, unknown>> = {
     data: T[]
     columns: ColumnDefinition<T>[]
@@ -477,6 +506,9 @@ export type DataTableProps<T extends Record<string, unknown>> = {
 
     getRowStyle?: (row: T, index: number) => React.CSSProperties
 
+    enableRowAnimation?: boolean
+    rowAnimationConfig?: RowAnimationConfig
+
     tableBodyHeight?: string | number
 
     // Mobile configuration

package/lib/components/DateRangePicker/CalendarGrid.tsx

@@ -9,7 +9,11 @@ import {
 } from 'react'
 import styled, { CSSObject } from 'styled-components'
 import { motion } from 'framer-motion'
-import { DateRange, CustomRangeConfig } from './types'
+import {
+    DateRange,
+    CustomRangeConfig,
+    CustomDateDisableFunction,
+} from './types'
 import { CalendarTokenType } from './dateRangePicker.tokens'
 import Block from '../Primitives/Block/Block'
 import Skeleton from '../Skeleton/Skeleton'
@@ -36,13 +40,16 @@ type CalendarGridProps = {
     disablePastDates?: boolean
     hideFutureDates?: boolean
     hidePastDates?: boolean
-    customDisableDates?: (date: Date) => boolean
+    customDisableDates?: CustomDateDisableFunction
     customRangeConfig?: CustomRangeConfig
     showDateTimePicker?: boolean
     resetScrollPosition?: number // Used to trigger scroll reset when popover reopens
     timezone?: string
     isSingleDatePicker?: boolean
     maxYearOffset?: number
+    minDate?: Date
+    maxDate?: Date
+    maxRangeDays?: number
 }
 
 const CONTAINER_HEIGHT = 340
@@ -239,6 +246,9 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
             timezone,
             isSingleDatePicker,
             maxYearOffset,
+            minDate,
+            maxDate,
+            maxRangeDays,
         },
         ref
     ) => {
@@ -379,7 +389,11 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                     isDoubleClick,
                     timezone,
                     selectedRange,
-                    isSingleDatePicker
+                    isSingleDatePicker,
+                    minDate,
+                    maxDate,
+                    customDisableDates,
+                    maxRangeDays
                 )
 
                 if (newRange) {
@@ -395,6 +409,10 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                 customRangeConfig,
                 onDateSelect,
                 timezone,
+                minDate,
+                maxDate,
+                customDisableDates,
+                maxRangeDays,
             ]
         )
 
@@ -474,8 +492,14 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                 e: React.KeyboardEvent<HTMLElement>,
                 year: number,
                 month: number,
-                day: number
+                day: number,
+                isDisabled: boolean = false
             ) => {
+                if (isDisabled && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault()
+                    return
+                }
+
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault()
                     handleDateClick(year, month, day, false)
@@ -657,7 +681,10 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                         calendarToken,
                                                         customDisableDates,
                                                         timezone,
-                                                        isSingleDatePicker
+                                                        isSingleDatePicker,
+                                                        minDate,
+                                                        maxDate,
+                                                        maxRangeDays
                                                     )
 
                                                 const isSelected =
@@ -800,6 +827,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                             isDisabled
                                                         }
                                                         onClick={() =>
+                                                            !isDisabled &&
                                                             handleDateClick(
                                                                 year,
                                                                 month,
@@ -808,6 +836,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                             )
                                                         }
                                                         onDoubleClick={() =>
+                                                            !isDisabled &&
                                                             handleDateClick(
                                                                 year,
                                                                 month,
@@ -820,7 +849,8 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                                 e,
                                                                 year,
                                                                 month,
-                                                                day
+                                                                day,
+                                                                isDisabled
                                                             )
                                                         }
                                                         data-element="days"