@juspay/blend-design-system 0.0.18 → 0.0.19-beta

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -1,4 +1,4 @@
-import { DateRange } from './types';
+import { DateRange, CustomRangeConfig } from './types';
 type CalendarGridProps = {
     selectedRange: DateRange;
     onDateSelect: (range: DateRange) => void;
@@ -8,6 +8,8 @@ type CalendarGridProps = {
     disablePastDates?: boolean;
     hideFutureDates?: boolean;
     hidePastDates?: boolean;
+    customDisableDates?: (date: Date) => boolean;
+    customRangeConfig?: CustomRangeConfig;
     showDateTimePicker?: boolean;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -28,6 +28,11 @@ export type CalendarTokenType = {
                 md: CSSObject['fontSize'];
                 lg: CSSObject['fontSize'];
             };
+            disabled: {
+                borderLeft: CSSObject['borderLeft'];
+                borderTop: CSSObject['borderTop'];
+                borderBottom: CSSObject['borderBottom'];
+            };
         };
         content: {
             padding: CSSObject['padding'];
@@ -164,6 +169,7 @@ export type CalendarTokenType = {
         disabled: {
             opacity: CSSObject['opacity'];
             cursor: CSSObject['cursor'];
+            border: CSSObject['border'];
         };
         borderRadiusWithPresets: CSSObject['borderRadius'];
         borderRadiusWithoutPresets: CSSObject['borderRadius'];

package/dist/components/DateRangePicker/types.d.ts

@@ -4,8 +4,10 @@ export declare enum DateRangePreset {
     TODAY = "today",
     YESTERDAY = "yesterday",
     TOMORROW = "tomorrow",
+    LAST_30_MINS = "last30Mins",
     LAST_1_HOUR = "last1Hour",
     LAST_6_HOURS = "last6Hours",
+    LAST_24_HOURS = "last24Hours",
     LAST_7_DAYS = "last7Days",
     LAST_30_DAYS = "last30Days",
     LAST_3_MONTHS = "last3Months",
@@ -137,6 +139,76 @@ export type PickerColumnData = {
     items: (string | number)[];
     selectedIndex: number;
 };
+/**
+ * Function type for custom date disabling logic
+ * @param date The date to check
+ * @returns true if the date should be disabled, false otherwise
+ */
+export type CustomDateDisableFunction = (date: Date) => boolean;
+/**
+ * Function type for custom range calculation
+ * @param selectedDate The date that was selected
+ * @param currentRange The current date range
+ * @param isStartDate Whether the selected date is for start or end
+ * @returns The new date range or null to use default behavior
+ */
+export type CustomRangeCalculationFunction = (selectedDate: Date, currentRange: DateRange, isStartDate: boolean) => DateRange | null;
+/**
+ * Configuration for automatic range calculation
+ */
+export type AutoRangeConfig = {
+    /** Number of days to add to start date for end date */
+    rangeDays?: number;
+    /** Number of hours to add to start date for end date */
+    rangeHours?: number;
+    /** Number of minutes to add to start date for end date */
+    rangeMinutes?: number;
+    /** Whether to include the start date in the range (true) or exclude it (false) */
+    includeStartDate?: boolean;
+    /** Custom function to calculate the range */
+    customCalculation?: CustomRangeCalculationFunction;
+};
+/**
+ * Function type for custom range calculation
+ * @param startDate The selected start date
+ * @param currentRange The current selected range (if any)
+ * @returns The calculated end date, or null to use default behavior
+ */
+export type CustomRangeCalculatorFunction = (startDate: Date, currentRange?: DateRange) => Date | null;
+/**
+ * Configuration for custom range behavior
+ */
+export type CustomRangeConfig = {
+    /**
+     * Function to calculate end date based on start date
+     */
+    calculateEndDate?: CustomRangeCalculatorFunction;
+    /**
+     * Fixed number of days for the range (alternative to calculateEndDate)
+     */
+    fixedDayRange?: number;
+    /**
+     * Reference date range to use for comparison/duration calculation
+     * When provided, the component will calculate a range with the same duration
+     */
+    referenceRange?: DateRange;
+    /**
+     * Number of days to go backward for backward ranges (e.g., last 5 days)
+     * Used when calculateEndDate returns the same date as clicked date
+     * @default 6
+     */
+    backwardDays?: number;
+    /**
+     * Whether to allow manual end date selection when using custom range logic
+     * @default false
+     */
+    allowManualEndDateSelection?: boolean;
+    /**
+     * Whether to apply custom range logic to preset selections
+     * @default false
+     */
+    applyToPresets?: boolean;
+};
 export type DateRangePickerProps = {
     value?: DateRange;
     onChange?: (range: DateRange) => void;
@@ -153,6 +225,8 @@ export type DateRangePickerProps = {
     disablePastDates?: boolean;
     hideFutureDates?: boolean;
     hidePastDates?: boolean;
+    customDisableDates?: CustomDateDisableFunction;
+    customRangeConfig?: CustomRangeConfig;
     triggerElement?: ReactNode;
     useDrawerOnMobile?: boolean;
     skipQuickFiltersOnMobile?: boolean;

package/dist/components/DateRangePicker/utils.d.ts

@@ -1,4 +1,4 @@
-import { DateRange, DateRangePreset, DateFormatConfig, CustomFormatFunction, HapticFeedbackType } from './types';
+import { DateRange, DateRangePreset, DateFormatConfig, CustomFormatFunction, HapticFeedbackType, CustomRangeConfig, CustomRangeCalculatorFunction } from './types';
 import { CalendarTokenType } from './dateRangePicker.tokens';
 /**
  * Formats a date according to the specified format
@@ -277,9 +277,10 @@ export declare const getScrollToMonth: (monthIndex: number, monthHeight: number)
  * @param today Today's date
  * @param disableFutureDates Whether future dates are disabled
  * @param disablePastDates Whether past dates are disabled
+ * @param customDisableDates Custom function to disable specific dates
  * @returns Object with all date states
  */
-export declare const getDateCellStates: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean) => {
+export declare const getDateCellStates: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customDisableDates?: (date: Date) => boolean) => {
     isStart: boolean;
     isEnd: boolean;
     isRangeDay: boolean;
@@ -473,9 +474,10 @@ export declare const createCalendarMonthData: (year: number, month: number, mont
  * @param disableFutureDates Whether future dates are disabled
  * @param disablePastDates Whether past dates are disabled
  * @param calendarToken Calendar token for styling
+ * @param customDisableDates Custom function to disable specific dates
  * @returns Day cell props
  */
-export declare const calculateDayCellProps: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates: boolean, disablePastDates: boolean, calendarToken: CalendarTokenType) => {
+export declare const calculateDayCellProps: (date: Date, selectedRange: DateRange, today: Date, disableFutureDates: boolean, disablePastDates: boolean, calendarToken: CalendarTokenType, customDisableDates?: (date: Date) => boolean) => {
     dateStates: ReturnType<typeof getDateCellStates>;
     styles: Record<string, unknown>;
     textColor: string | unknown;
@@ -727,3 +729,100 @@ export declare const matchesTomorrowPreset: (range: DateRange) => boolean;
  * Robust preset detection that works with both UTC and local timezone dates
  */
 export declare const detectPresetFromRange: (range: DateRange) => DateRangePreset;
+/**
+ * Applies custom range calculation logic to a selected start date
+ * @param startDate The selected start date
+ * @param customRangeConfig Custom range configuration
+ * @param currentRange Current selected range (optional)
+ * @returns Calculated range or null to use default behavior
+ */
+export declare const applyCustomRangeCalculation: (startDate: Date, customRangeConfig: CustomRangeConfig, currentRange?: DateRange) => DateRange | null;
+/**
+ * Enhanced calendar date click handler with custom range calculation support
+ * @param clickedDate The date that was clicked
+ * @param selectedRange Current selected range
+ * @param allowSingleDateSelection Whether single date selection is allowed
+ * @param today Today's date for validation
+ * @param disableFutureDates Whether future dates are disabled
+ * @param disablePastDates Whether past dates are disabled
+ * @param customRangeConfig Custom range configuration
+ * @param isDoubleClick Whether this is a double-click event
+ * @returns New date range or null if click should be ignored
+ */
+export declare const handleCustomRangeCalendarDateClick: (clickedDate: Date, selectedRange: DateRange, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customRangeConfig?: CustomRangeConfig, isDoubleClick?: boolean) => DateRange | null;
+/**
+ * Validates custom range configuration
+ * @param config Custom range configuration to validate
+ * @returns Validation result with error message if invalid
+ */
+export declare const validateCustomRangeConfig: (config: CustomRangeConfig) => {
+    isValid: boolean;
+    error?: string;
+};
+/**
+ * Creates common custom range calculation functions
+ */
+export declare const createCustomRangeCalculators: {
+    /**
+     * Creates a calculator for fixed number of days
+     * @param days Number of days for the range
+     * @returns Custom range calculator function
+     */
+    fixedDays: (days: number) => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for business days (excluding weekends)
+     * @param businessDays Number of business days
+     * @returns Custom range calculator function
+     */
+    businessDays: (businessDays: number) => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for end of week (Sunday)
+     * @returns Custom range calculator function
+     */
+    endOfWeek: () => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for end of month
+     * @returns Custom range calculator function
+     */
+    endOfMonth: () => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator for quarter end
+     * @returns Custom range calculator function
+     */
+    endOfQuarter: () => CustomRangeCalculatorFunction;
+    /**
+     * Creates a calculator that compares with another date range
+     * @param compareRange The range to compare with
+     * @returns Custom range calculator function
+     */
+    compareWithRange: (compareRange: DateRange) => CustomRangeCalculatorFunction;
+};
+/**
+ * Helper function to create common custom range configurations
+ */
+export declare const createCustomRangeConfigs: {
+    /**
+     * Fixed 5-day range
+     */
+    fiveDayRange: () => CustomRangeConfig;
+    /**
+     * Fixed 7-day range (week)
+     */
+    weekRange: () => CustomRangeConfig;
+    /**
+     * Business week (5 business days)
+     */
+    businessWeek: () => CustomRangeConfig;
+    /**
+     * Month range (start date to end of month)
+     */
+    monthRange: () => CustomRangeConfig;
+    /**
+     * Quarter range (start date to end of quarter)
+     */
+    quarterRange: () => CustomRangeConfig;
+    /**
+     * Flexible range with manual override
+     */
+    flexibleRange: (defaultDays: number) => CustomRangeConfig;
+};