@juspay/blend-design-system 0.0.18 → 0.0.19

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/QuickRangeSelector.d.ts

@@ -1,16 +1,18 @@
-import { DateRangePreset, DateRangePickerSize } from './types';
+import { DateRangePreset, DateRangePickerSize, CustomPresetConfig } from './types';
 type QuickRangeSelectorProps = {
     isOpen: boolean;
     onToggle: () => void;
     activePreset: DateRangePreset;
     onPresetSelect: (preset: DateRangePreset) => void;
     excludeCustom?: boolean;
+    customPresets?: CustomPresetConfig[];
     className?: string;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
     isDisabled?: boolean;
     size?: DateRangePickerSize;
     maxMenuHeight?: number;
+    isStandalone?: boolean;
 };
 declare const QuickRangeSelector: import('react').ForwardRefExoticComponent<QuickRangeSelectorProps & import('react').RefAttributes<HTMLDivElement>>;
 export default QuickRangeSelector;

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,10 +4,14 @@ export declare enum DateRangePreset {
     TODAY = "today",
     YESTERDAY = "yesterday",
     TOMORROW = "tomorrow",
+    LAST_30_MINUTES = "last30Minutes",
     LAST_1_HOUR = "last1Hour",
     LAST_6_HOURS = "last6Hours",
+    LAST_24_HOURS = "last24Hours",
     LAST_7_DAYS = "last7Days",
     LAST_30_DAYS = "last30Days",
+    THIS_MONTH = "thisMonth",
+    LAST_MONTH = "lastMonth",
     LAST_3_MONTHS = "last3Months",
     LAST_12_MONTHS = "last12Months",
     NEXT_7_DAYS = "next7Days",
@@ -137,11 +141,116 @@ export type PickerColumnData = {
     items: (string | number)[];
     selectedIndex: number;
 };
+/**
+ * Custom preset configuration for predefined presets
+ */
+export type CustomPresetConfig = {
+    preset: DateRangePreset;
+    label?: string;
+    visible?: boolean;
+};
+/**
+ * Custom preset definition for truly custom presets
+ */
+export type CustomPresetDefinition = {
+    id: string;
+    label: string;
+    getDateRange: () => DateRange;
+    visible?: boolean;
+};
+/**
+ * Presets configuration - can be predefined presets, custom configs, or custom definitions
+ */
+export type PresetsConfig = DateRangePreset[] | CustomPresetConfig[] | CustomPresetDefinition[] | (DateRangePreset | CustomPresetConfig | CustomPresetDefinition)[];
+/**
+ * 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;
+};
+/**
+ * Preset selection callback data
+ */
+export type PresetSelectionData = {
+    preset: DateRangePreset;
+    label: string;
+    dateRange: DateRange;
+    formattedStartDate: string;
+    formattedEndDate: string;
+    formattedStartTime: string;
+    formattedEndTime: string;
+};
 export type DateRangePickerProps = {
     value?: DateRange;
     onChange?: (range: DateRange) => void;
+    onPresetSelection?: (data: PresetSelectionData) => void;
     showDateTimePicker?: boolean;
     showPresets?: boolean;
+    customPresets?: PresetsConfig;
     placeholder?: string;
     isDisabled?: boolean;
     icon?: ReactNode;
@@ -153,6 +262,8 @@ export type DateRangePickerProps = {
     disablePastDates?: boolean;
     hideFutureDates?: boolean;
     hidePastDates?: boolean;
+    customDisableDates?: CustomDateDisableFunction;
+    customRangeConfig?: CustomRangeConfig;
     triggerElement?: ReactNode;
     useDrawerOnMobile?: boolean;
     skipQuickFiltersOnMobile?: boolean;
@@ -160,6 +271,7 @@ export type DateRangePickerProps = {
     formatConfig?: DateFormatConfig;
     triggerConfig?: TriggerConfig;
     maxMenuHeight?: number;
+    showPreset?: boolean;
 };
 export type PresetItemProps = {
     preset: DateRangePreset;

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, CustomPresetConfig, CustomPresetDefinition, PresetsConfig, CustomRangeConfig } 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;
@@ -703,6 +705,28 @@ export declare const shouldHideDateFromCalendar: (date: Date, today: Date, hideF
  * @returns New date range or null if click should be ignored
  */
 export declare const handleEnhancedCalendarDateClick: (clickedDate: Date, selectedRange: DateRange, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, isDoubleClick?: boolean) => DateRange | null;
+/**
+ * Validates custom range configuration
+ * @param config The custom range configuration to validate
+ * @returns Validation result
+ */
+export declare const validateCustomRangeConfig: (config: CustomRangeConfig) => {
+    isValid: boolean;
+    error?: string;
+};
+/**
+ * Handles calendar date click with custom range configuration 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;
 /**
  * Checks if two dates represent the same calendar day (ignoring time and timezone)
  */
@@ -727,3 +751,73 @@ 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;
+/**
+ * Default preset configuration for the DateRangePicker
+ */
+export declare const DEFAULT_PRESET_CONFIG: DateRangePreset[];
+/**
+ * Get custom preset definition by ID
+ */
+export declare const getCustomPresetDefinition: (id: string) => CustomPresetDefinition | undefined;
+/**
+ * Processes custom presets configuration and returns normalized preset configs
+ * @param customPresets User-provided presets configuration
+ * @returns Array of normalized CustomPresetConfig objects
+ */
+export declare const processCustomPresets: (customPresets?: PresetsConfig) => CustomPresetConfig[];
+/**
+ * Filters presets based on visibility and other criteria
+ * @param presetConfigs Array of preset configurations
+ * @param disableFutureDates Whether future date presets should be excluded
+ * @param disablePastDates Whether past date presets should be excluded
+ * @returns Array of visible and enabled presets
+ */
+export declare const getFilteredPresets: (presetConfigs: CustomPresetConfig[], disableFutureDates?: boolean, disablePastDates?: boolean) => DateRangePreset[];
+/**
+ * Gets the label for a preset, using custom label if provided
+ * @param preset The preset to get label for
+ * @param presetConfigs Array of preset configurations with potential custom labels
+ * @returns The label for the preset
+ */
+export declare const getPresetLabelWithCustom: (preset: DateRangePreset, presetConfigs?: CustomPresetConfig[]) => string;
+/**
+ * Creates a preset configuration with custom label and visibility
+ * @param preset The preset enum value
+ * @param label Optional custom label
+ * @param visible Whether the preset should be visible (default: true)
+ * @returns CustomPresetConfig object
+ */
+export declare const createPresetConfig: (preset: DateRangePreset, label?: string, visible?: boolean) => CustomPresetConfig;
+/**
+ * Helper function to create common preset configurations
+ */
+export declare const PRESET_HELPERS: {
+    /**
+     * Creates a configuration for time-based presets only
+     */
+    timeBasedOnly: () => CustomPresetConfig[];
+    /**
+     * Creates a configuration for day-based presets only
+     */
+    dayBasedOnly: () => CustomPresetConfig[];
+    /**
+     * Creates a configuration for month-based presets only
+     */
+    monthBasedOnly: () => CustomPresetConfig[];
+    /**
+     * Creates a minimal preset configuration
+     */
+    minimal: () => CustomPresetConfig[];
+    /**
+     * Creates a comprehensive preset configuration
+     */
+    comprehensive: () => CustomPresetConfig[];
+    /**
+     * Creates a configuration with custom labels
+     */
+    withCustomLabels: () => CustomPresetConfig[];
+    /**
+     * Creates a configuration with some presets hidden
+     */
+    selectiveVisibility: () => CustomPresetConfig[];
+};