@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

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

@@ -1,8 +1,8 @@
 import { Intent, Styles } from '../types';
 import { Override } from '../overrides/types';
 import { SharedProps, Size } from '../select/types';
-import { TimePickerProps as BaseTimePickerProps, TimePickerOverrides as BaseTimePickerOverrides } from 'baseui/timepicker';
-import { DateIOAdapter } from 'baseui/datepicker/utils/types';
+import { TimePickerProps as BaseTimePickerProps, TimePickerOverrides as BaseTimePickerOverrides } from '../baseui/timepicker';
+import { DateIOAdapter } from '../baseui/datepicker/utils/types';
 export declare type TimePickerOverrides = {
     [key in keyof BaseTimePickerOverrides]?: Override<SharedProps>;
 };

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

@@ -1,24 +1,20 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Box } from '../box';
 import DefaultTimeRangeList from './TimeRangeList';
 import BaseCalendar from '../date-picker/Calendar';
-import { useOverrides } from '../overrides';
-import { getHeight } from './utils';
+import { mergeOverrides, useOverrides } from '../overrides';
 var RangeSelector = function (_a) {
     var _b, _c;
     var timeRange = _a.timeRange, preset = _a.preset, onChange = _a.onChange, formatString = _a.formatString, props = __rest(_a, ["timeRange", "preset", "onChange", "formatString"]);
     var _d = __read(useOverrides((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.TimeRangeList, DefaultTimeRangeList), 2), TimeRangeList = _d[0], timeRangeListProps = _d[1];
     var _e = __read(useOverrides((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.Calendar, BaseCalendar), 2), Calendar = _e[0], calendarProps = _e[1];
-    var height = getHeight({
-        monthsShown: props.monthsShown,
-        timeSelect: props.timeSelect,
-    });
-    return (_jsxs(Box, __assign({ className: [
-            'flex border-t-1 border-b-1 border-r-0 border-l-0 border-solid spr-border-01',
-            { height: "".concat(height, "px") },
-        ] }, { children: [props.timeRangePresets.length !== 1 ? (_jsx(TimeRangeList, __assign({ onChange: onChange, timeRange: timeRange, preset: preset, timeRangePresets: props.timeRangePresets }, timeRangeListProps), void 0)) : null, _jsx(Box, __assign({ className: "overflow-y-auto" }, { children: _jsx(Calendar, __assign({ timeSelectEnd: props.timeSelect, timeSelectStart: props.timeSelect, value: timeRange, onChange: onChange, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: props.minDate, maxDate: props.maxDate, range: true, monthsShown: props.monthsShown, locale: props.locale, formatString: formatString, 
+    var overrides = timeRangeListProps.overrides, restTimeRangeListProps = __rest(timeRangeListProps, ["overrides"]);
+    var TIME_RANGE_LIST_OVERRIDES = useMemo(function () {
+        return mergeOverrides({ Menu: { props: { overrides: { List: { props: { overrides: { Root: { style: 'h-0' } } } } } } } }, overrides);
+    }, [overrides]);
+    return (_jsxs(Box, __assign({ className: "flex border-t-1 border-b-1 border-r-0 border-l-0 border-solid spr-border-01" }, { children: [props.timeRangePresets.length !== 1 ? (_jsx(TimeRangeList, __assign({ onChange: onChange, timeRange: timeRange, preset: preset, timeRangePresets: props.timeRangePresets, overrides: TIME_RANGE_LIST_OVERRIDES }, restTimeRangeListProps), void 0)) : null, _jsx(Box, __assign({ className: "overflow-y-auto" }, { children: _jsx(Calendar, __assign({ timeSelectEnd: props.timeSelect, timeSelectStart: props.timeSelect, value: timeRange, onChange: onChange, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: props.minDate, maxDate: props.maxDate, range: true, monthsShown: props.monthsShown, locale: props.locale, formatString: formatString, 
                     // @ts-ignore
                     overrides: props.overrides, fixedHeight: props.fixedHeight }, calendarProps), void 0) }), void 0)] }), void 0));
 };

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

@@ -1,7 +1,7 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, useCallback } from 'react';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import cx from '../classNames';
 import { Box } from '../box';
 import RangeSelector from './RangeSelector';
@@ -95,7 +95,7 @@ var RangeSelectorContainer = function (_a) {
                         });
                     },
                 ] }, void 0), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: errMsg }), void 0)] }), void 0)) : null;
