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

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,6 +294,9 @@ const CalendarSection: React.FC<
     timezone,
     isSingleDatePicker,
     maxYearOffset,
+    minDate,
+    maxDate,
+    maxRangeDays,
 }) => (
     <Block flexGrow={1} minHeight={0} overflow="auto">
         <CalendarGrid
@@ -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(() => {
@@ -1279,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,