@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/time-range-picker/TimeRangePicker.js

@@ -4,8 +4,8 @@ exports.TimeRangePicker = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
-var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-helpers"));
 var RangeSelectorContainer_1 = (0, tslib_1.__importDefault)(require("./RangeSelectorContainer"));
 var utils_1 = require("./utils");
 var date_picker_1 = require("../date-picker");
@@ -14,7 +14,13 @@ var constants_1 = require("../date-picker/constants");
 var overrides_1 = require("../overrides");
 var utils_2 = require("../date-picker/utils");
 var constants_2 = require("./constants");
+var button_1 = require("../button");
+var calendar_solid_1 = (0, tslib_1.__importDefault)(require("../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 ((0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ tooltipContent: value !== null && value !== void 0 ? value : locale.calendar.calendarButtonAriaLabel, size: size, bordered: true, shape: "square", isSelected: isSelected }, { children: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, {}, void 0) }), void 0));
+};
 var TimeRangePicker = function (_a) {
     var _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _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(constants_1.DEFAULT_FORMAT_STRING, "-").concat(constants_1.DEFAULT_FORMAT_STRING) : _c, _d = _a.formatString, formatString = _d === void 0 ? constants_1.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 = (0, tslib_1.__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"]);
     if (__DEV__) {
@@ -44,9 +50,8 @@ var TimeRangePicker = function (_a) {
     ], false); }, [timeRangePresets, locale]);
     var formatDate = (0, react_1.useCallback)(function (date, normalizedFormatString) {
         if (normalizedFormatString === void 0) { normalizedFormatString = (0, utils_2.normalizeDashes)(formatString); }
-        var adaptedSystemTz = new Date((0, utils_1.switchEpochTimezone)(date, timezone, (0, utils_1.getSystemTzName)()));
-        return dateHelpers.formatDate(adaptedSystemTz, normalizedFormatString, dateFnsLocale);
-    }, [formatString, dateHelpers, timezone, dateFnsLocale]);
+        return dateHelpers.formatDate(date, normalizedFormatString, dateFnsLocale);
+    }, [formatString, dateHelpers, dateFnsLocale]);
     var defaultFormatDisplayValue = (0, react_1.useCallback)(function (date, normalizedFormatString) {
         var _a, _b;
         if (normalizedFormatString === void 0) { normalizedFormatString = (0, utils_2.normalizeDashes)(formatString); }
@@ -54,9 +59,6 @@ var TimeRangePicker = function (_a) {
         if (!Array.isArray(date) && date) {
             return formatDate(date);
         }
-        if (formatDisplayValue) {
-            return formatDisplayValue(date, normalizedFormatString);
-        }
         var timeRangePreset;
         if (typeof preset === 'string') {
             timeRangePreset = (0, utils_1.getSelectedTimeRange)(preset, timeRangeList);
@@ -64,7 +66,7 @@ var TimeRangePicker = function (_a) {
         else if (typeof value === 'string') {
             timeRangePreset = (0, utils_1.getSelectedTimeRange)(value, timeRangeList);
         }
-        return (0, utils_1.formatSummaryValue)({
+        var options = {
             date: date,
             presetId: (_a = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.id) !== null && _a !== void 0 ? _a : constants_2.CUSTOM_OPTION.id,
             presetLabel: (_b = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.label) !== null && _b !== void 0 ? _b : locale.timeRangePicker.customRange,
@@ -76,7 +78,11 @@ var TimeRangePicker = function (_a) {
             adapter: adapter,
             locale: dateFnsLocale,
             displayVariant: displayVariant,
-        });
+        };
+        if (formatDisplayValue) {
+            return formatDisplayValue(date, normalizedFormatString, options);
+        }
+        return (0, utils_1.formatSummaryValue)(options);
     }, [
         timezone,
         value,
@@ -93,23 +99,23 @@ var TimeRangePicker = function (_a) {
         displayVariant,
     ]);
     var handleSubmit = (0, react_1.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 = (0, utils_1.switchEpochTimezone)(timeRange[0], (0, utils_1.getSystemTzName)(), timezone);
-            var endMillis = (0, utils_1.switchEpochTimezone)(timeRange[1], (0, utils_1.getSystemTzName)(), timezone);
+            var startMillis = (0, utils_1.convertDateFromTargetTzToSystemTz)(timeRange[0], timezone);
+            var endMillis = (0, utils_1.convertDateFromTargetTzToSystemTz)(timeRange[1], timezone);
             var dates = [new Date(startMillis), new Date(endMillis)];
             onSubmit((0, tslib_1.__assign)({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
             var timeRangeLimit = (_d = (_c = (_b = (0, utils_1.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((0, tslib_1.__assign)({ value: preset, preset: preset, date: timeRangeLimit }, (disableTimezone ? {} : { timezone: timezone })));
+            onSubmit((0, tslib_1.__assign)({ value: preset, preset: preset, date: (0, utils_1.getValidRange)({ range: timeRangeLimit, dateHelpers: dateHelpers, maxDate: maxDate, minDate: minDate }) }, (disableTimezone ? {} : { timezone: timezone })));
         }
         setIsOpen(false);
-    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone]);
+    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone, dateHelpers, minDate, maxDate]);
     var timeRange = (0, react_1.useMemo)(function () {
         var _a, _b, _c;
         var dates;
@@ -117,14 +123,27 @@ var TimeRangePicker = function (_a) {
             dates = value;
         }
         else {
-            dates = (_c = (_b = (_a = (0, utils_1.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 = (0, utils_1.getValidRange)({
+                range: (_c = (_b = (_a = (0, utils_1.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 (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((dates[0] ? [(0, utils_1.adaptDateWithSystemTz)(dates[0], timezone)] : [])), false), (0, tslib_1.__read)((dates[1] ? [(0, utils_1.adaptDateWithSystemTz)(dates[1], timezone)] : [])), false);
-    }, [value, timeRangeList, timezone, preset]);
+        return (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((dates[0] ? [new Date((0, utils_1.convertDateFromSystemTzToTargetTz)(dates[0], timezone))] : [])), false), (0, tslib_1.__read)((dates[1] ? [new Date((0, utils_1.convertDateFromSystemTzToTargetTz)(dates[1], timezone))] : [])), false);
+    }, [value, timeRangeList, timezone, preset, dateHelpers, minDate, maxDate]);
     var mergedOverrides = (0, react_1.useMemo)(function () {
         return (0, overrides_1.mergeOverrides)({
-            Input: {
-                props: {
+            Input: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (displayVariant === 'iconButton'
+                ? {
+                    component: CalendarIconInputButton,
+                    Before: {
+                        component: function () { return null; },
+                    },
+                }
+                : {})), { props: {
+                    isSelected: !!value && value.length > 0,
+                    locale: locale,
                     overrides: (0, tslib_1.__assign)({}, (displayVariant === 'compact'
                         ? {
                             Before: {
@@ -132,8 +151,7 @@ var TimeRangePicker = function (_a) {
                             },
                         }
                         : {})),
-                },
-            },
+                } }),
             InputWrapper: {
                 props: {
                     'data-testid': 'time-range',
@@ -175,8 +193,8 @@ var TimeRangePicker = function (_a) {
         monthsShown,
         fixedHeight,
         disableTimezone,
-        locale.timeRangePicker.popoverAriaLabel,
         displayVariant,
+        locale,
     ]);
     var handleInputChange = (0, react_1.useCallback)(function (_a) {
         var _b = _a.value, _value = _b === void 0 ? [] : _b;
@@ -185,6 +203,6 @@ var TimeRangePicker = function (_a) {
         onSubmit((0, tslib_1.__assign)({ value: _value, preset: 'CUSTOM', date: _value }, (disableTimezone ? {} : { timezone: timezone })));
         onClear === null || onClear === void 0 ? void 0 : onClear();
     }, [onSubmit, timezone, onClear, disableTimezone]);
-    return ((0, jsx_runtime_1.jsx)(date_picker_1.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 }, void 0));
+    return ((0, jsx_runtime_1.jsx)(date_picker_1.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));
 };
 exports.TimeRangePicker = TimeRangePicker;

package/time-range-picker/constants.d.ts

@@ -1,5 +1,3 @@
 export declare const CUSTOM_OPTION: {
     id: string;
 };
-export declare const CALENDAR_HEIGHT = 373;
-export declare const TIME_SELECT_ROW_HEIGHT = 75;

package/time-range-picker/constants.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TIME_SELECT_ROW_HEIGHT = exports.CALENDAR_HEIGHT = exports.CUSTOM_OPTION = void 0;
+exports.CUSTOM_OPTION = void 0;
 exports.CUSTOM_OPTION = {
     id: 'CUSTOM',
 };
-exports.CALENDAR_HEIGHT = 373;
-exports.TIME_SELECT_ROW_HEIGHT = 75;

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

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

package/time-range-picker/index.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.TimeRangePicker = void 0;
+exports.convertDateFromTargetTzToSystemTz = exports.convertDateFromSystemTzToTargetTz = exports.convertDateFromSrcTzToTargetTz = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.TimeRangePicker = void 0;
 var TimeRangePicker_1 = require("./TimeRangePicker");
 Object.defineProperty(exports, "TimeRangePicker", { enumerable: true, get: function () { return TimeRangePicker_1.TimeRangePicker; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "getDefaultTimeRangePresets", { enumerable: true, get: function () { return utils_1.getDefaultTimeRangePresets; } });
 Object.defineProperty(exports, "formatSummaryValue", { enumerable: true, get: function () { return utils_1.formatSummaryValue; } });
+Object.defineProperty(exports, "convertDateFromSrcTzToTargetTz", { enumerable: true, get: function () { return utils_1.convertDateFromSrcTzToTargetTz; } });
+Object.defineProperty(exports, "convertDateFromSystemTzToTargetTz", { enumerable: true, get: function () { return utils_1.convertDateFromSystemTzToTargetTz; } });
+Object.defineProperty(exports, "convertDateFromTargetTzToSystemTz", { enumerable: true, get: function () { return utils_1.convertDateFromTargetTzToSystemTz; } });

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

@@ -38,4 +38,9 @@ export declare type TimeRangePickerLocale = {
     rangeErrorMsg: string;
     presetMenuAriaLabel: string;
     popoverAriaLabel: string;
+    minDateErrorMessage: string;
+    maxDateErrorMessage: string;
+    minMaxDateErrorMessage: string;
+    timePickerAriaLabel12Hour: string;
+    timePickerAriaLabel24Hour: string;
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { DatepickerOverrides, FormatString, StatelessDatePickerProps } from '../date-picker';
 import { Override } from '../overrides';
-import { Option } from 'baseui/select';
+import { Option } from '../baseui/select';
 import { BaseSelectProps } from '../select/types';
 export type { FormatString } from '../date-picker';
 export declare type TimeRangePreset = {
@@ -29,7 +29,7 @@ export declare type TimeRangePickerOverrides = DatepickerOverrides<Record<string
     Header?: Override<Record<string, any>>;
     HeaderBeforeEnhancer?: Override<Record<string, any>>;
     FooterBeforeEnhancer?: Override<Record<string, any>>;
-    TimezonePicker?: Override<Record<string, any>>;
+    Calendar?: Override<Record<string, any>>;
 };
 export declare type TimeRangePickerValue = {
     value: Date[] | string;
@@ -38,15 +38,27 @@ export declare type TimeRangePickerValue = {
     timezone?: string;
 };
 declare type Preset = string;
-export declare type SizeVariant = 'default' | 'compact';
-export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range'> & {
+export declare type SizeVariant = 'default' | 'compact' | 'iconButton';
+export declare type FormatSummaryValueOptions = {
+    date: Date[];
+    presetId: string;
+    presetLabel: string;
+    timezone?: string;
+    formatString?: string;
+    showFullDateInSummary?: boolean;
+    showTimezoneInSummary?: boolean;
+    adapter?: any;
+    locale?: any;
+    hidePresetLabel?: boolean;
+    displayVariant?: SizeVariant;
+};
+export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range' | 'formatDisplayValue'> & {
     /**
      * @deprecated Please prevent passing preset to value. Instead, pass it in the prop `preset`.
      *   This will be removed in future major releases.
      */
     value?: Preset | Date[];
     preset?: Preset;
-    timezone?: string;
     timeRangePresets?: TimeRangePreset[];
     onSubmit: (timeRangePickerValue: TimeRangePickerValue) => void;
     overrides?: TimeRangePickerOverrides;
@@ -58,6 +70,7 @@ export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value
     startOpen?: boolean;
     disableTimezone?: boolean;
     displayVariant?: SizeVariant;
+    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'> & {
     timeRangePresets: TimeRangePreset[];

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

@@ -1,19 +1,49 @@
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
-import { SizeVariant, TimeRangePreset } from './types';
+import type { FormatSummaryValueOptions, TimeRangePreset } from './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
+  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.
+  then you can call like:
+  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
+ * @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;
+/**
+ * @param date date in system timezone
+ * @param timezone timezone in which you want to convert this date to
+ * @returns 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;
 /**
  * returns milliseconds offset from timezone name
  */
 export declare const getTzOffset: (timezone: string, date?: number | Date | undefined) => number;
 /**
+ * @deprecated use convertDateFromTargetTzToSystemTz function to make sure you account for DST cases too
  * convert epoch from one timezone to another
  */
 export declare const switchEpochTimezone: (date: Date | number, tzFrom?: string, tzTo?: string) => number;
-/**
- * adapts date with the system timezone
- */
-export declare const adaptDateWithSystemTz: (date: Date, selectedTimezone: string) => Date;
 /**
  * Adds or subtract the offset according to timezone passed so that we can get correct start date and end date in that timezone.
  * ex. Lets say we are in Asia/Kolakata timezone on 19th Feb and time is 12:30 AM, and selected Asia/Kabul timezone and preset as Today.
@@ -23,20 +53,21 @@ export declare const adaptDateWithSystemTz: (date: Date, selectedTimezone: strin
  */
 export declare const getDateForGivenTimezone: (timezone?: string | undefined) => Date;
 export declare const getDefaultTimeRangePresets: (locale: Locale) => TimeRangePreset[];
-export declare const formatSummaryValue: ({ date, presetId, presetLabel, timezone, formatString, showFullDateInSummary, showTimezoneInSummary, adapter, locale, hidePresetLabel, displayVariant, }: {
-    date: Date[];
-    presetId: string;
-    presetLabel: string;
-    timezone?: string | undefined;
-    formatString?: string | undefined;
-    showFullDateInSummary?: boolean | undefined;
-    showTimezoneInSummary?: boolean | undefined;
-    adapter?: any;
-    locale?: any;
-    hidePresetLabel?: boolean | undefined;
-    displayVariant?: SizeVariant | undefined;
-}) => string;
-export declare const getHeight: ({ monthsShown, timeSelect }: {
-    monthsShown?: number | undefined;
-    timeSelect?: boolean | undefined;
-}) => number;
+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;
+    maxDate?: Date | null | undefined;
+    dateHelpers: DateHelpers<Date>;
+    timeRange: Date[];
+    locale: Locale;
+    preset?: string | undefined;
+}) => {
+    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] | [];

package/time-range-picker/utils.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHeight = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.getDateForGivenTimezone = exports.adaptDateWithSystemTz = exports.switchEpochTimezone = exports.getTzOffset = exports.getSystemTzName = exports.getSelectedTimeRange = void 0;
+exports.getValidRange = exports.getRangeError = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.getDateForGivenTimezone = exports.switchEpochTimezone = exports.getTzOffset = exports.convertDateFromSystemTzToTargetTz = exports.convertDateFromTargetTzToSystemTz = exports.convertDateFromSrcTzToTargetTz = exports.getSystemTzName = exports.getSelectedTimeRange = void 0;
 var tslib_1 = require("tslib");
 var constants_1 = require("../date-picker/constants");
 var index_1900_2050_1 = require("timezone-support/dist/index-1900-2050");
-var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
-var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-helpers"));
+var i18n_interpolation_1 = (0, tslib_1.__importDefault)(require("../baseui/helpers/i18n-interpolation"));
+var date_fns_1 = require("date-fns");
+var date_fns_tz_1 = require("date-fns-tz");
 var utils_1 = require("../date-picker/utils");
 var constants_2 = require("./constants");
 var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
@@ -27,6 +30,51 @@ var getSystemTzName = function () {
     return SYSTEM_TIMEZONE;
 };
 exports.getSystemTzName = getSystemTzName;
+/**
+  @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.
+  then you can call like:
+  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.
+*/
+var convertDateFromSrcTzToTargetTz = function (date, srcTz, targetTz) {
+    if (srcTz === void 0) { srcTz = (0, exports.getSystemTzName)(); }
+    if (targetTz === void 0) { targetTz = (0, exports.getSystemTzName)(); }
+    return +(0, date_fns_tz_1.utcToZonedTime)((0, date_fns_tz_1.zonedTimeToUtc)(date, srcTz), targetTz);
+};
+exports.convertDateFromSrcTzToTargetTz = convertDateFromSrcTzToTargetTz;
+/**
+ * @param date Date object or epoch representing the date in particular timezone
+ * @param timezone timezone of the date
+ * @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
+ */
+var convertDateFromTargetTzToSystemTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = (0, exports.getSystemTzName)(); }
+    return (0, exports.convertDateFromSrcTzToTargetTz)(date, timezone, (0, exports.getSystemTzName)());
+};
+exports.convertDateFromTargetTzToSystemTz = convertDateFromTargetTzToSystemTz;
+/**
+ * @param date date in system timezone
+ * @param timezone timezone in which you want to convert this date to
+ * @returns 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
+ */
+var convertDateFromSystemTzToTargetTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = (0, exports.getSystemTzName)(); }
+    return (0, exports.convertDateFromSrcTzToTargetTz)(date, (0, exports.getSystemTzName)(), timezone);
+};
+exports.convertDateFromSystemTzToTargetTz = convertDateFromSystemTzToTargetTz;
 /**
  * returns milliseconds offset from timezone name
  */
@@ -38,6 +86,7 @@ var getTzOffset = function (timezone, date) {
 };
 exports.getTzOffset = getTzOffset;
 /**
+ * @deprecated use convertDateFromTargetTzToSystemTz function to make sure you account for DST cases too
  * convert epoch from one timezone to another
  */
 var switchEpochTimezone = function (date, tzFrom, tzTo) {
@@ -49,14 +98,6 @@ var switchEpochTimezone = function (date, tzFrom, tzTo) {
     return +date + offset;
 };
 exports.switchEpochTimezone = switchEpochTimezone;
-/**
- * adapts date with the system timezone
- */
-var adaptDateWithSystemTz = function (date, selectedTimezone) {
-    var timestampInMillis = (0, exports.switchEpochTimezone)(date, selectedTimezone, (0, exports.getSystemTzName)());
-    return new Date(timestampInMillis);
-};
-exports.adaptDateWithSystemTz = adaptDateWithSystemTz;
 /**
  * Adds or subtract the offset according to timezone passed so that we can get correct start date and end date in that timezone.
  * ex. Lets say we are in Asia/Kolakata timezone on 19th Feb and time is 12:30 AM, and selected Asia/Kabul timezone and preset as Today.
@@ -76,8 +117,8 @@ var getDateForGivenTimezone = function (timezone) {
 exports.getDateForGivenTimezone = getDateForGivenTimezone;
 var getDefaultTimeRangePresets = function (locale) {
     var switchTimezoneOfRange = function (startDate, endDate, timezone) { return [
-        new Date((0, exports.switchEpochTimezone)(startDate, (0, exports.getSystemTzName)(), timezone)),
-        new Date((0, exports.switchEpochTimezone)(endDate, (0, exports.getSystemTzName)(), timezone)),
+        new Date((0, exports.convertDateFromTargetTzToSystemTz)(startDate, timezone)),
+        new Date((0, exports.convertDateFromTargetTzToSystemTz)(endDate, timezone)),
     ]; };
     return [
         {
@@ -143,9 +184,7 @@ var getDefaultTimeRangePresets = function (locale) {
                 var firstday = date.getDate() - (date.getDay() - 1) - 1;
                 var startDate = new Date(date.setDate(firstday));
                 startDate.setHours(0, 0, 0, 0);
-                var endDate = (0, exports.getDateForGivenTimezone)(timezone);
-                endDate.setMonth(startDate.getMonth());
-                endDate.setDate(startDate.getDate() + 6);
+                var endDate = (0, date_fns_1.addDays)(startDate, 6);
                 endDate.setHours(23, 59, 59, 999);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -159,9 +198,7 @@ var getDefaultTimeRangePresets = function (locale) {
                 var lastday = date.getDate() - (date.getDay() - 1) - 2;
                 var endDate = new Date(date.setDate(lastday));
                 endDate.setHours(23, 59, 59, 999);
-                var startDate = (0, exports.getDateForGivenTimezone)(timezone);
-                startDate.setMonth(endDate.getMonth());
-                startDate.setDate(endDate.getDate() - 6);
+                var startDate = (0, date_fns_1.subDays)(endDate, 6);
                 startDate.setHours(0, 0, 0, 0);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -381,7 +418,6 @@ var formatSummaryForCompactVariant = function (_a) {
     // 13 Apr - 15 May
     return "".concat(dateHelpers.formatDate(date[0], 'dd MMM', locale), " \u2013 ").concat(dateHelpers.formatDate(date[1], 'dd MMM', locale));
 };
-// eslint-disable-next-line max-statements
 var formatSummaryValue = function (_a) {
     var date = _a.date, presetId = _a.presetId, presetLabel = _a.presetLabel, _b = _a.timezone, timezone = _b === void 0 ? (0, exports.getSystemTzName)() : _b, _c = _a.formatString, formatString = _c === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _c, _d = _a.showFullDateInSummary, showFullDateInSummary = _d === void 0 ? false : _d, _e = _a.showTimezoneInSummary, showTimezoneInSummary = _e === void 0 ? false : _e, _f = _a.adapter, adapter = _f === void 0 ? date_fns_adapter_1.default : _f, locale = _a.locale, _g = _a.hidePresetLabel, hidePresetLabel = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h;
     var dateHelpers = new date_helpers_1.default(adapter);
@@ -393,7 +429,7 @@ var formatSummaryValue = function (_a) {
         return '';
     }
     var label = hidePresetLabel ? '' : presetLabel;
-    if (displayVariant === 'compact') {
+    if (displayVariant === 'compact' || displayVariant === 'iconButton') {
         return formatSummaryForCompactVariant({
             adapter: adapter,
             date: date,
@@ -411,14 +447,68 @@ var formatSummaryValue = function (_a) {
     return label;
 };
 exports.formatSummaryValue = formatSummaryValue;
-var getHeight = function (_a) {
-    var monthsShown = _a.monthsShown, timeSelect = _a.timeSelect;
-    if (timeSelect && monthsShown === 1) {
-        return constants_2.CALENDAR_HEIGHT + 2 * constants_2.TIME_SELECT_ROW_HEIGHT;
+var ERROR_FORMATE_DATE = 'dd MMM, yyyy hh:mm a';
+var getRangeError = function (_a) {
+    var maxDate = _a.maxDate, minDate = _a.minDate, dateHelpers = _a.dateHelpers, timeRange = _a.timeRange, locale = _a.locale, preset = _a.preset;
+    if ((preset === 'CUSTOM' && timeRange.length !== 2) || typeof preset !== 'string') {
+        return {
+            hasError: true,
+        };
+    }
+    var isValidTimeRange = (0, utils_1.isTimeInRange)(timeRange, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers });
+    if (isValidTimeRange) {
+        return {
+            hasError: false,
+        };
+    }
+    if (minDate && maxDate) {
+        return {
+            hasError: true,
+            errMsg: (0, i18n_interpolation_1.default)(locale.timeRangePicker.minMaxDateErrorMessage, {
+                minDate: dateHelpers.formatDate(minDate, ERROR_FORMATE_DATE),
+                maxDate: dateHelpers.formatDate(maxDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    if (minDate) {
+        return {
+            hasError: true,
+            errMsg: (0, i18n_interpolation_1.default)(locale.timeRangePicker.minDateErrorMessage, {
+                minDate: dateHelpers.formatDate(minDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    if (maxDate) {
+        return {
+            hasError: true,
+            errMsg: (0, i18n_interpolation_1.default)(locale.timeRangePicker.maxDateErrorMessage, {
+                maxDate: dateHelpers.formatDate(maxDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    return {
+        hasError: false,
+    };
+};
+exports.getRangeError = getRangeError;
+var getValidRange = function (_a) {
+    var range = _a.range, minDate = _a.minDate, maxDate = _a.maxDate, dateHelpers = _a.dateHelpers;
+    /* Here we have to manually set 0 ms on startDate and 999ms on endDate, becuase baseui internally clamps day to start of the day.
+    But in this function they only set hours, minutes and seconds to 0 and ms remains as it is. So, isDayInRange check fails, where
+    they checks (startDate<=endDate). As milliseconds of end Date may be greater then start Date, it leads to failure of presets like
+    Last 1 Hour, Last 2 to 1 Hours, Last 12 Hours, etc...
+    */
+    var nextRange = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((range[0] ? [new Date(range[0].setMilliseconds(0))] : [])), false), (0, tslib_1.__read)((range[1] ? [new Date(range[1].setMilliseconds(999))] : [])), false);
+    var originalRange = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(nextRange), false);
+    if (nextRange[0] && minDate) {
+        nextRange[0] = dateHelpers.max([nextRange[0], minDate]);
+    }
+    if (nextRange[1] && maxDate) {
+        nextRange[1] = dateHelpers.min([nextRange[1], maxDate]);
     }
-    if (timeSelect) {
-        return constants_2.CALENDAR_HEIGHT + constants_2.TIME_SELECT_ROW_HEIGHT;
+    if (nextRange[0] && nextRange[1] && dateHelpers.isBefore(nextRange[1], nextRange[0])) {
+        return originalRange;
     }
-    return constants_2.CALENDAR_HEIGHT;
+    return nextRange;
 };
-exports.getHeight = getHeight;
+exports.getValidRange = getValidRange;

package/time-zone-picker/TimezonePicker.d.ts

@@ -1,8 +1,3 @@
 import { ReactElement } from 'react';
 import { TimezonePickerProps } from './types';
-export declare const TimezonePicker: {
-    (props: TimezonePickerProps): ReactElement;
-    defaultProps: {
-        size: string;
-    };
-};
+export declare const TimezonePicker: (props: TimezonePickerProps) => ReactElement;