-    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), _jsx(RangeSelector, { overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown }, void 0), _jsxs(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps), void 0), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [cx({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [_jsx(Button, __assign({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "sm", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0)] }), void 0));
+    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), _jsx(RangeSelector, { overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown }, void 0), _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { children: _jsxs(Box, __assign({ className: "justify-between w-0 flex-grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps), void 0), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [cx({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0) }), void 0)] }), void 0));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 export default RangeSelectorContainer;

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

@@ -25,7 +25,7 @@ var TimeRangeList = function (_a) {
             {
                 width: isMobileDevice ? '110px' : '160px',
             },
-        ] }, { children: _jsx(Menu, __assign({ "aria-label": locale.timeRangePicker.presetMenuAriaLabel, disableNavigationOnMount: true, resetMenuHighlightOnMouseLeave: true, className: ['focus-visible:-outline-offset-2', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox", "$showFocusOutline": true }, menuProps, { children: timeRangePresets.map(function (timeRangePreset) { return (_jsx(MenuItem, __assign({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
+        ] }, { children: _jsx(Menu, __assign({ "aria-label": locale.timeRangePicker.presetMenuAriaLabel, disableNavigationOnMount: true, resetMenuHighlightOnMouseLeave: true, className: ['focus-visible:-outline-offset-2 min-w-full', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox", "$showFocusOutline": true }, menuProps, { children: timeRangePresets.map(function (timeRangePreset) { return (_jsx(MenuItem, __assign({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
                     'static',
                     function (_a, _b) {
                         var theme = _a.theme;

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

@@ -1,17 +1,23 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from 'react';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+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, switchEpochTimezone, adaptDateWithSystemTz, formatSummaryValue, } from './utils';
+import { getSelectedTimeRange, getSystemTzName, getDefaultTimeRangePresets, convertDateFromTargetTzToSystemTz, convertDateFromSystemTzToTargetTz, formatSummaryValue, } from './utils';
 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 { 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));
+};
 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"]);
     if (__DEV__) {
@@ -41,9 +47,8 @@ export var TimeRangePicker = function (_a) {
     ], false); }, [timeRangePresets, locale]);
     var formatDate = useCallback(function (date, normalizedFormatString) {
         if (normalizedFormatString === void 0) { normalizedFormatString = normalizeDashes(formatString); }
-        var adaptedSystemTz = new Date(switchEpochTimezone(date, timezone, getSystemTzName()));
-        return dateHelpers.formatDate(adaptedSystemTz, normalizedFormatString, dateFnsLocale);
-    }, [formatString, dateHelpers, timezone, dateFnsLocale]);
+        return dateHelpers.formatDate(date, normalizedFormatString, dateFnsLocale);
+    }, [formatString, dateHelpers, dateFnsLocale]);
     var defaultFormatDisplayValue = useCallback(function (date, normalizedFormatString) {
         var _a, _b;
         if (normalizedFormatString === void 0) { normalizedFormatString = normalizeDashes(formatString); }
@@ -97,8 +102,8 @@ export var TimeRangePicker = function (_a) {
         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 = switchEpochTimezone(timeRange[0], getSystemTzName(), timezone);
-            var endMillis = switchEpochTimezone(timeRange[1], getSystemTzName(), timezone);
+            var startMillis = convertDateFromTargetTzToSystemTz(timeRange[0], timezone);
+            var endMillis = convertDateFromTargetTzToSystemTz(timeRange[1], timezone);
             var dates = [new Date(startMillis), new Date(endMillis)];
             onSubmit(__assign({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
         }
@@ -117,12 +122,20 @@ export var TimeRangePicker = function (_a) {
         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 : [];
         }
-        return __spreadArray(__spreadArray([], __read((dates[0] ? [adaptDateWithSystemTz(dates[0], timezone)] : [])), false), __read((dates[1] ? [adaptDateWithSystemTz(dates[1], timezone)] : [])), false);
+        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]);
     var mergedOverrides = useMemo(function () {
         return mergeOverrides({
-            Input: {
-                props: {
+            Input: __assign(__assign({}, (displayVariant === 'iconButton'
+                ? {
+                    component: CalendarIconInputButton,
+                    Before: {
+                        component: function () { return null; },
+                    },
+                }
+                : {})), { props: {
+                    isSelected: !!value && value.length > 0,
+                    locale: locale,
                     overrides: __assign({}, (displayVariant === 'compact'
                         ? {
                             Before: {
@@ -130,8 +143,7 @@ export var TimeRangePicker = function (_a) {
                             },
                         }
                         : {})),
-                },
-            },
+                } }),
             InputWrapper: {
                 props: {
                     'data-testid': 'time-range',
@@ -175,6 +187,8 @@ export var TimeRangePicker = function (_a) {
         disableTimezone,
         locale.timeRangePicker.popoverAriaLabel,
         displayVariant,
+        locale.calendar.calendarButtonAriaLabel,
+        props.size,
     ]);
     var handleInputChange = useCallback(function (_a) {
         var _b = _a.value, _value = _b === void 0 ? [] : _b;
@@ -183,5 +197,5 @@ export var TimeRangePicker = function (_a) {
         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 }, 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 }, void 0));
 };

package/esm/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/esm/time-range-picker/constants.js

@@ -1,5 +1,3 @@
 export var CUSTOM_OPTION = {
     id: 'CUSTOM',
 };
-export var CALENDAR_HEIGHT = 373;
-export var TIME_SELECT_ROW_HEIGHT = 75;

package/esm/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/esm/time-range-picker/index.js

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

package/esm/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,6 @@ 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 = {
@@ -39,7 +38,7 @@ export declare type TimeRangePickerValue = {
     timezone?: string;
 };
 declare type Preset = string;
-export declare type SizeVariant = 'default' | 'compact';
+export declare type SizeVariant = 'default' | 'compact' | 'iconButton';
 export declare type FormatSummaryValueOptions = {
     date: Date[];
     presetId: string;
@@ -60,7 +59,6 @@ export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value
      */
     value?: Preset | Date[];
     preset?: Preset;
-    timezone?: string;
     timeRangePresets?: TimeRangePreset[];
     onSubmit: (timeRangePickerValue: TimeRangePickerValue) => void;
     overrides?: TimeRangePickerOverrides;

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

@@ -1,20 +1,49 @@
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
-import { FormatSummaryValueOptions, 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.
@@ -25,10 +54,6 @@ 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, }: FormatSummaryValueOptions) => string;
-export declare const getHeight: ({ monthsShown, timeSelect }: {
-    monthsShown?: number | undefined;
-    timeSelect?: boolean | undefined;
-}) => number;
 export declare const getRangeError: ({ maxDate, minDate, dateHelpers, timeRange, locale, preset, }: {
     minDate?: Date | null | undefined;
     maxDate?: Date | null | undefined;

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

@@ -1,10 +1,12 @@
 import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
 import { findTimeZone, getZonedTime } from 'timezone-support/dist/index-1900-2050';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
-import getInterpolatedString from 'baseui/helpers/i18n-interpolation';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import getInterpolatedString from '../baseui/helpers/i18n-interpolation';
+import { subDays, addDays } from 'date-fns';
+import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
 import { isTimeInRange, normalizeDashes } from '../date-picker/utils';
-import { CALENDAR_HEIGHT, CUSTOM_OPTION, TIME_SELECT_ROW_HEIGHT } from './constants';
+import { CUSTOM_OPTION } from './constants';
 export var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
     var id = _a.id;
     return id === selectedTimeRange;
@@ -22,6 +24,48 @@ export var getSystemTzName = function () {
     }
     return SYSTEM_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.
+  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 var convertDateFromSrcTzToTargetTz = function (date, srcTz, targetTz) {
+    if (srcTz === void 0) { srcTz = getSystemTzName(); }
+    if (targetTz === void 0) { targetTz = getSystemTzName(); }
+    return +utcToZonedTime(zonedTimeToUtc(date, srcTz), targetTz);
+};
+/**
+ * @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 var convertDateFromTargetTzToSystemTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = getSystemTzName(); }
+    return convertDateFromSrcTzToTargetTz(date, timezone, getSystemTzName());
+};
+/**
+ * @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 var convertDateFromSystemTzToTargetTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = getSystemTzName(); }
+    return convertDateFromSrcTzToTargetTz(date, getSystemTzName(), timezone);
+};
 /**
  * returns milliseconds offset from timezone name
  */
@@ -32,6 +76,7 @@ export var getTzOffset = function (timezone, date) {
     return ((_b = (_a = zonedTime.zone) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0) * 60 * 1000;
 };
 /**
+ * @deprecated use convertDateFromTargetTzToSystemTz function to make sure you account for DST cases too
  * convert epoch from one timezone to another
  */
 export var switchEpochTimezone = function (date, tzFrom, tzTo) {
@@ -42,13 +87,6 @@ export var switchEpochTimezone = function (date, tzFrom, tzTo) {
     var offset = tzToOffset - tzFromOffset;
     return +date + offset;
 };
-/**
- * adapts date with the system timezone
- */
-export var adaptDateWithSystemTz = function (date, selectedTimezone) {
-    var timestampInMillis = switchEpochTimezone(date, selectedTimezone, getSystemTzName());
-    return new Date(timestampInMillis);
-};
 /**
  * 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.
@@ -67,8 +105,8 @@ export var getDateForGivenTimezone = function (timezone) {
 };
 export var getDefaultTimeRangePresets = function (locale) {
     var switchTimezoneOfRange = function (startDate, endDate, timezone) { return [
-        new Date(switchEpochTimezone(startDate, getSystemTzName(), timezone)),
-        new Date(switchEpochTimezone(endDate, getSystemTzName(), timezone)),
+        new Date(convertDateFromTargetTzToSystemTz(startDate, timezone)),
+        new Date(convertDateFromTargetTzToSystemTz(endDate, timezone)),
     ]; };
     return [
         {
@@ -134,9 +172,7 @@ export 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 = getDateForGivenTimezone(timezone);
-                endDate.setMonth(startDate.getMonth());
-                endDate.setDate(startDate.getDate() + 6);
+                var endDate = addDays(startDate, 6);
                 endDate.setHours(23, 59, 59, 999);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -150,9 +186,7 @@ export 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 = getDateForGivenTimezone(timezone);
-                startDate.setMonth(endDate.getMonth());
-                startDate.setDate(endDate.getDate() - 6);
+                var startDate = subDays(endDate, 6);
                 startDate.setHours(0, 0, 0, 0);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -371,7 +405,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
 export var formatSummaryValue = function (_a) {
     var date = _a.date, presetId = _a.presetId, presetLabel = _a.presetLabel, _b = _a.timezone, timezone = _b === void 0 ? getSystemTzName() : _b, _c = _a.formatString, formatString = _c === void 0 ? 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 ? dateFnsAdapter : _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 DateHelpers(adapter);
@@ -383,7 +416,7 @@ export var formatSummaryValue = function (_a) {
         return '';
     }
     var label = hidePresetLabel ? '' : presetLabel;
-    if (displayVariant === 'compact') {
+    if (displayVariant === 'compact' || displayVariant === 'iconButton') {
         return formatSummaryForCompactVariant({
             adapter: adapter,
             date: date,
@@ -400,16 +433,6 @@ export var formatSummaryValue = function (_a) {
     }
     return label;
 };
-export var getHeight = function (_a) {
-    var monthsShown = _a.monthsShown, timeSelect = _a.timeSelect;
-    if (timeSelect && monthsShown === 1) {
-        return CALENDAR_HEIGHT + 2 * TIME_SELECT_ROW_HEIGHT;
-    }
-    if (timeSelect) {
-        return CALENDAR_HEIGHT + TIME_SELECT_ROW_HEIGHT;
-    }
-    return CALENDAR_HEIGHT;
-};
 var ERROR_FORMATE_DATE = 'dd MMM, yyyy hh:mm a';
 export var getRangeError = function (_a) {
     var maxDate = _a.maxDate, minDate = _a.minDate, dateHelpers = _a.dateHelpers, timeRange = _a.timeRange, locale = _a.locale, preset = _a.preset;

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

@@ -22,4 +22,6 @@ export declare type TimezonePickerProps = {
     style?: Styles;
     overrides?: TimezonePickerOverrides;
     size?: Size;
+    clearable?: boolean;
+    placeholder?: string;
 };

package/esm/tooltip/disabled-tooltip-container.d.ts

@@ -21,13 +21,14 @@ declare const DisabledTooltipContainer: {
         onMouseEnterDelay?: number | undefined;
         onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("baseui/popover").PopoverOverrides | undefined;
+        overrides?: import("../baseui/popover").PopoverOverrides | undefined;
         placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         popperOptions?: any;
         renderAll?: boolean | undefined;
         returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions) | undefined;
         triggerType?: "hover" | "click" | undefined;
         popoverMargin?: number | undefined;
+        repositionOnResize?: boolean | undefined;
     };
 };
 export default DisabledTooltipContainer;

package/esm/tooltip/disabled-tooltip-container.js

@@ -2,7 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Tooltip from './tooltip';
-import baseDefaultProps from 'baseui/tooltip/default-props';
+import baseDefaultProps from '../baseui/tooltip/default-props';
 import { mergeOverrides } from '../overrides';
 var DisabledTooltipContainer = function (_a) {
     var content = _a.content, children = _a.children, onMouseEnterDelay = _a.onMouseEnterDelay, onMouseLeaveDelay = _a.onMouseLeaveDelay, overrides = _a.overrides, props = __rest(_a, ["content", "children", "onMouseEnterDelay", "onMouseLeaveDelay", "overrides"]);

package/esm/tooltip/overrides.js

@@ -1,7 +1,10 @@
 import { __assign } from "tslib";
-export var getArrowStyle = function (_a) {
+export var getArrowStyle = function (_a, _b) {
     var theme = _a.theme;
-    return ({ backgroundColor: theme.spr.tooltip01 });
+    var $intent = _b.$intent;
+    return ({
+        backgroundColor: $intent === 'ai' ? theme.spr.clrMagenta : theme.spr.tooltip01,
+    });
 };
 export var getBodyStyle = function () { return ({
     backgroundColor: 'transparent',
@@ -31,10 +34,12 @@ var getTypography = function (_a, _b) {
 };
 export var innerStyles = [
     'break-words',
-    function (utils) {
+    function (utils, _a) {
+        var $intent = _a.$intent;
         var theme = utils.theme;
+        var isAiIntent = $intent === 'ai';
         return {
-            backgroundColor: theme.spr.tooltip01,
+            backgroundColor: isAiIntent ? theme.spr.clrMagenta : theme.spr.tooltip01,
             color: theme.spr.text06,
             borderTopLeftRadius: theme.borderRadius['4'],
             borderTopRightRadius: theme.borderRadius['4'],
@@ -45,8 +50,8 @@ export var innerStyles = [
             paddingBottom: theme.padding['2'],
             paddingLeft: theme.padding['3'],
             paddingRight: theme.padding['3'],
-            minWidth: '72px',
             boxSizing: 'border-box',
+            width: 'max-content',
         };
     },
     getTypography,

package/esm/tooltip/stateful-tooltip-container.d.ts

@@ -21,13 +21,14 @@ declare const StatefulContainer: {
         onMouseEnterDelay?: number | undefined;
         onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("baseui/popover").PopoverOverrides | undefined;
+        overrides?: import("../baseui/popover").PopoverOverrides | undefined;
         placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         popperOptions?: any;
         renderAll?: boolean | undefined;
         returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions) | undefined;
         triggerType?: "hover" | "click" | undefined;
         popoverMargin?: number | undefined;
+        repositionOnResize?: boolean | undefined;
     };
 };
 export default StatefulContainer;

package/esm/tooltip/stateful-tooltip-container.js

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import baseDefaultProps from 'baseui/tooltip/default-props';
+import baseDefaultProps from '../baseui/tooltip/default-props';
 import { StatefulContainer as StatefulPopoverContainer } from '../popover';
 var StatefulContainer = function (props) { return (_jsx(StatefulPopoverContainer, __assign({}, props), void 0)); };
 StatefulContainer.displayName = 'StatefulContainer';

package/esm/tooltip/stateful-tooltip.d.ts

@@ -23,12 +23,13 @@ declare const StatefulTooltip: {
         onMouseEnterDelay?: number | undefined;
         onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("baseui/popover").PopoverOverrides | undefined;
+        overrides?: import("../baseui/popover").PopoverOverrides | undefined;
         placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         popperOptions?: any;
         renderAll?: boolean | undefined;
         triggerType?: "hover" | "click" | undefined;
         popoverMargin?: number | undefined;
+        repositionOnResize?: boolean | undefined;
     };
 };
 export default StatefulTooltip;

package/esm/tooltip/stateful-tooltip.js

@@ -1,13 +1,11 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import defaultProps from 'baseui/tooltip/default-props';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import defaultProps from '../baseui/tooltip/default-props';
 import StatefulContainer from './stateful-tooltip-container';
 import Tooltip from './tooltip';
 var StatefulTooltip = function (props) {
-    var children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = __rest(props, ["children", "size", "label", "overrides"]);
-    var _overrides = useConvertOverrides(overrides, undefined, [overrides]);
-    return (_jsx(StatefulContainer, __assign({ dismissOnClickOutside: true, dismissOnEsc: true, triggerType: "hover" }, restProps, { overrides: _overrides }, { children: function (tooltipProps) { return (_jsx(Tooltip, __assign({}, tooltipProps, { size: size, label: label }, { children: children }), void 0)); } }), void 0));
+    var children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, viewportAsBoundary = props.viewportAsBoundary, intent = props.intent, restProps = __rest(props, ["children", "size", "label", "overrides", "viewportAsBoundary", "intent"]);
+    return (_jsx(StatefulContainer, __assign({ dismissOnClickOutside: true, dismissOnEsc: true, triggerType: "hover" }, restProps, { overrides: overrides }, { children: function (tooltipProps) { return (_jsx(Tooltip, __assign({}, tooltipProps, { size: size, label: label, viewportAsBoundary: viewportAsBoundary, intent: intent }, { children: children }), void 0)); } }), void 0));
 };
 StatefulTooltip.displayName = 'StatefulTooltip';
 StatefulTooltip.defaultProps = __assign(__assign({}, defaultProps), { showArrow: true, focusLock: false, returnFocus: false });

package/esm/tooltip/styled-component.d.ts

@@ -1,2 +1,2 @@
-export { StyledBody, StyledArrow, StyledInner } from 'baseui/tooltip';
+export { StyledBody, StyledArrow, StyledInner } from '../baseui/tooltip';
 export declare const StyledLabel: import("../style/styled").StyledComponent;

package/esm/tooltip/styled-component.js

@@ -1,3 +1,3 @@
 import styled from '../style/styled';
-export { StyledBody, StyledArrow, StyledInner } from 'baseui/tooltip';
+export { StyledBody, StyledArrow, StyledInner } from '../baseui/tooltip';
 export var StyledLabel = styled('div', 'spr-text-02 mb-1 typography-l1 font-medium self-start');

package/esm/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { TooltipProps } from './types';
 declare const Tooltip: {
-    ({ size, label, content, overrides, children, targetElement, isOpen, triggerType, returnFocus, focusLock, placement, ...restProps }: TooltipProps): ReactElement;
+    ({ size, label, content, overrides, children, targetElement, isOpen, triggerType, returnFocus, focusLock, placement, popperOptions, ignoreBoundary, viewportAsBoundary, intent, ...restProps }: TooltipProps): ReactElement;
     displayName: string;
 };
 export default Tooltip;