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

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
@@ -129,6 +136,7 @@ const CalendarSkeleton = ({
         <Block
             style={{
                 maxHeight: CONTAINER_HEIGHT,
+                height: '100%',
                 padding: FOUNDATION_THEME.unit[16],
             }}
         >
@@ -238,6 +246,9 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
             timezone,
             isSingleDatePicker,
             maxYearOffset,
+            minDate,
+            maxDate,
+            maxRangeDays,
         },
         ref
     ) => {
@@ -378,7 +389,11 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                     isDoubleClick,
                     timezone,
                     selectedRange,
-                    isSingleDatePicker
+                    isSingleDatePicker,
+                    minDate,
+                    maxDate,
+                    customDisableDates,
+                    maxRangeDays
                 )
 
                 if (newRange) {
@@ -394,6 +409,10 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                 customRangeConfig,
                 onDateSelect,
                 timezone,
+                minDate,
+                maxDate,
+                customDisableDates,
+                maxRangeDays,
             ]
         )
 
@@ -473,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)
@@ -656,7 +681,10 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                         calendarToken,
                                                         customDisableDates,
                                                         timezone,
-                                                        isSingleDatePicker
+                                                        isSingleDatePicker,
+                                                        minDate,
+                                                        maxDate,
+                                                        maxRangeDays
                                                     )
 
                                                 const isSelected =
@@ -799,6 +827,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                             isDisabled
                                                         }
                                                         onClick={() =>
+                                                            !isDisabled &&
                                                             handleDateClick(
                                                                 year,
                                                                 month,
@@ -807,6 +836,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                             )
                                                         }
                                                         onDoubleClick={() =>
+                                                            !isDisabled &&
                                                             handleDateClick(
                                                                 year,
                                                                 month,
@@ -819,7 +849,8 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                                                                 e,
                                                                 year,
                                                                 month,
-                                                                day
+                                                                day,
+                                                                isDisabled
                                                             )
                                                         }
                                                         data-element="days"
@@ -918,6 +949,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
             <MotionBlock
                 style={{
                     maxHeight: CONTAINER_HEIGHT,
+                    height: '100%',
                     overflowY: 'auto',
                     overflow: 'auto',
                     position: 'relative',
@@ -985,6 +1017,7 @@ const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(
                     }}
                     style={{
                         maxHeight: CONTAINER_HEIGHT,
+                        height: '100%',
                         overflowY: 'auto',
                         overflow: 'auto',
                         position: 'relative',

package/lib/components/DateRangePicker/DateRangePicker.tsx

@@ -264,13 +264,16 @@ type CalendarSectionProps = {
     disablePastDates: boolean
     hideFutureDates: boolean
     hidePastDates: boolean
-    customDisableDates?: (date: Date) => boolean
+    customDisableDates?: (date: Date, currentRange?: DateRange) => boolean
     customRangeConfig?: import('./types').CustomRangeConfig
     onDateSelect: (range: DateRange) => void
     showDateTimePicker: boolean
     timezone?: string
     isSingleDatePicker?: boolean
     maxYearOffset?: number
+    minDate?: Date
+    maxDate?: Date
+    maxRangeDays?: number
 }
 
 const CalendarSection: React.FC<
@@ -291,8 +294,11 @@ const CalendarSection: React.FC<
     timezone,
     isSingleDatePicker,
     maxYearOffset,
+    minDate,
+    maxDate,
+    maxRangeDays,
 }) => (
-    <Block>
+    <Block flexGrow={1} minHeight={0} overflow="auto">
         <CalendarGrid
             selectedRange={selectedRange}
             onDateSelect={onDateSelect}
@@ -309,6 +315,9 @@ const CalendarSection: React.FC<
             timezone={timezone}
             isSingleDatePicker={isSingleDatePicker}
             maxYearOffset={maxYearOffset}
+            minDate={minDate}
+            maxDate={maxDate}
+            maxRangeDays={maxRangeDays}
         />
     </Block>
 )
@@ -386,6 +395,9 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
             hidePastDates = false,
             customDisableDates,
             customRangeConfig,
+            minDate,
+            maxDate,
+            maxRangeDays,
             triggerElement = null,
             useDrawerOnMobile = true,
             skipQuickFiltersOnMobile = false,
@@ -534,7 +546,11 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
                 setSelectedRange(normalizedRange)
                 setActivePreset(
                     normalizedRange
-                        ? detectPresetFromRange(normalizedRange, timezone)
+                        ? detectPresetFromRange(
+                              normalizedRange,
+                              timezone,
+                              presetConfigs
+                          )
                         : DateRangePreset.CUSTOM
                 )
                 setStartDate(
@@ -573,7 +589,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
                     error: 'none',
                 })
             },
