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

package/dist/components/Charts/ChartUtils.d.ts

@@ -1,4 +1,4 @@
-import { NewNestedDataPoint, FlattenedDataPoint, AxisType, XAxisConfig } from './types';
+import { NewNestedDataPoint, FlattenedDataPoint, AxisConfig } from './types';
 export declare function transformNestedData(data: NewNestedDataPoint[], selectedKeys?: string[]): FlattenedDataPoint[];
 export declare function transformScatterData(data: NewNestedDataPoint[], selectedKeys?: string[]): Array<{
     name: string;
@@ -9,7 +9,94 @@ export declare function transformScatterData(data: NewNestedDataPoint[], selecte
 export declare function lightenHexColor(hex: string, amount?: number): string;
 export declare const formatNumber: (value: number | string) => string;
 export declare const capitaliseCamelCase: (text: string) => string;
-export declare const createSmartDateTimeFormatter: (timeZone?: string, hour12?: boolean, showYear?: boolean) => ((value: string | number) => string);
-export declare const getAxisFormatterWithConfig: (axisType: AxisType, dateOnly?: boolean, smart?: boolean, timeZone?: string, hour12?: boolean, showYear?: boolean, forTooltip?: boolean) => ((value: string | number) => string);
-export declare const createStableSmartFormatter: (xAxisConfig: XAxisConfig, flattenedData: FlattenedDataPoint[]) => ((value: string | number) => string) | undefined;
-export declare const getAxisFormatter: (axisType: AxisType, timeZone?: string, hour12?: boolean) => ((value: string | number) => string);
+export type DateTimeFormatterOptions = {
+    useUTC?: boolean;
+    formatString?: string;
+    dateOnly?: boolean;
+    timeOnly?: boolean;
+    showYear?: boolean;
+    smartDateTimeFormat?: boolean;
+};
+/**
+ * Creates a DateTime formatter with custom options
+ * @param options - Configuration options for the formatter
+ * @param options.useUTC - Whether to use UTC timezone (default: true)
+ * @param options.formatString - Optional custom format string
+ * @param options.dateOnly - Show only dates (e.g., "1. Oct", "2. Oct")
+ * @param options.timeOnly - Show only times (e.g., "12:00", "13:00")
+ * @param options.showYear - Include year in the output (works with dateOnly and default mode)
+ * @param options.smartDateTimeFormat - Alternates between date and time like Highcharts
+ * @returns A formatter function that handles timestamps from any timezone
+ *
+ * @example
+ * // Date only without year: "1. Oct" "2. Oct" "3. Oct"
+ * createDateTimeFormatter({ dateOnly: true, showYear: false })
+ *
+ * @example
+ * // Date only with year: "1. Oct 2024" "2. Oct 2024"
+ * createDateTimeFormatter({ dateOnly: true, showYear: true })
+ *
+ * @example
+ * // Time only: "00:00" "06:00" "12:00"
+ * createDateTimeFormatter({ timeOnly: true })
+ *
+ * @example
+ * // Smart format (alternates): "1. Oct" "12:00" "2. Oct" "12:00"
+ * createDateTimeFormatter({ smartDateTimeFormat: true })
+ *
+ * @example
+ * // Default with year: "1 Oct 2024, 12:00"
+ * createDateTimeFormatter({ showYear: true })
+ */
+export declare const createDateTimeFormatter: (options?: DateTimeFormatterOptions) => ((value: string | number) => string);
+/**
+ * Get a formatter function based on axis type with optional DateTime customization
+ * @param axisType - The type of axis (DATE_TIME, CURRENCY, PERCENTAGE, NUMBER)
+ * @param dateTimeOptions - Options for DateTime formatting (only used when axisType is DATE_TIME)
+ * @returns A formatter function for the specified axis type
+ *
+ * @example
+ * // Simple usage with default UTC
+ * getAxisFormatter(AxisType.DATE_TIME)
+ *
+ * @example
+ * // Date only without year
+ * getAxisFormatter(AxisType.DATE_TIME, { dateOnly: true })
+ *
+ * @example
+ * // Date only with year
+ * getAxisFormatter(AxisType.DATE_TIME, { dateOnly: true, showYear: true })
+ *
+ * @example
+ * // Time only
+ * getAxisFormatter(AxisType.DATE_TIME, { timeOnly: true })
+ *
+ * @example
+ * // Local timezone instead of UTC
+ * getAxisFormatter(AxisType.DATE_TIME, { useUTC: false })
+ */
+export declare const getAxisFormatter: (finalAxis: AxisConfig) => ((value: string | number) => string);
+/**
+ * Suggests an optimal tick interval based on the data range
+ * Automatically determines whether to use minutes, hours, days, etc.
+ */
+export declare function getSuggestedTickInterval(data: NewNestedDataPoint[], maxTicks?: number): {
+    interval: number;
+    description: string;
+    unit: string;
+};
+/**
+ * Generates consistent, evenly-spaced tick values for datetime axes
+ * This mimics Highcharts behavior where ticks are at regular intervals
+ *
+ * @param data - Chart data with timestamps in 'name' field
+ * @param options - Configuration options
+ * @returns Object containing tick array (as strings to match data format) and formatter function
+ */
+export declare function generateConsistentDateTimeTicks(data: NewNestedDataPoint[], options?: DateTimeFormatterOptions & {
+    maxTicks?: number;
+    customInterval?: number;
+}): {
+    ticks: string[];
+    formatter: (value: string | number) => string;
+};

package/dist/components/Charts/DateTimeFormatter.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Highcharts-style DateTime Formatter Utility for Charts (Functional)
+ *
+ * This utility provides Highcharts-compatible datetime formatting for charts.
+ * It intelligently formats timestamps based on the data range and supports
+ * custom format strings similar to Highcharts' dateTimeLabelFormats.
+ */
+export declare const TIME_UNITS: {
+    readonly millisecond: 1;
+    readonly second: 1000;
+    readonly minute: 60000;
+    readonly hour: 3600000;
+    readonly day: 86400000;
+    readonly week: 604800000;
+    readonly month: 2592000000;
+    readonly year: 31536000000;
+};
+export type TimeUnit = keyof typeof TIME_UNITS;
+export declare const DEFAULT_DATE_TIME_FORMATS: Record<TimeUnit, string>;
+export interface DateTimeFormatterConfig {
+    useUTC?: boolean;
+    customFormats?: Partial<Record<TimeUnit, string>>;
+    startOfWeek?: number;
+}
+/**
+ * Parse and validate a timestamp value
+ * Handles: numbers, numeric strings, ISO strings, seconds vs milliseconds
+ */
+export declare function parseTimestamp(value: string | number): number | null;
+/**
+ * Determines the most appropriate time unit based on data range
+ */
+export declare function getTimeUnit(dataRange: number): TimeUnit;
+/**
+ * Get time unit from an array of timestamps
+ */
+export declare function getTimeUnitFromData(timestamps: number[]): TimeUnit;
+/**
+ * Normalize timestamp to the nearest time unit boundary
+ * This ensures consistent tick positioning like Highcharts
+ */
+export declare function normalizeTimestamp(timestamp: number, timeUnit: TimeUnit, config?: DateTimeFormatterConfig): number;
+/**
+ * Formats a timestamp according to a format string (Highcharts-style)
+ *
+ * Format tokens:
+ * - %Y: 4-digit year (2024)
+ * - %y: 2-digit year (24)
+ * - %m: 2-digit month (01-12)
+ * - %b: Short month name (Jan)
+ * - %B: Full month name (January)
+ * - %d: 2-digit day (01-31)
+ * - %e: Day without leading zero (1-31)
+ * - %H: 2-digit hour 24h (00-23)
+ * - %I: 2-digit hour 12h (01-12)
+ * - %M: 2-digit minute (00-59)
+ * - %S: 2-digit second (00-59)
+ * - %L: Milliseconds (000-999)
+ * - %p: AM/PM
+ * - %A: Full weekday name (Monday)
+ * - %a: Short weekday name (Mon)
+ * - %%: Literal % character
+ */
+export declare function dateFormat(formatString: string, timestamp: number, config?: DateTimeFormatterConfig): string;
+/**
+ * Get the appropriate date format for a given time unit
+ */
+export declare function getDateFormat(timeUnit: TimeUnit, config?: DateTimeFormatterConfig): string;
+/**
+ * Get optimal tick interval to prevent cluttered axes
+ * Returns recommended number of milliseconds between ticks
+ */
+export declare function getOptimalTickInterval(dataRange: number, maxTicks?: number): {
+    interval: number;
+    unit: TimeUnit;
+};
+/**
+ * Generate evenly spaced tick values for a time range
+ * This prevents cluttered axes by ensuring consistent spacing
+ */
+export declare function generateTickValues(minTimestamp: number, maxTimestamp: number, maxTicks?: number, config?: DateTimeFormatterConfig): number[];
+/**
+ * Generate ticks at a custom interval (in milliseconds)
+ * Useful for forcing specific tick spacing (e.g., every 6 hours)
+ */
+export declare function generateTicksAtInterval(minTimestamp: number, maxTimestamp: number, intervalMs: number, timeUnit?: TimeUnit, config?: DateTimeFormatterConfig): number[];
+/**
+ * Create a basic formatter function for a specific time unit
+ */
+export declare function createFormatter(timeUnit: TimeUnit, config?: DateTimeFormatterConfig): (value: number) => string;
+/**
+ * Create a formatter function for chart axes with auto time unit detection
+ */
+export declare function createAxisFormatter(timestamps: number[], config?: DateTimeFormatterConfig): (value: number) => string;
+/**
+ * Create a smart formatter that shows date on day change, time otherwise
+ * Similar to Highcharts' smart datetime formatting
+ */
+export declare function createSmartFormatter(timestamps: number[], showYear?: boolean, config?: DateTimeFormatterConfig): (value: number) => string;
+/**
+ * Create an alternating date/time formatter
+ * Shows date on even ticks, time on odd ticks (e.g., "1 Oct", "12:00", "2 Oct", "12:00")
+ */
+export declare function createAlternatingFormatter(ticks: number[], dateFormatStr?: string, timeFormatStr?: string, config?: DateTimeFormatterConfig): (value: number) => string;
+/**
+ * Format multiple timestamps
+ */
+export declare function formatMultiple(timestamps: number[], timeUnit?: TimeUnit, config?: DateTimeFormatterConfig): string[];
+/**
+ * Generate date-only ticks (for Charts dateOnly mode)
+ * Returns ticks at day boundaries with date-only labels
+ */
+export declare function createDateOnlyTicksAndFormatter(minTimestamp: number, maxTimestamp: number, maxTicks?: number, showYear?: boolean, config?: DateTimeFormatterConfig): {
+    ticks: number[];
+    formatter: (value: number) => string;
+};
+/**
+ * Generate time-only ticks spanning the entire data range
+ * Shows times at regular intervals (e.g., every 15 minutes, 1 hour, etc.)
+ */
+export declare function createTimeOnlyTicksAndFormatter(minTimestamp: number, maxTimestamp: number, intervalMinutes?: number, maxTicks?: number, config?: DateTimeFormatterConfig): {
+    ticks: number[];
+    formatter: (value: number) => string;
+};
+/**
+ * Generate ticks with alternating date and time labels
+ * Pattern: Date, Time, Date, Time, etc.
+ */
+export declare function createDateTimeAlternatingTicksAndFormatter(minTimestamp: number, maxTimestamp: number, intervalMs?: number, showYear?: boolean, maxTicks?: number, config?: DateTimeFormatterConfig): {
+    ticks: number[];
+    formatter: (value: number) => string;
+};
+/**
+ * All-in-one helper: Generate ticks and create alternating formatter
+ */
+export declare function createAlternatingTicksAndFormatter(minTimestamp: number, maxTimestamp: number, intervalMs: number, options?: {
+    timeUnit?: TimeUnit;
+    dateFormat?: string;
+    timeFormat?: string;
+}, config?: DateTimeFormatterConfig): {
+    ticks: number[];
+    formatter: (value: number) => string;
+};
+/**
+ * Create a dynamic tick generator that adapts to available width
+ * This prevents tick collision by adjusting density based on chart width
+ */
+export declare function createResponsiveTicksAndFormatter(minTimestamp: number, maxTimestamp: number, chartWidthPx: number, avgLabelWidthPx?: number, mode?: 'dateOnly' | 'timeOnly' | 'alternating' | 'smart', showYear?: boolean, config?: DateTimeFormatterConfig): {
+    ticks: number[];
+    formatter: (value: number) => string;
+};

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

@@ -67,10 +67,14 @@ export type AxisConfig = {
     tickFormatter?: (value: string | number) => string;
     customTick?: React.ComponentType<TickProps>;
     dateOnly?: boolean;
-    smart?: boolean;
-    timeZone?: string;
-    hour12?: boolean;
+    useUTC?: boolean;
+    formatString?: string;
+    timeOnly?: boolean;
     showYear?: boolean;
+    ticks?: (number | string)[];
+    autoConsistentTicks?: boolean;
+    maxTicks?: number;
+    smartDateTimeFormat?: boolean;
 };
 export type XAxisConfig = AxisConfig;
 export type YAxisConfig = AxisConfig;

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

@@ -4,12 +4,14 @@ export declare enum DateRangePreset {
     TODAY = "today",
     YESTERDAY = "yesterday",
     TOMORROW = "tomorrow",
-    LAST_30_MINS = "last30Mins",
+    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",
@@ -139,6 +141,27 @@ 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
@@ -209,11 +232,25 @@ export type CustomRangeConfig = {
      */
     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;
@@ -234,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, CustomRangeConfig, CustomRangeCalculatorFunction } 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
@@ -705,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)
  */
@@ -730,99 +752,72 @@ export declare const matchesTomorrowPreset: (range: DateRange) => boolean;
  */
 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
+ * Default preset configuration for the DateRangePicker
  */
-export declare const applyCustomRangeCalculation: (startDate: Date, customRangeConfig: CustomRangeConfig, currentRange?: DateRange) => DateRange | null;
+export declare const DEFAULT_PRESET_CONFIG: DateRangePreset[];
 /**
- * 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
+ * Get custom preset definition by ID
  */
-export declare const handleCustomRangeCalendarDateClick: (clickedDate: Date, selectedRange: DateRange, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customRangeConfig?: CustomRangeConfig, isDoubleClick?: boolean) => DateRange | null;
+export declare const getCustomPresetDefinition: (id: string) => CustomPresetDefinition | undefined;
 /**
- * Validates custom range configuration
- * @param config Custom range configuration to validate
- * @returns Validation result with error message if invalid
+ * Processes custom presets configuration and returns normalized preset configs
+ * @param customPresets User-provided presets configuration
+ * @returns Array of normalized CustomPresetConfig objects
  */
-export declare const validateCustomRangeConfig: (config: CustomRangeConfig) => {
-    isValid: boolean;
-    error?: string;
-};
+export declare const processCustomPresets: (customPresets?: PresetsConfig) => CustomPresetConfig[];
 /**
- * Creates common custom range calculation functions
+ * 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 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;
-};
+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;
 /**
- * Helper function to create common custom range configurations
+ * 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 createCustomRangeConfigs: {
+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[];
     /**
-     * Fixed 5-day range
+     * Creates a configuration for day-based presets only
      */
-    fiveDayRange: () => CustomRangeConfig;
+    dayBasedOnly: () => CustomPresetConfig[];
     /**
-     * Fixed 7-day range (week)
+     * Creates a configuration for month-based presets only
      */
-    weekRange: () => CustomRangeConfig;
+    monthBasedOnly: () => CustomPresetConfig[];
     /**
-     * Business week (5 business days)
+     * Creates a minimal preset configuration
      */
-    businessWeek: () => CustomRangeConfig;
+    minimal: () => CustomPresetConfig[];
     /**
-     * Month range (start date to end of month)
+     * Creates a comprehensive preset configuration
      */
-    monthRange: () => CustomRangeConfig;
+    comprehensive: () => CustomPresetConfig[];
     /**
-     * Quarter range (start date to end of quarter)
+     * Creates a configuration with custom labels
      */
-    quarterRange: () => CustomRangeConfig;
+    withCustomLabels: () => CustomPresetConfig[];
     /**
-     * Flexible range with manual override
+     * Creates a configuration with some presets hidden
      */
-    flexibleRange: (defaultDays: number) => CustomRangeConfig;
+    selectiveVisibility: () => CustomPresetConfig[];
 };

package/dist/components/Menu/Menu.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from 'styled-components';
 import { MenuV2Props } from './types';
 export declare const contentBaseStyle: CSSObject;
 declare const Menu: {
-    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, }: MenuV2Props): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, enableVirtualScrolling, virtualItemHeight, virtualOverscan, virtualScrollThreshold, }: MenuV2Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Menu;

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

@@ -19,6 +19,10 @@ export type MenuV2Props = {
     minWidth?: number;
     enableSearch?: boolean;
     searchPlaceholder?: string;
+    enableVirtualScrolling?: boolean;
+    virtualItemHeight?: number | ((item: MenuItemV2Type, index: number) => number);
+    virtualOverscan?: number;
+    virtualScrollThreshold?: number;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     asModal?: boolean;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/components/MultiSelect/MultiSelectMenu.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

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

@@ -104,6 +104,14 @@ export type MultiSelectProps = {
     showItemDividers?: boolean;
     showHeaderBorder?: boolean;
     fullWidth?: boolean;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    itemsToRender?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
@@ -139,4 +147,12 @@ export type MultiSelectMenuProps = {
         disabled?: boolean;
         loading?: boolean;
     };
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    itemsToRender?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };

package/dist/components/SingleSelect/SingleSelect.d.ts

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/SingleSelectMenu.d.ts

@@ -17,6 +17,14 @@ type SingleSelectMenuProps = {
     alignOffset?: number;
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    itemsToRender?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

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

@@ -95,4 +95,12 @@ export type SingleSelectProps = {
     error?: boolean;
     errorMessage?: string;
     fullWidth?: boolean;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    itemsToRender?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };