@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/time-range-picker/TimeRangePicker.js

@@ -4,22 +4,23 @@ import { useMemo, useCallback } from 'react';
 import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
 import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import RangeSelectorContainer from './RangeSelectorContainer';
-import { getSelectedTimeRange, getSystemTzName, getDefaultTimeRangePresets, convertDateFromTargetTzToSystemTz, convertDateFromSystemTzToTargetTz, formatSummaryValue, } from './utils';
+import { getSelectedTimeRange, getDefaultTimeRangePresets, convertDateFromTargetTzToSystemTz, convertDateFromSystemTzToTargetTz, formatSummaryValue, getValidRange, getMinMaxDateInTimezone, } from './utils';
+import { getSystemTzName } from './getSystemTzName';
 import { useDatePickerState, StatelessDatePicker } from '../date-picker';
 import { useLocale } from '../locale';
 import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
 import { mergeOverrides } from '../overrides';
-import { normalizeDashes, prepareLocale } from '../date-picker/utils';
+import { isTimeInRange, normalizeDashes, prepareLocale } from '../date-picker/utils';
 import { CUSTOM_OPTION } from './constants';
 import { IconButton } from '../button';
 import BaseCalendarIcon from '../icon/components/calendar-solid';
 var __DEV__ = process.env.NODE_ENV !== 'production';
 var CalendarIconInputButton = function (_a) {
     var size = _a.size, value = _a.value, isSelected = _a.isSelected, locale = _a.locale;
-    return (_jsx(IconButton, __assign({ tooltipContent: value !== null && value !== void 0 ? value : locale.calendar.calendarButtonAriaLabel, size: size, bordered: true, shape: "square", isSelected: isSelected }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0));
+    return (_jsx(IconButton, __assign({ tooltipContent: value !== null && value !== void 0 ? value : locale.calendar.calendarButtonAriaLabel, "aria-label": locale.calendar.calendarButtonAriaLabel, size: size, bordered: true, shape: "square", isSelected: isSelected }, { children: _jsx(BaseCalendarIcon, {}) })));
 };
 export var TimeRangePicker = function (_a) {
-    var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, onSubmit = _a.onSubmit, _timezone = _a.timezone, value = _a.value, formatDisplayValue = _a.formatDisplayValue, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides, timeSelect = _a.timeSelect, peekNextMonth = _a.peekNextMonth, excludeDates = _a.excludeDates, filterDate = _a.filterDate, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.placeholder, placeholder = _c === void 0 ? "".concat(DEFAULT_FORMAT_STRING, "-").concat(DEFAULT_FORMAT_STRING) : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, onClose = _a.onClose, onChange = _a.onChange, showTimezoneInSummary = _a.showTimezoneInSummary, clearable = _a.clearable, onClear = _a.onClear, showFullDateInSummary = _a.showFullDateInSummary, autoSizeInput = _a.autoSizeInput, preset = _a.preset, _e = _a.startOpen, startOpen = _e === void 0 ? false : _e, fixedHeight = _a.fixedHeight, _f = _a.monthsShown, monthsShown = _f === void 0 ? 2 : _f, weekStartsOn = _a.weekStartsOn, _g = _a.disableTimezone, disableTimezone = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h, props = __rest(_a, ["adapter", "onSubmit", "timezone", "value", "formatDisplayValue", "timeRangePresets", "overrides", "timeSelect", "peekNextMonth", "excludeDates", "filterDate", "minDate", "maxDate", "placeholder", "formatString", "onClose", "onChange", "showTimezoneInSummary", "clearable", "onClear", "showFullDateInSummary", "autoSizeInput", "preset", "startOpen", "fixedHeight", "monthsShown", "weekStartsOn", "disableTimezone", "displayVariant"]);
+    var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, onSubmit = _a.onSubmit, _timezone = _a.timezone, value = _a.value, formatDisplayValue = _a.formatDisplayValue, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides, timeSelect = _a.timeSelect, peekNextMonth = _a.peekNextMonth, excludeDates = _a.excludeDates, filterDate = _a.filterDate, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "".concat(formatString, "-").concat(formatString).toLowerCase() : _d, onClose = _a.onClose, onChange = _a.onChange, showTimezoneInSummary = _a.showTimezoneInSummary, clearable = _a.clearable, onClear = _a.onClear, showFullDateInSummary = _a.showFullDateInSummary, autoSizeInput = _a.autoSizeInput, preset = _a.preset, _e = _a.startOpen, startOpen = _e === void 0 ? false : _e, fixedHeight = _a.fixedHeight, _f = _a.monthsShown, monthsShown = _f === void 0 ? 2 : _f, weekStartsOn = _a.weekStartsOn, _g = _a.disableTimezone, disableTimezone = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h, timezoneOptions = _a.timezoneOptions, _j = _a.hidePresetSearch, hidePresetSearch = _j === void 0 ? false : _j, props = __rest(_a, ["adapter", "onSubmit", "timezone", "value", "formatDisplayValue", "timeRangePresets", "overrides", "timeSelect", "peekNextMonth", "excludeDates", "filterDate", "minDate", "maxDate", "formatString", "placeholder", "onClose", "onChange", "showTimezoneInSummary", "clearable", "onClear", "showFullDateInSummary", "autoSizeInput", "preset", "startOpen", "fixedHeight", "monthsShown", "weekStartsOn", "disableTimezone", "displayVariant", "timezoneOptions", "hidePresetSearch"]);
     if (__DEV__) {
         if (disableTimezone && _timezone) {
             console.warn('[spaceweb] timezone can not be passed to the TimeRangePicker when disableTimezone is true');
@@ -34,17 +35,17 @@ export var TimeRangePicker = function (_a) {
     var dateFnsLocale = useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
     var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var locale = useLocale();
-    var _j = useDatePickerState({
+    var _k = useDatePickerState({
         onClose: onClose,
         startOpen: startOpen,
-    }), isOpen = _j.isOpen, handleOpen = _j.handleOpen, handleClose = _j.handleClose, setIsOpen = _j.setIsOpen;
+    }), isOpen = _k.isOpen, handleOpen = _k.handleOpen, handleClose = _k.handleClose, setIsOpen = _k.setIsOpen;
     // Composing the time range presets. If user passes then use that else use default presets and at last add custom range.
-    var timeRangeList = useMemo(function () { return __spreadArray(__spreadArray([], __read((timeRangePresets !== null && timeRangePresets !== void 0 ? timeRangePresets : getDefaultTimeRangePresets(locale))), false), [
+    var timeRangeList = useMemo(function () { return __spreadArray(__spreadArray([], __read((timeRangePresets !== null && timeRangePresets !== void 0 ? timeRangePresets : getDefaultTimeRangePresets(locale, timezoneOptions))), false), [
         {
             id: CUSTOM_OPTION.id,
             label: locale.timeRangePicker.customRange,
         },
-    ], false); }, [timeRangePresets, locale]);
+    ], false); }, [timeRangePresets, locale, timezoneOptions]);
     var formatDate = useCallback(function (date, normalizedFormatString) {
         if (normalizedFormatString === void 0) { normalizedFormatString = normalizeDashes(formatString); }
         return dateHelpers.formatDate(date, normalizedFormatString, dateFnsLocale);
@@ -96,23 +97,29 @@ export var TimeRangePicker = function (_a) {
         displayVariant,
     ]);
     var handleSubmit = useCallback(
-    // eslint-disable-next-line no-shadow
+    // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow -- used within function only
     function (_a) {
         var _b, _c, _d;
         var timeRange = _a.timeRange, preset = _a.preset, timezone = _a.timezone;
         // value is returned only for backward compatibility will be removed in future version.
         if (preset === 'CUSTOM') {
-            var startMillis = convertDateFromTargetTzToSystemTz(timeRange[0], timezone);
-            var endMillis = convertDateFromTargetTzToSystemTz(timeRange[1], timezone);
+            var startMillis = convertDateFromTargetTzToSystemTz(timeRange[0], timezone, timezoneOptions);
+            var endMillis = convertDateFromTargetTzToSystemTz(timeRange[1], timezone, timezoneOptions);
             var dates = [new Date(startMillis), new Date(endMillis)];
             onSubmit(__assign({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
+            var _e = getMinMaxDateInTimezone({
+                maxDate: maxDate,
+                minDate: minDate,
+                timezone: timezone,
+                timezoneOptions: timezoneOptions,
+            }), tzMinDate = _e.minDate, tzMaxDate = _e.maxDate;
             var timeRangeLimit = (_d = (_c = (_b = getSelectedTimeRange(preset, timeRangeList)) === null || _b === void 0 ? void 0 : _b.getTimeRangeLimits) === null || _c === void 0 ? void 0 : _c.call(_b, timezone)) !== null && _d !== void 0 ? _d : [];
-            onSubmit(__assign({ value: preset, preset: preset, date: timeRangeLimit }, (disableTimezone ? {} : { timezone: timezone })));
+            onSubmit(__assign({ value: preset, preset: preset, date: getValidRange({ range: timeRangeLimit, dateHelpers: dateHelpers, maxDate: tzMaxDate, minDate: tzMinDate }) }, (disableTimezone ? {} : { timezone: timezone })));
         }
         setIsOpen(false);
-    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone]);
+    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone, dateHelpers, minDate, maxDate, timezoneOptions]);
     var timeRange = useMemo(function () {
         var _a, _b, _c;
         var dates;
@@ -120,11 +127,44 @@ export var TimeRangePicker = function (_a) {
             dates = value;
         }
         else {
-            dates = (_c = (_b = (_a = getSelectedTimeRange(preset !== null && preset !== void 0 ? preset : value, timeRangeList)) === null || _a === void 0 ? void 0 : _a.getTimeRangeLimits) === null || _b === void 0 ? void 0 : _b.call(_a, timezone)) !== null && _c !== void 0 ? _c : [];
+            dates = getValidRange({
+                range: (_c = (_b = (_a = getSelectedTimeRange(preset !== null && preset !== void 0 ? preset : value, timeRangeList)) === null || _a === void 0 ? void 0 : _a.getTimeRangeLimits) === null || _b === void 0 ? void 0 : _b.call(_a, timezone)) !== null && _c !== void 0 ? _c : [],
+                dateHelpers: dateHelpers,
+                maxDate: maxDate,
+                minDate: minDate,
+            });
         }
-        return __spreadArray(__spreadArray([], __read((dates[0] ? [new Date(convertDateFromSystemTzToTargetTz(dates[0], timezone))] : [])), false), __read((dates[1] ? [new Date(convertDateFromSystemTzToTargetTz(dates[1], timezone))] : [])), false);
-    }, [value, timeRangeList, timezone, preset]);
+        return __spreadArray(__spreadArray([], __read((dates[0] ? [new Date(convertDateFromSystemTzToTargetTz(dates[0], timezone, timezoneOptions))] : [])), false), __read((dates[1] ? [new Date(convertDateFromSystemTzToTargetTz(dates[1], timezone, timezoneOptions))] : [])), false);
+    }, [value, timeRangeList, timezone, preset, dateHelpers, minDate, maxDate, timezoneOptions]);
+    var handleInputChange = useCallback(function (_a) {
+        var _b = _a.value, _value = _b === void 0 ? [] : _b;
+        // Both of these call will be in if condition once we add support to directly edit the input, as of now
+        // this function will be only called when user will press clear icon so directly calling these two functions.
+        onSubmit(__assign({ value: _value, preset: 'CUSTOM', date: _value }, (disableTimezone ? {} : { timezone: timezone })));
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    }, [onSubmit, timezone, onClear, disableTimezone]);
+    var handleClearBtnClick = useCallback(function () {
+        handleInputChange({ value: [] });
+    }, [handleInputChange]);
+    var rangeSelectorContainerOverrides = useMemo(function () {
+        return mergeOverrides({
+            Footer: __assign({}, (displayVariant === 'iconButton' && clearable
+                ? {
+                    props: {
+                        showClearButton: true,
+                        handleClearBtnClick: handleClearBtnClick,
+                    },
+                }
+                : {})),
+        }, overrides);
+    }, [displayVariant, overrides, handleClearBtnClick, clearable]);
     var mergedOverrides = useMemo(function () {
+        var _a = getMinMaxDateInTimezone({
+            maxDate: maxDate,
+            minDate: minDate,
+            timezone: timezone,
+            timezoneOptions: timezoneOptions,
+        }), tzMinDate = _a.minDate, tzMaxDate = _a.maxDate;
         return mergeOverrides({
             Input: __assign(__assign({}, (displayVariant === 'iconButton'
                 ? {
@@ -136,6 +176,9 @@ export var TimeRangePicker = function (_a) {
                 : {})), { props: {
                     isSelected: !!value && value.length > 0,
                     locale: locale,
+                    intent: isTimeInRange(timeRange, { minDate: tzMinDate, maxDate: tzMaxDate, dateHelpers: dateHelpers })
+                        ? props.intent
+                        : 'error',
                     overrides: __assign({}, (displayVariant === 'compact'
                         ? {
                             Before: {
@@ -158,7 +201,7 @@ export var TimeRangePicker = function (_a) {
                             },
                         },
                     },
-                    content: (_jsx(RangeSelectorContainer, { onClose: handleClose, value: value, timeRange: timeRange, onSubmit: handleSubmit, adapter: adapter, timezone: timezone, timeSelect: timeSelect, overrides: overrides, timeRangePresets: timeRangeList, peekNextMonth: peekNextMonth, excludeDates: excludeDates, filterDate: filterDate, minDate: minDate, maxDate: maxDate, placeholder: placeholder, formatString: formatString, onChange: onChange, preset: preset, locale: dateFnsLocale, fixedHeight: fixedHeight, monthsShown: monthsShown, disableTimezone: disableTimezone }, void 0)),
+                    content: (_jsx(RangeSelectorContainer, { onClose: handleClose, value: value, timeRange: timeRange, onSubmit: handleSubmit, adapter: adapter, timezone: timezone, timeSelect: timeSelect, overrides: rangeSelectorContainerOverrides, timeRangePresets: timeRangeList, peekNextMonth: peekNextMonth, excludeDates: excludeDates, filterDate: filterDate, minDate: minDate, maxDate: maxDate, placeholder: placeholder, formatString: formatString, onChange: onChange, preset: preset, locale: dateFnsLocale, fixedHeight: fixedHeight, monthsShown: monthsShown, disableTimezone: disableTimezone, timezoneOptions: timezoneOptions, hidePresetSearch: hidePresetSearch })),
                 },
             },
         }, overrides);
@@ -185,17 +228,14 @@ export var TimeRangePicker = function (_a) {
         monthsShown,
         fixedHeight,
         disableTimezone,
-        locale.timeRangePicker.popoverAriaLabel,
         displayVariant,
-        locale.calendar.calendarButtonAriaLabel,
-        props.size,
+        locale,
+        dateHelpers,
+        props.intent,
+        rangeSelectorContainerOverrides,
+        timezoneOptions,
+        hidePresetSearch,
     ]);
-    var handleInputChange = useCallback(function (_a) {
-        var _b = _a.value, _value = _b === void 0 ? [] : _b;
-        // Both of these call will be in if condition once we add support to directly edit the input, as of now
-        // this function will be only called when user will press clear icon so directly calling these two functions.
-        onSubmit(__assign({ value: _value, preset: 'CUSTOM', date: _value }, (disableTimezone ? {} : { timezone: timezone })));
-        onClear === null || onClear === void 0 ? void 0 : onClear();
-    }, [onSubmit, timezone, onClear, disableTimezone]);
-    return (_jsx(StatelessDatePicker, { value: timeRange, isOpen: isOpen, onFocus: handleOpen, onBlur: handleClose, formatDisplayValue: defaultFormatDisplayValue, trapTabbing: false, intent: props.intent, variant: props.variant, size: props.size, disabled: props.disabled, formatString: formatString, placeholder: placeholder, "aria-label": locale.timeRangePicker.ariaLabelRange, overrides: mergedOverrides, clearable: clearable, onChange: handleInputChange, autoSizeInput: autoSizeInput, locale: dateFnsLocale, mountNode: props.mountNode, minDate: minDate, maxDate: maxDate, "aria-describedby": props['aria-describedby'], "aria-labelledby": props['aria-labelledby'], required: props.required, id: props.id }, void 0));
+    return (_jsx(StatelessDatePicker, { value: timeRange, isOpen: isOpen, onFocus: handleOpen, onBlur: handleClose, formatDisplayValue: defaultFormatDisplayValue, trapTabbing: false, intent: props.intent, variant: props.variant, size: props.size, disabled: props.disabled, formatString: formatString, placeholder: placeholder, "aria-label": locale.timeRangePicker.ariaLabelRange, overrides: mergedOverrides, clearable: clearable, onChange: handleInputChange, autoSizeInput: autoSizeInput, locale: dateFnsLocale, mountNode: props.mountNode, minDate: minDate, maxDate: maxDate, "aria-describedby": props['aria-describedby'], "aria-labelledby": props['aria-labelledby'], required: props.required, id: props.id }));
 };
+TimeRangePicker.__standard = 'Component';

package/esm/time-range-picker/TimezonePicker.d.ts

@@ -1,5 +1,11 @@
 import { ReactElement } from 'react';
-import { TimezonePickerProps } from './types';
-export declare const TimezonePicker: ({ setTimezone, timezone, overrides }: TimezonePickerProps) => ReactElement;
-declare const _default: import("react").MemoExoticComponent<({ setTimezone, timezone, overrides }: TimezonePickerProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>>;
+import type { TimezonePickerProps } from './types';
+export declare const TimezonePicker: {
+    ({ setTimezone, timezone, overrides, ...props }: TimezonePickerProps): ReactElement;
+    __standard: string;
+};
+declare const _default: import("react").MemoExoticComponent<{
+    ({ setTimezone, timezone, overrides, ...props }: TimezonePickerProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    __standard: string;
+}>;
 export default _default;

package/esm/time-range-picker/TimezonePicker.js

@@ -1,41 +1,31 @@
-import { __assign } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback, memo } from 'react';
-import { Typography } from '../typography';
-import ChevronDown from '../icon/components/chevron-down';
-import { Stack } from '../stack';
-import { BaseButton } from '../base-button';
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, memo, useMemo } from 'react';
 import { TimezonePicker as DefaultTimezonePicker } from '../time-zone-picker';
-import { useLocale } from '../locale';
+import Timezone from '../icon/components/timezone';
+import { DropdownFieldIcon } from '../date-picker/InputFieldIcon';
 import { mergeOverrides } from '../overrides';
 export var TimezonePicker = function (_a) {
-    var setTimezone = _a.setTimezone, timezone = _a.timezone, overrides = _a.overrides;
-    var locale = useLocale();
+    var setTimezone = _a.setTimezone, timezone = _a.timezone, overrides = _a.overrides, props = __rest(_a, ["setTimezone", "timezone", "overrides"]);
     var mergedOverrides = useMemo(function () {
         return mergeOverrides({
             Select: {
                 props: {
-                    type: 'overlay',
-                    placeholder: locale.timeRangePicker.timezonePlaceholder,
-                    children: (_jsx(BaseButton, __assign({ "data-testid": "time-zone-picker", className: "focus:spr-text-04 hover:spr-text-04" }, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(Typography, __assign({ variant: "l1" }, { children: timezone || locale.timeRangePicker.timezoneLabel }), void 0), _jsx(ChevronDown, { size: 8 }, void 0)] }), void 0) }), void 0)),
                     overrides: {
-                        Popover: {
-                            props: {
-                                showArrow: false,
-                            },
-                            style: function () { return ({
-                                marginTop: '0',
-                            }); },
+                        ValueContainer: {
+                            component: DropdownFieldIcon,
+                            props: { icon: Timezone },
                         },
                     },
                 },
             },
         }, overrides);
-    }, [overrides, timezone, locale]);
+    }, [overrides]);
     var onChange = useCallback(function (_a) {
         var id = _a.id;
         setTimezone(id);
     }, [setTimezone]);
-    return _jsx(DefaultTimezonePicker, { value: timezone, onChange: onChange, overrides: mergedOverrides }, void 0);
+    return (_jsx(DefaultTimezonePicker, __assign({ value: timezone, onChange: onChange, clearable: false, size: "small", overrides: mergedOverrides }, props, { className: ['w-auto', props.className] })));
 };
 export default memo(TimezonePicker);
+TimezonePicker.__standard = 'Component';

package/esm/time-range-picker/getSystemTzName.d.ts

@@ -0,0 +1 @@
+export declare const getSystemTzName: () => string;

package/esm/time-range-picker/getSystemTzName.js

@@ -0,0 +1,13 @@
+var SYSTEM_TIMEZONE;
+export var getSystemTzName = function () {
+    if (!SYSTEM_TIMEZONE) {
+        var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        var TZ_ALIASES = {
+            //Intl return Asia/Calcutta in chrome and safari, while firefox returns Asia/Kolkata
+            'Asia/Calcutta': 'Asia/Kolkata',
+            'America/Buenos_Aires': 'America/Argentina/Buenos_Aires',
+        };
+        SYSTEM_TIMEZONE = TZ_ALIASES[timezone] || timezone;
+    }
+    return SYSTEM_TIMEZONE;
+};

package/esm/time-range-picker/index.d.ts

@@ -1,4 +1,6 @@
 export { TimeRangePicker } from './TimeRangePicker';
+export { TimezonePicker } from './TimezonePicker';
 export { getDefaultTimeRangePresets, formatSummaryValue, convertDateFromSrcTzToTargetTz, convertDateFromSystemTzToTargetTz, convertDateFromTargetTzToSystemTz, } from './utils';
+export { getSystemTzName } from './getSystemTzName';
 export type { TimeRangePickerLocale } from './locale';
 export type { TimeRangePickerValue, TimeRangePickerProps, TimeRangePreset, TimeRangePickerOverrides, FormatString, } from './types';

package/esm/time-range-picker/index.js

@@ -1,2 +1,4 @@
 export { TimeRangePicker } from './TimeRangePicker';
+export { TimezonePicker } from './TimezonePicker';
 export { getDefaultTimeRangePresets, formatSummaryValue, convertDateFromSrcTzToTargetTz, convertDateFromSystemTzToTargetTz, convertDateFromTargetTzToSystemTz, } from './utils';
+export { getSystemTzName } from './getSystemTzName';

package/esm/time-range-picker/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type TimeRangePickerLocale = {
+export type TimeRangePickerLocale = {
     headerLabel: string;
     timezoneLabel: string;
     today: string;
@@ -25,6 +25,7 @@ export declare type TimeRangePickerLocale = {
     nextMonth: string;
     customRange: string;
     cancelBtnLabel: string;
+    clearBtnLabel: string;
     saveBtnLabel: string;
     timeSelectStartLabel: string;
     timeSelectEndLabel: string;
@@ -37,8 +38,13 @@ export declare type TimeRangePickerLocale = {
     timezonePlaceholder: string;
     rangeErrorMsg: string;
     presetMenuAriaLabel: string;
+    presetSearchPlaceholder: string;
+    presetSearchAriaLabel: string;
+    presetSearchNoResults: string;
     popoverAriaLabel: string;
     minDateErrorMessage: string;
     maxDateErrorMessage: string;
     minMaxDateErrorMessage: string;
+    timePickerAriaLabel12Hour: string;
+    timePickerAriaLabel24Hour: string;
 };

package/esm/time-range-picker/styled-component.js

@@ -1,2 +1,2 @@
 import styled from '../style/styled';
-export var StyledHeader = styled('div', 'flex justify-between items-center h-10 px-5');
+export var StyledHeader = styled('div', 'flex gap-2 justify-between items-center h-14 px-4 py-3');

package/esm/time-range-picker/types.d.ts

@@ -1,45 +1,44 @@
 /// <reference types="react" />
-import { DatepickerOverrides, FormatString, StatelessDatePickerProps } from '../date-picker';
-import { Override } from '../overrides';
-import { Option } from '../baseui/select';
-import { BaseSelectProps } from '../select/types';
+import type { DatepickerOverrides, FormatString, StatelessDatePickerProps } from '../date-picker';
+import type { Override } from '../overrides';
+import type { Option } from '../baseui/select';
+import type { Timezone, TimezonePickerOverrides } from '../time-zone-picker/types';
+import { ClassName, Styles } from '../types';
 export type { FormatString } from '../date-picker';
-export declare type TimeRangePreset = {
+export type TimeRangePreset = {
     id: string;
     label: string;
     getTimeRangeLimits?: (timezone?: string) => [Date, Date] | [];
 };
-export declare type TimezonePickerProps = {
+export type TimezonePickerProps = {
     setTimezone: React.Dispatch<string>;
     timezone: string;
-    overrides?: BaseSelectProps['overrides'];
+    overrides?: TimezonePickerOverrides;
+    timezoneOptions?: Timezone[];
+    modernZonesOnly?: boolean;
+    className?: ClassName;
+    style?: Styles;
 };
-export declare type TimeRangeListProps = {
+export type TimeRangeListProps = {
     timeRangePresets: TimeRangePreset[];
     onChange: ({ date, preset }: any) => void;
     timeRange?: Date[];
     preset: string | undefined;
+    hidePresetSearch?: boolean;
     overrides?: {
         Menu?: Override<any>;
         MenuItem?: Override<any>;
     };
 };
-export declare type TimeRangePickerOverrides = DatepickerOverrides<Record<string, any>> & {
-    TimeRangeList?: Override<TimeRangeListProps & Record<string, any>>;
-    Header?: Override<Record<string, any>>;
-    HeaderBeforeEnhancer?: Override<Record<string, any>>;
-    FooterBeforeEnhancer?: Override<Record<string, any>>;
-    Calendar?: Override<Record<string, any>>;
-};
-export declare type TimeRangePickerValue = {
+export type TimeRangePickerValue = {
     value: Date[] | string;
     date: Date[];
     preset: string;
     timezone?: string;
 };
-declare type Preset = string;
-export declare type SizeVariant = 'default' | 'compact' | 'iconButton';
-export declare type FormatSummaryValueOptions = {
+type Preset = string;
+export type SizeVariant = 'default' | 'compact' | 'iconButton';
+export type FormatSummaryValueOptions = {
     date: Date[];
     presetId: string;
     presetLabel: string;
@@ -52,7 +51,7 @@ export declare type FormatSummaryValueOptions = {
     hidePresetLabel?: boolean;
     displayVariant?: SizeVariant;
 };
-export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range' | 'formatDisplayValue'> & {
+export type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range' | 'formatDisplayValue' | 'disableTimezoneSwitch'> & {
     /**
      * @deprecated Please prevent passing preset to value. Instead, pass it in the prop `preset`.
      *   This will be removed in future major releases.
@@ -70,9 +69,10 @@ export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value
     startOpen?: boolean;
     disableTimezone?: boolean;
     displayVariant?: SizeVariant;
+    hidePresetSearch?: boolean;
     formatDisplayValue?: (date: Date | undefined | null | Array<Date | undefined | null>, formatString: string, options: FormatSummaryValueOptions) => string;
 };
-export declare type RangeSelectorContainerProps = Omit<TimeRangePickerProps, 'onFocus' | 'onBlur' | 'timeRangePresets' | 'onSubmit' | 'formatDisplayValue' | 'onClear' | 'timezone'> & {
+export type RangeSelectorContainerProps = Omit<TimeRangePickerProps, 'onFocus' | 'onBlur' | 'timeRangePresets' | 'onSubmit' | 'formatDisplayValue' | 'onClear' | 'timezone'> & {
     timeRangePresets: TimeRangePreset[];
     onSubmit: ({ timeRange, preset, timezone }: {
         timeRange: Date[];
@@ -84,8 +84,17 @@ export declare type RangeSelectorContainerProps = Omit<TimeRangePickerProps, 'on
     timezone: string;
     formatString: FormatString;
 };
-export declare type RangeSelectorProps = Omit<RangeSelectorContainerProps, 'onSubmit' | 'onClose' | 'onChage' | 'formatDate' | 'formatDisplayValue'> & {
+export type RangeSelectorProps = Omit<RangeSelectorContainerProps, 'onSubmit' | 'onClose' | 'onChage' | 'formatDate' | 'formatDisplayValue'> & {
     timeRange?: Date[];
     onChange: ({ date, preset }: any) => void;
     preset: string | undefined;
+    footerContent?: React.ReactNode;
+};
+export type TimeRangePickerOverrides = DatepickerOverrides<Record<string, any>> & {
+    TimeRangeList?: Override<TimeRangeListProps & Record<string, any>>;
+    Header?: Override<Record<string, any>>;
+    HeaderBeforeEnhancer?: Override<Record<string, any>>;
+    FooterBeforeEnhancer?: Override<Record<string, any>>;
+    Calendar?: Override<Record<string, any>>;
+    RangeSelector?: Override<RangeSelectorProps>;
 };

package/esm/time-range-picker/utils.d.ts

@@ -1,12 +1,12 @@
 import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
 import type { FormatSummaryValueOptions, TimeRangePreset } from './types';
+import { Timezone } from '../time-zone-picker/types';
 export declare const getSelectedTimeRange: (selectedTimeRange: string | undefined, timeRangeOptions: Array<TimeRangePreset>) => TimeRangePreset | undefined;
-export declare const getSystemTzName: () => string;
 /**
-  @param date: Date object or epoch in source timezone
-  @param srcTz: source timezone
-  @param targetTz: target timezone
+ @param date: Date object or epoch in source timezone
+ @param srcTz: source timezone
+ @param targetTz: target timezone
   This function is used to convert the time from one timezone to another timezone.
   Example use-case of this function
   Lets say you want to find out what time it will be in New York when it is 6th Nov, 2022 00:00 in Los Angeles.
@@ -14,31 +14,38 @@ export declare const getSystemTzName: () => string;
   convertDateFromSrcTzToTargetTz(new Date('6 Nov 2022, 00:00'), "America/Los_Angeles", "America/New_York")
   this function will return 6 Nov 2022, 2:00 because generally NY is 3 hours ahead of LA but at 2:00AM NY will switch to DST
   and hence it will be not 3:00AM but 2:00AM.
-*/
+ */
 export declare const convertDateFromSrcTzToTargetTz: (date: Date | number, srcTz?: string, targetTz?: string) => number;
 /**
  * @param date Date object or epoch representing the date in particular timezone
  * @param timezone timezone of the date
+ * @param timezoneOptions when provided and timezone matches an option id, uses offset-based conversion (no IANA/date-fns-tz calls)
  * @returns epoch of the same time in system timezone
  * Use case:
  * Lets say user selects 6 Nov 2022, 00:00 from Time range picker and selects New York timezone.
  * Now we want to find out what that time represents in our system timezone(Los Angeles) which in given case is 5 Nov 2022, 21:00
  */
-export declare const convertDateFromTargetTzToSystemTz: (date: Date | number, timezone?: string) => number;
+export declare const convertDateFromTargetTzToSystemTz: (date: Date | number, timezone?: string, timezoneOptions?: Timezone[]) => number;
 /**
  * @param date date in system timezone
  * @param timezone timezone in which you want to convert this date to
- * @returns date in that timezone
+ * @param timezoneOptions when provided and timezone matches an option id, uses offset-based conversion (no IANA/date-fns-tz calls)
+ * @returns epoch of the same moment (date in that timezone)
  * Use case:
  * User will come back with 5 Nov 2022, 21:00 but has selected new york timezone so we want to find out
  * what time it will be in new york when it is 5 Nov 2022, 21:00 in system timezone(Los Angeles), which is
  * 6 Nov 2022, 00:00
  */
-export declare const convertDateFromSystemTzToTargetTz: (date: Date | number, timezone?: string) => number;
+export declare const convertDateFromSystemTzToTargetTz: (date: Date | number, timezone?: string, timezoneOptions?: Timezone[]) => number;
 /**
  * returns milliseconds offset from timezone name
+ * return negative value for timezones ahead utc
+ * return postive value for timezones behind utc
+ *  ex - "CEST+02:00" is -120
+ *
+ * When timezoneOptions is provided and timezone matches an option id, uses option.offset directly (no external lookup).
  */
-export declare const getTzOffset: (timezone: string, date?: number | Date | undefined) => number;
+export declare const getTzOffset: (timezone: string, date?: Date | number, timezoneOptions?: Timezone[]) => number;
 /**
  * @deprecated use convertDateFromTargetTzToSystemTz function to make sure you account for DST cases too
  * convert epoch from one timezone to another
@@ -50,9 +57,10 @@ export declare const switchEpochTimezone: (date: Date | number, tzFrom?: string,
  * Now in Asia/Kolkata timezone today implies 19th Feb. But for Asia/Kabul which is one hour behind Asia/Kolkata Today still implies 18th Feb.
  * So, this function will subtract that offset of 1 hour from current date so new time 11:30PM, with this time we can get correct value
  * of today, this week, etc preset.
+ * When timezoneOptions is provided and timezone matches an option id, uses offset-based conversion (no IANA/date-fns-tz calls).
  */
-export declare const getDateForGivenTimezone: (timezone?: string | undefined) => Date;
-export declare const getDefaultTimeRangePresets: (locale: Locale) => TimeRangePreset[];
+export declare const getDateForGivenTimezone: (timezone?: string, timezoneOptions?: Timezone[]) => Date;
+export declare const getDefaultTimeRangePresets: (locale: Locale, timezoneOptions?: Timezone[]) => TimeRangePreset[];
 export declare const formatSummaryValue: ({ date, presetId, presetLabel, timezone, formatString, showFullDateInSummary, showTimezoneInSummary, adapter, locale, hidePresetLabel, displayVariant, }: FormatSummaryValueOptions) => string;
 export declare const getRangeError: ({ maxDate, minDate, dateHelpers, timeRange, locale, preset, }: {
     minDate?: Date | null | undefined;
@@ -65,3 +73,18 @@ export declare const getRangeError: ({ maxDate, minDate, dateHelpers, timeRange,
     hasError: boolean;
     errMsg?: string;
 };
+export declare const getValidRange: ({ range, minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    range: [Date, Date] | [];
+    dateHelpers: DateHelpers<Date>;
+}) => [Date, Date] | [];
+export declare const getMinMaxDateInTimezone: ({ minDate: _minDate, maxDate: _maxDate, timezone, timezoneOptions, }: {
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    timezone?: string | undefined;
+    timezoneOptions?: Timezone[] | undefined;
+}) => {
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+};