-            [timezone, dateFormat]
+            [timezone, dateFormat, presetConfigs]
         )
 
         useEffect(() => {
@@ -1228,6 +1244,10 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
                         style={{
                             ...calendarToken.calendar,
                         }}
+                        maxHeight="var(--radix-popper-available-height)"
+                        display="flex"
+                        flexDirection="column"
+                        overflow="hidden"
                     >
                         {showDateInput && (
                             <DateInputsSection
@@ -1275,6 +1295,9 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
                             timezone={timezone}
                             isSingleDatePicker={isSingleDatePicker}
                             maxYearOffset={maxYearOffset}
+                            minDate={minDate}
+                            maxDate={maxDate}
+                            maxRangeDays={maxRangeDays}
                         />
 
                         <FooterControls

package/lib/components/DateRangePicker/types.ts

@@ -207,9 +207,13 @@ export type PresetsConfig = (
 /**
  * Function type for custom date disabling logic
  * @param date The date to check
+ * @param currentRange The current in-progress selected range (if any)
  * @returns true if the date should be disabled, false otherwise
  */
-export type CustomDateDisableFunction = (date: Date) => boolean
+export type CustomDateDisableFunction = (
+    date: Date,
+    currentRange?: DateRange
+) => boolean
 
 /**
  * Function type for custom range calculation
@@ -317,6 +321,7 @@ export type DateRangePickerProps = {
     icon?: ReactNode
     minDate?: Date
     maxDate?: Date
+    maxRangeDays?: number
     dateFormat?: string
     allowSingleDateSelection?: boolean
     isSingleDatePicker?: boolean

package/lib/components/DateRangePicker/utils.ts

@@ -1040,6 +1040,10 @@ export const createSingleDateRange = (
     return { startDate, endDate }
 }
 
+/** Normalizes a date to midnight so comparisons only consider the calendar day. */
+const startOfDay = (date: Date): Date =>
+    new Date(date.getFullYear(), date.getMonth(), date.getDate())
+
 /**
  * Creates a date at start of day (00:00:00)
  */
@@ -1115,7 +1119,11 @@ export const handleCalendarDateClick = (
     isDoubleClick: boolean = false,
     timezone?: string,
     selectedRange?: DateRange,
-    isSingleDatePicker?: boolean
+    isSingleDatePicker?: boolean,
+    minDate?: Date,
+    maxDate?: Date,
+    customDisableDates?: (date: Date, currentRange?: DateRange) => boolean,
+    maxRangeDays?: number
 ): DateRange | null => {
     // Validate date is not disabled
     if (
@@ -1125,6 +1133,24 @@ export const handleCalendarDateClick = (
         return null
     }
 
+    // minDate / maxDate hard bounds (day-level comparison)
+    if (minDate && startOfDay(clickedDate) < startOfDay(minDate)) return null
+    if (maxDate && startOfDay(clickedDate) > startOfDay(maxDate)) return null
+    // customDisableDates honoured in the click path
+    if (customDisableDates && customDisableDates(clickedDate, selectedRange))
+        return null
+    // maxRangeDays: block clicks on days beyond start + maxRangeDays
+    if (maxRangeDays && selectedRange?.startDate && !selectedRange.endDate) {
+        const diffDays = Math.abs(
+            Math.floor(
+                (startOfDay(clickedDate).getTime() -
+                    startOfDay(selectedRange.startDate).getTime()) /
+                    (1000 * 60 * 60 * 24)
+            )
+        )
+        if (diffDays > maxRangeDays) return null
+    }
+
     // Create clean date without time components for comparison
     const clickedDateOnly = new Date(
         clickedDate.getFullYear(),
@@ -1504,15 +1530,33 @@ export const getDateCellStates = (
     today: Date,
     disableFutureDates: boolean = false,
     disablePastDates: boolean = false,
-    customDisableDates?: (date: Date) => boolean,
+    customDisableDates?: (date: Date, currentRange?: DateRange) => boolean,
     timezone?: string,
-    isSingleDatePicker?: boolean
+    isSingleDatePicker?: boolean,
+    minDate?: Date,
+    maxDate?: Date,
+    maxRangeDays?: number
 ) => {
     const isTodayDay = isDateToday(date, today)
+
+    // maxRangeDays: only active while a range is half-selected (start picked,
+    // end not yet chosen). Once both start and end are set, a new click resets
+    // to a fresh start, so capping is not needed there.
+    let isBeyondMaxRange = false
+    if (maxRangeDays && selectedRange?.startDate && !selectedRange.endDate) {
+        const start = selectedRange.startDate
+        const diffMs = startOfDay(date).getTime() - startOfDay(start).getTime()
+        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+        isBeyondMaxRange = Math.abs(diffDays) > maxRangeDays
+    }
+
     const isDisabled = Boolean(
         (disableFutureDates && date > today) ||
         (disablePastDates && date < today) ||
-        (customDisableDates && customDisableDates(date))
+        (minDate && startOfDay(date) < startOfDay(minDate)) ||
+        (maxDate && startOfDay(date) > startOfDay(maxDate)) ||
+        (customDisableDates && customDisableDates(date, selectedRange)) ||
+        isBeyondMaxRange
     )
 
     if (!selectedRange) {
@@ -2249,9 +2293,12 @@ export const calculateDayCellProps = (
     disableFutureDates: boolean,
     disablePastDates: boolean,
     calendarToken: CalendarTokenType,
-    customDisableDates?: (date: Date) => boolean,
+    customDisableDates?: (date: Date, currentRange?: DateRange) => boolean,
     timezone?: string,
-    isSingleDatePicker?: boolean
+    isSingleDatePicker?: boolean,
+    minDate?: Date,
+    maxDate?: Date,
+    maxRangeDays?: number
 ): {
     dateStates: ReturnType<typeof getDateCellStates>
     styles: Record<string, unknown>
@@ -2266,7 +2313,10 @@ export const calculateDayCellProps = (
         disablePastDates,
         customDisableDates,
         timezone,
-        isSingleDatePicker
+        isSingleDatePicker,
+        minDate,
+        maxDate,
+        maxRangeDays
     )
 
     const getCellStyles = () => {
@@ -3597,7 +3647,11 @@ export const handleCustomRangeCalendarDateClick = (
     isDoubleClick: boolean = false,
     timezone?: string,
     selectedRange?: DateRange,
-    isSingleDatePicker?: boolean
+    isSingleDatePicker?: boolean,
+    minDate?: Date,
+    maxDate?: Date,
+    customDisableDates?: (date: Date, currentRange?: DateRange) => boolean,
+    maxRangeDays?: number
 ): DateRange | null => {
     // Validate date is not disabled
     if (
@@ -3607,6 +3661,24 @@ export const handleCustomRangeCalendarDateClick = (
         return null
     }
 
+    // minDate / maxDate hard bounds (day-level comparison)
+    if (minDate && startOfDay(clickedDate) < startOfDay(minDate)) return null
+    if (maxDate && startOfDay(clickedDate) > startOfDay(maxDate)) return null
+    // customDisableDates honoured in the click path
+    if (customDisableDates && customDisableDates(clickedDate, selectedRange))
+        return null
+    // maxRangeDays: block clicks on days beyond start + maxRangeDays
+    if (maxRangeDays && selectedRange?.startDate && !selectedRange.endDate) {
+        const diffDays = Math.abs(
+            Math.floor(
+                (startOfDay(clickedDate).getTime() -
+                    startOfDay(selectedRange.startDate).getTime()) /
+                    (1000 * 60 * 60 * 24)
+            )
+        )
+        if (diffDays > maxRangeDays) return null
+    }
+
     // If no custom range config, use standard logic
     if (!customRangeConfig) {
         return handleCalendarDateClick(
@@ -3618,7 +3690,11 @@ export const handleCustomRangeCalendarDateClick = (
             isDoubleClick,
             timezone,
             selectedRange,
-            isSingleDatePicker
+            isSingleDatePicker,
+            minDate,
+            maxDate,
+            customDisableDates,
+            maxRangeDays
         )
     }
 
@@ -3666,7 +3742,11 @@ export const handleCustomRangeCalendarDateClick = (
                 isDoubleClick,
                 timezone,
                 selectedRange,
-                isSingleDatePicker
+                isSingleDatePicker,
+                minDate,
+                maxDate,
+                customDisableDates,
+                maxRangeDays
             )
         }
         endDate = calculatedDate
@@ -3681,7 +3761,11 @@ export const handleCustomRangeCalendarDateClick = (
             isDoubleClick,
             timezone,
             selectedRange,
-            isSingleDatePicker
+            isSingleDatePicker,
+            minDate,
+            maxDate,
+            customDisableDates,
+            maxRangeDays
         )
     }
 
@@ -3974,7 +4058,8 @@ export const matchesLastMonthPreset = (range: DateRange): boolean => {
  */
 export const detectPresetFromRange = (
     range: DateRange,
-    timezone?: string
+    timezone?: string,
+    presetConfigs?: CustomPresetConfig[]
 ): DateRangePreset => {
     if (!range.startDate || !range.endDate) {
         return DateRangePreset.CUSTOM
@@ -4119,6 +4204,32 @@ export const detectPresetFromRange = (
         return DateRangePreset.NEXT_12_MONTHS
     }
 
+    // Check custom preset definitions (from customPresets prop) before giving up.
+    if (presetConfigs && presetConfigs.length > 0) {
+        const toleranceMs =
+            DATE_RANGE_PICKER_CONSTANTS.PRESET_DETECTION_TOLERANCE_MS
+        for (const config of presetConfigs) {
+            const definition = getCustomPresetDefinition(
+                config.preset as string
+            )
+            if (!definition) continue
+
+            const presetRange = definition.getDateRange()
+            if (
+                presetRange.startDate &&
+                presetRange.endDate &&
+                Math.abs(
+                    range.startDate.getTime() - presetRange.startDate.getTime()
+                ) <= toleranceMs &&
+                Math.abs(
+                    range.endDate.getTime() - presetRange.endDate.getTime()
+                ) <= toleranceMs
+            ) {
+                return config.preset
+            }
+        }
+    }
+
     return DateRangePreset.CUSTOM
 }
 

package/lib/components/Directory/Directory.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { createRef, useEffect, useRef } from 'react'
 import type { DirectoryProps } from './types'
 import Section from './Section'
+import VirtualizedDirectory from './VirtualizedDirectory'
 import Block from '../Primitives/Block/Block'
 import { handleSectionNavigation, normalizeDirectoryData } from './utils'
 import { ActiveItemProvider } from './NavItem'
@@ -17,6 +18,14 @@ const Directory = ({
     onActiveItemChange,
     defaultActiveItem,
     iconOnlyMode = false,
+    showHierarchyLines = false,
+    hierarchyLineBorderRadius = 0,
+    expandedItems,
+    defaultExpandedItems,
+    onExpandedItemsChange,
+    onItemExpand,
+    enableVirtualization = false,
+    virtualization,
 }: DirectoryProps) => {
     const directoryData = normalizeDirectoryData(directoryDataProp)
     const sectionRefs = useRef<Array<React.RefObject<HTMLDivElement | null>>>(
@@ -30,6 +39,26 @@ const Directory = ({
         )
     }, [directoryData])
 
+    if (enableVirtualization && !iconOnlyMode) {
+        return (
+            <VirtualizedDirectory
+                directoryData={directoryData}
+                idPrefix={idPrefix}
+                activeItem={activeItem}
+                onActiveItemChange={onActiveItemChange}
+                defaultActiveItem={defaultActiveItem}
+                showHierarchyLines={showHierarchyLines}
+                hierarchyLineBorderRadius={hierarchyLineBorderRadius}
+                expandedItems={expandedItems}
+                defaultExpandedItems={defaultExpandedItems}
+                onExpandedItemsChange={onExpandedItemsChange}
+                onItemExpand={onItemExpand}
+                enableVirtualization={enableVirtualization}
+                virtualization={virtualization}
+            />
+        )
+    }
+
     return (
         <ActiveItemProvider
             activeItem={activeItem}
@@ -57,6 +86,8 @@ const Directory = ({
                         sectionIndex={sectionIndex}
                         idPrefix={idPrefix}
                         iconOnlyMode={iconOnlyMode}
+                        showHierarchyLines={showHierarchyLines}
+                        hierarchyLineBorderRadius={hierarchyLineBorderRadius}
                         onNavigateBetweenSections={(direction, currentIndex) =>
                             handleSectionNavigation(
                                 direction,