@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/time-range-picker/RangeSelectorContainer.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var date_helpers_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-helpers"));
-var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var date_helpers_1 = tslib_1.__importDefault(require("../baseui/datepicker/utils/date-helpers"));
+var classNames_1 = tslib_1.__importDefault(require("../classNames"));
 var box_1 = require("../box");
-var RangeSelector_1 = (0, tslib_1.__importDefault)(require("./RangeSelector"));
+var RangeSelector_1 = tslib_1.__importDefault(require("./RangeSelector"));
 var typography_1 = require("../typography");
 var button_1 = require("../button");
 var styled_component_1 = require("./styled-component");
 var stack_1 = require("../stack");
-var TimezonePicker_1 = (0, tslib_1.__importDefault)(require("./TimezonePicker"));
-var error_1 = (0, tslib_1.__importDefault)(require("../icon/components/error"));
+var TimezonePicker_1 = tslib_1.__importDefault(require("./TimezonePicker"));
+var error_1 = tslib_1.__importDefault(require("../icon/components/error"));
 var styled_components_1 = require("../date-picker/styled-components");
 var locale_1 = require("../locale");
 var utils_1 = require("./utils");
@@ -27,23 +27,36 @@ var getPresetId = function (selectedPreset, selectedValue) {
     return selectedValue;
 };
 var RangeSelectorContainer = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var adapter = _a.adapter, timeRangePresets = _a.timeRangePresets, onChange = _a.onChange, onSubmit = _a.onSubmit, selectedTimezone = _a.timezone, selectedValue = _a.value, selectedTimeRange = _a.timeRange, selectedPreset = _a.preset, minDate = _a.minDate, maxDate = _a.maxDate, monthsShown = _a.monthsShown, disableTimezone = _a.disableTimezone, props = (0, tslib_1.__rest)(_a, ["adapter", "timeRangePresets", "onChange", "onSubmit", "timezone", "value", "timeRange", "preset", "minDate", "maxDate", "monthsShown", "disableTimezone"]);
+    var _b, _c, _d, _e, _f, _g;
+    var adapter = _a.adapter, timeRangePresets = _a.timeRangePresets, onChange = _a.onChange, onSubmit = _a.onSubmit, selectedTimezone = _a.timezone, selectedValue = _a.value, selectedTimeRange = _a.timeRange, selectedPreset = _a.preset, _minDate = _a.minDate, _maxDate = _a.maxDate, monthsShown = _a.monthsShown, disableTimezone = _a.disableTimezone, timezoneOptions = _a.timezoneOptions, hidePresetSearch = _a.hidePresetSearch, props = tslib_1.__rest(_a, ["adapter", "timeRangePresets", "onChange", "onSubmit", "timezone", "value", "timeRange", "preset", "minDate", "maxDate", "monthsShown", "disableTimezone", "timezoneOptions", "hidePresetSearch"]);
     var dateHelpers = (0, react_1.useMemo)(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var locale = (0, locale_1.useLocale)();
-    var _g = (0, tslib_1.__read)((0, react_1.useState)(selectedTimeRange), 2), timeRange = _g[0], setTimeRange = _g[1];
-    var _h = (0, tslib_1.__read)((0, react_1.useState)(getPresetId(selectedPreset, selectedValue)), 2), preset = _h[0], setPreset = _h[1];
-    var _j = (0, tslib_1.__read)((0, react_1.useState)(selectedTimezone), 2), timezone = _j[0], setTimezone = _j[1];
+    var _h = tslib_1.__read((0, react_1.useState)(selectedTimeRange), 2), timeRange = _h[0], setTimeRange = _h[1];
+    var _j = tslib_1.__read((0, react_1.useState)(getPresetId(selectedPreset, selectedValue)), 2), preset = _j[0], setPreset = _j[1];
+    var _k = tslib_1.__read((0, react_1.useState)(selectedTimezone), 2), timezone = _k[0], setTimezone = _k[1];
+    var _l = tslib_1.__read(selectedTimeRange, 2), startDate = _l[0], endDate = _l[1];
+    var startTimeEpoch = startDate === null || startDate === void 0 ? void 0 : startDate.getTime();
+    var endTimeEpoch = endDate === null || endDate === void 0 ? void 0 : endDate.getTime();
+    var _m = (0, react_1.useMemo)(function () {
+        return (0, utils_1.getMinMaxDateInTimezone)({
+            maxDate: _maxDate,
+            minDate: _minDate,
+            timezone: timezone,
+            timezoneOptions: timezoneOptions,
+        });
+    }, [_minDate, _maxDate, timezone, timezoneOptions]), minDate = _m.minDate, maxDate = _m.maxDate;
     (0, react_1.useEffect)(function () {
         setTimeRange(selectedTimeRange);
         setPreset(getPresetId(selectedPreset, selectedValue));
-    }, [selectedTimeRange, selectedValue, selectedPreset]);
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Header, styled_component_1.StyledHeader), 2), Header = _k[0], headerProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, typography_1.Typography), 2), HeaderBeforeEnhancer = _l[0], headerBeforeEnhancerProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_d = props.overrides) === null || _d === void 0 ? void 0 : _d.Footer, styled_components_1.StyledFooter), 2), Footer = _m[0], footerProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_e = props.overrides) === null || _e === void 0 ? void 0 : _e.FooterBeforeEnhancer, styled_components_1.StyledFooterBeforeEnhancer), 2), FooterBeforeEnhancer = _o[0], footerBeforeEnhancerProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, TimezonePicker_1.default), 2), TimezonePicker = _p[0], timezonePickerProps = _p[1];
-    var _q = (0, react_1.useMemo)(function () {
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- need to check only start and end epoch
+    }, [startTimeEpoch, endTimeEpoch, selectedValue, selectedPreset]);
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Header, styled_component_1.StyledHeader), 2), Header = _o[0], headerProps = _o[1];
+    var _p = tslib_1.__read((0, overrides_1.useOverrides)((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, typography_1.Typography), 2), HeaderBeforeEnhancer = _p[0], headerBeforeEnhancerProps = _p[1];
+    var _q = tslib_1.__read((0, overrides_1.useOverrides)((_d = props.overrides) === null || _d === void 0 ? void 0 : _d.Footer, styled_components_1.StyledFooter), 2), Footer = _q[0], footerProps = _q[1];
+    var _r = tslib_1.__read((0, overrides_1.useOverrides)((_e = props.overrides) === null || _e === void 0 ? void 0 : _e.FooterBeforeEnhancer, styled_components_1.StyledFooterBeforeEnhancer), 2), FooterBeforeEnhancer = _r[0], footerBeforeEnhancerProps = _r[1];
+    var _s = tslib_1.__read((0, overrides_1.useOverrides)((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, TimezonePicker_1.default), 2), TimezonePicker = _s[0], timezonePickerProps = _s[1];
+    var _t = tslib_1.__read((0, overrides_1.useOverrides)((_g = props.overrides) === null || _g === void 0 ? void 0 : _g.RangeSelector, RangeSelector_1.default), 2), RangeSelector = _t[0], rangeSelectorProps = _t[1];
+    var _u = (0, react_1.useMemo)(function () {
         return (0, utils_1.getRangeError)({
             dateHelpers: dateHelpers,
             timeRange: timeRange,
@@ -52,52 +65,58 @@ var RangeSelectorContainer = function (_a) {
             locale: locale,
             preset: preset,
         });
-    }, [timeRange, minDate, maxDate, dateHelpers, locale, preset]), hasError = _q.hasError, errMsg = _q.errMsg;
+    }, [timeRange, minDate, maxDate, dateHelpers, locale, preset]), hasError = _u.hasError, errMsg = _u.errMsg;
     var onDateChange = (0, react_1.useCallback)(function (_a) {
         var _b, _c, _d;
         var date = _a.date, _preset = _a.preset;
         // if preset is passed then we have to get the time range limits else date is array
         if (_preset) {
-            var nextDate = (_d = (_c = (_b = (0, utils_1.getSelectedTimeRange)(_preset, timeRangePresets)) === null || _b === void 0 ? void 0 : _b.getTimeRangeLimits) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : [];
-            /* 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...
-            */
-            nextDate = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((nextDate[0] ? [new Date(nextDate[0].setMilliseconds(0))] : [])), false), (0, tslib_1.__read)((nextDate[1] ? [new Date(nextDate[1].setMilliseconds(999))] : [])), false);
+            var nextDate = (0, utils_1.getValidRange)({
+                range: (_d = (_c = (_b = (0, utils_1.getSelectedTimeRange)(_preset, timeRangePresets)) === null || _b === void 0 ? void 0 : _b.getTimeRangeLimits) === null || _c === void 0 ? void 0 : _c.call(_b, timezone)) !== null && _d !== void 0 ? _d : [],
+                dateHelpers: dateHelpers,
+                maxDate: maxDate,
+                minDate: minDate,
+            }).map(function (time) { return new Date((0, utils_1.convertDateFromSystemTzToTargetTz)(time, timezone, timezoneOptions)); });
             setPreset(_preset);
             setTimeRange(nextDate);
-            onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)({ value: _preset, date: nextDate, preset: _preset }, (disableTimezone ? {} : { timezone: timezone })));
+            onChange === null || onChange === void 0 ? void 0 : onChange(tslib_1.__assign({ value: _preset, date: nextDate, preset: _preset }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
             var nextDate = date;
             if (nextDate.length === 2) {
                 // handles the case when user selects the end time which is less then start time
-                var _e = (0, tslib_1.__read)(nextDate, 2), start = _e[0], end = _e[1];
+                var _e = tslib_1.__read(nextDate, 2), start = _e[0], end = _e[1];
                 if (dateHelpers.isAfter(start, end)) {
                     nextDate = [start, start];
                 }
             }
             setTimeRange(nextDate);
             setPreset('CUSTOM');
-            onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)({ value: nextDate, date: nextDate, preset: 'CUSTOM' }, (disableTimezone ? {} : { timezone: timezone })));
+            onChange === null || onChange === void 0 ? void 0 : onChange(tslib_1.__assign({ value: nextDate, date: nextDate, preset: 'CUSTOM' }, (disableTimezone ? {} : { timezone: timezone })));
         }
-    }, [setTimeRange, dateHelpers, timeRangePresets, onChange, timezone, disableTimezone]);
+    }, [
+        setTimeRange,
+        dateHelpers,
+        timeRangePresets,
+        onChange,
+        timezone,
+        disableTimezone,
+        minDate,
+        maxDate,
+        timezoneOptions,
+    ]);
     var handleSubmit = (0, react_1.useCallback)(function () {
-        return onSubmit((0, tslib_1.__assign)({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
+        return onSubmit(tslib_1.__assign({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);
     // show error message only when it is present, hasError can be true when user has not selected any date,
     // but we are showing any error message for that scenario.
-    var errorEl = errMsg ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_1.default, { size: 14, className: [
-                    'block',
-                    function (_a) {
-                        var theme = _a.theme;
-                        return ({
-                            fill: theme.spr.clrRed,
-                        });
-                    },
-                ] }, void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ className: "my-0", variant: "bs3" }, { children: errMsg }), void 0)] }), void 0)) : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, (0, tslib_1.__assign)({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, (0, tslib_1.__assign)({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, (0, tslib_1.__assign)({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(RangeSelector_1.default, { 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), (0, jsx_runtime_1.jsx)(Footer, (0, tslib_1.__assign)({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "justify-between w-0 flex-grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, (0, tslib_1.__assign)({}, footerBeforeEnhancerProps), void 0), (0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, (0, tslib_1.__assign)({ className: "flex self-end" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__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));
+    var errorEl = errMsg ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_1.default, { size: 14, className: "block", style: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        fill: theme.spr.clrRed,
+                    });
+                } }), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__assign({ 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, hidePresetSearch: hidePresetSearch, footerContent: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 exports.default = RangeSelectorContainer;

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { TimeRangeListProps } from './types';
 declare const _default: import("react").MemoExoticComponent<{
-    ({ onChange, timeRange, preset, timeRangePresets, overrides, }: TimeRangeListProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    ({ onChange, timeRange, preset, timeRangePresets, overrides, hidePresetSearch, }: TimeRangeListProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 }>;
 export default _default;

package/time-range-picker/TimeRangeList.js

@@ -5,12 +5,24 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var menu_1 = require("../menu");
 var box_1 = require("../box");
+var search_1 = require("../search");
+var typography_1 = require("../typography");
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
 var useIsMobileDevice_1 = require("../hooks/useIsMobileDevice");
+var useStickyElement_1 = tslib_1.__importDefault(require("../hooks/useStickyElement"));
+var filterPresetsByQuery = function (presets, query) {
+    var q = query.trim().toLowerCase();
+    if (!q) {
+        return presets;
+    }
+    return presets.filter(function (p) { return p.label.toLowerCase().includes(q); });
+};
 var TimeRangeList = function (_a) {
-    var onChange = _a.onChange, timeRange = _a.timeRange, preset = _a.preset, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides;
+    var onChange = _a.onChange, timeRange = _a.timeRange, preset = _a.preset, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides, hidePresetSearch = _a.hidePresetSearch;
     var locale = (0, locale_1.useLocale)();
+    var _b = tslib_1.__read((0, react_1.useState)(''), 2), presetSearch = _b[0], setPresetSearch = _b[1];
+    var filteredPresets = (0, react_1.useMemo)(function () { return filterPresetsByQuery(timeRangePresets, presetSearch); }, [timeRangePresets, presetSearch]);
     var onItemSelect = (0, react_1.useCallback)(function (timeRangePreset) {
         if (timeRangePreset.id === 'CUSTOM') {
             onChange({ date: timeRange });
@@ -20,23 +32,21 @@ var TimeRangeList = function (_a) {
         }
     }, [onChange, timeRange]);
     var isMobileDevice = (0, useIsMobileDevice_1.useIsMobileDevice)();
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Menu, menu_1.Menu), 2), Menu = _b[0], menuProps = _b[1];
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, menu_1.MenuItem), 2), MenuItem = _c[0], menuItemProps = _c[1];
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: [
-            'overflow-y-auto border-r-1 border-l-0 border-t-0 border-b-0 spr-border-01 border-solid',
-            {
-                width: isMobileDevice ? '110px' : '160px',
-            },
-        ] }, { children: (0, jsx_runtime_1.jsx)(Menu, (0, tslib_1.__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 ((0, jsx_runtime_1.jsx)(MenuItem, (0, tslib_1.__assign)({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
-                    'static',
-                    function (_a, _b) {
-                        var theme = _a.theme;
-                        var $selected = _b.$selected;
-                        return ({
-                            color: $selected ? theme.spr.text01 : theme.spr.text02,
-                        });
-                    },
-                ], "data-testid": timeRangePreset.id, role: "option" }, menuItemProps, { children: timeRangePreset.label }), timeRangePreset.id)); }) }), void 0) }), void 0));
+    var _c = (0, useStickyElement_1.default)(), isSticky = _c.isSticky, setStickySentinelRef = _c.setStickySentinelRef;
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Menu, menu_1.Menu), 2), Menu = _d[0], menuProps = _d[1];
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, menu_1.MenuItem), 2), MenuItem = _e[0], menuItemProps = _e[1];
+    var menuEl = ((0, jsx_runtime_1.jsx)(Menu, tslib_1.__assign({ "aria-label": locale.timeRangePicker.presetMenuAriaLabel, disableNavigationOnMount: true, resetMenuHighlightOnMouseLeave: true, className: ['min-w-full py-0', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox" }, menuProps, { children: filteredPresets.length === 0 ? ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "px-3 py-2" }, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "bs3", className: "spr-text-03" }, { children: locale.timeRangePicker.presetSearchNoResults })) }))) : (filteredPresets.map(function (timeRangePreset, index) { return ((0, jsx_runtime_1.jsx)(MenuItem, tslib_1.__assign({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
+                'static',
+                function (_, _a) {
+                    var $selected = _a.$selected;
+                    return ($selected ? 'spr-text-01' : 'spr-text-02');
+                },
+                index === 0 ? 'mt-0' : '',
+            ], "data-testid": timeRangePreset.id, role: "option" }, menuItemProps, { children: timeRangePreset.label }), timeRangePreset.id)); })) })));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: [
+            'flex flex-col border-r-1 border-l-0 border-t-0 border-b-0 spr-border-01 border-solid min-h-0',
+            isMobileDevice ? 'w-27.5' : 'w-56',
+        ] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "overflow-y-auto flex-1 min-h-0", tabIndex: -1 }, { children: [hidePresetSearch ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { ref: setStickySentinelRef }), (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: ['p-2 sticky top-0 z-1 spr-bg-primary', isSticky ? 'spr-shadow-100' : ''] }, { children: (0, jsx_runtime_1.jsx)(search_1.Search, { size: "medium", variant: "light", value: presetSearch, onChange: function (e) { return setPresetSearch(e.target.value); }, placeholder: locale.timeRangePicker.presetSearchPlaceholder, "aria-label": locale.timeRangePicker.presetSearchAriaLabel, "data-testid": "time-range-preset-search" }) }))] })), menuEl] })) })));
 };
 exports.default = (0, react_1.memo)(TimeRangeList);
 TimeRangeList.displayName = 'TimeRangeList';

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

@@ -1,3 +1,6 @@
 import { ReactElement } from 'react';
 import { TimeRangePickerProps } from './types';
-export declare const TimeRangePicker: ({ adapter, onSubmit, timezone: _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, ...props }: TimeRangePickerProps) => ReactElement;
+export declare const TimeRangePicker: {
+    ({ adapter, onSubmit, timezone: _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, ...props }: TimeRangePickerProps): ReactElement;
+    __standard: string;
+};

package/time-range-picker/TimeRangePicker.js

@@ -4,10 +4,11 @@ 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 RangeSelectorContainer_1 = (0, tslib_1.__importDefault)(require("./RangeSelectorContainer"));
+var date_fns_adapter_1 = tslib_1.__importDefault(require("../baseui/datepicker/utils/date-fns-adapter"));
+var date_helpers_1 = tslib_1.__importDefault(require("../baseui/datepicker/utils/date-helpers"));
+var RangeSelectorContainer_1 = tslib_1.__importDefault(require("./RangeSelectorContainer"));
 var utils_1 = require("./utils");
+var getSystemTzName_1 = require("./getSystemTzName");
 var date_picker_1 = require("../date-picker");
 var locale_1 = require("../locale");
 var constants_1 = require("../date-picker/constants");
@@ -15,14 +16,14 @@ 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 calendar_solid_1 = 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));
+    return ((0, jsx_runtime_1.jsx)(button_1.IconButton, tslib_1.__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: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, {}) })));
 };
 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"]);
+    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.formatString, formatString = _c === void 0 ? constants_1.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 = tslib_1.__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');
@@ -30,24 +31,24 @@ var TimeRangePicker = function (_a) {
     }
     var timezone = (0, react_1.useMemo)(function () {
         if (disableTimezone) {
-            return (0, utils_1.getSystemTzName)();
+            return (0, getSystemTzName_1.getSystemTzName)();
         }
-        return _timezone !== null && _timezone !== void 0 ? _timezone : (0, utils_1.getSystemTzName)();
+        return _timezone !== null && _timezone !== void 0 ? _timezone : (0, getSystemTzName_1.getSystemTzName)();
     }, [_timezone, disableTimezone]);
     var dateFnsLocale = (0, react_1.useMemo)(function () { return (0, utils_2.prepareLocale)(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
     var dateHelpers = (0, react_1.useMemo)(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var locale = (0, locale_1.useLocale)();
-    var _j = (0, date_picker_1.useDatePickerState)({
+    var _k = (0, date_picker_1.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 = (0, react_1.useMemo)(function () { return (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((timeRangePresets !== null && timeRangePresets !== void 0 ? timeRangePresets : (0, utils_1.getDefaultTimeRangePresets)(locale))), false), [
+    var timeRangeList = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((timeRangePresets !== null && timeRangePresets !== void 0 ? timeRangePresets : (0, utils_1.getDefaultTimeRangePresets)(locale, timezoneOptions))), false), [
         {
             id: constants_2.CUSTOM_OPTION.id,
             label: locale.timeRangePicker.customRange,
         },
-    ], false); }, [timeRangePresets, locale]);
+    ], false); }, [timeRangePresets, locale, timezoneOptions]);
     var formatDate = (0, react_1.useCallback)(function (date, normalizedFormatString) {
         if (normalizedFormatString === void 0) { normalizedFormatString = (0, utils_2.normalizeDashes)(formatString); }
         return dateHelpers.formatDate(date, normalizedFormatString, dateFnsLocale);
@@ -99,23 +100,29 @@ 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.convertDateFromTargetTzToSystemTz)(timeRange[0], timezone);
-            var endMillis = (0, utils_1.convertDateFromTargetTzToSystemTz)(timeRange[1], timezone);
+            var startMillis = (0, utils_1.convertDateFromTargetTzToSystemTz)(timeRange[0], timezone, timezoneOptions);
+            var endMillis = (0, utils_1.convertDateFromTargetTzToSystemTz)(timeRange[1], timezone, timezoneOptions);
             var dates = [new Date(startMillis), new Date(endMillis)];
-            onSubmit((0, tslib_1.__assign)({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
+            onSubmit(tslib_1.__assign({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
+            var _e = (0, utils_1.getMinMaxDateInTimezone)({
+                maxDate: maxDate,
+                minDate: minDate,
+                timezone: timezone,
+                timezoneOptions: timezoneOptions,
+            }), tzMinDate = _e.minDate, tzMaxDate = _e.maxDate;
             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(tslib_1.__assign({ value: preset, preset: preset, date: (0, utils_1.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 = (0, react_1.useMemo)(function () {
         var _a, _b, _c;
         var dates;
@@ -123,13 +130,46 @@ 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] ? [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]);
+        return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((dates[0] ? [new Date((0, utils_1.convertDateFromSystemTzToTargetTz)(dates[0], timezone, timezoneOptions))] : [])), false), tslib_1.__read((dates[1] ? [new Date((0, utils_1.convertDateFromSystemTzToTargetTz)(dates[1], timezone, timezoneOptions))] : [])), false);
+    }, [value, timeRangeList, timezone, preset, dateHelpers, minDate, maxDate, timezoneOptions]);
+    var handleInputChange = (0, react_1.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(tslib_1.__assign({ value: _value, preset: 'CUSTOM', date: _value }, (disableTimezone ? {} : { timezone: timezone })));
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    }, [onSubmit, timezone, onClear, disableTimezone]);
+    var handleClearBtnClick = (0, react_1.useCallback)(function () {
+        handleInputChange({ value: [] });
+    }, [handleInputChange]);
+    var rangeSelectorContainerOverrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            Footer: tslib_1.__assign({}, (displayVariant === 'iconButton' && clearable
+                ? {
+                    props: {
+                        showClearButton: true,
+                        handleClearBtnClick: handleClearBtnClick,
+                    },
+                }
+                : {})),
+        }, overrides);
+    }, [displayVariant, overrides, handleClearBtnClick, clearable]);
     var mergedOverrides = (0, react_1.useMemo)(function () {
+        var _a = (0, utils_1.getMinMaxDateInTimezone)({
+            maxDate: maxDate,
+            minDate: minDate,
+            timezone: timezone,
+            timezoneOptions: timezoneOptions,
+        }), tzMinDate = _a.minDate, tzMaxDate = _a.maxDate;
         return (0, overrides_1.mergeOverrides)({
-            Input: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (displayVariant === 'iconButton'
+            Input: tslib_1.__assign(tslib_1.__assign({}, (displayVariant === 'iconButton'
                 ? {
                     component: CalendarIconInputButton,
                     Before: {
@@ -139,7 +179,10 @@ var TimeRangePicker = function (_a) {
                 : {})), { props: {
                     isSelected: !!value && value.length > 0,
                     locale: locale,
-                    overrides: (0, tslib_1.__assign)({}, (displayVariant === 'compact'
+                    intent: (0, utils_2.isTimeInRange)(timeRange, { minDate: tzMinDate, maxDate: tzMaxDate, dateHelpers: dateHelpers })
+                        ? props.intent
+                        : 'error',
+                    overrides: tslib_1.__assign({}, (displayVariant === 'compact'
                         ? {
                             Before: {
                                 component: function () { return null; },
@@ -161,7 +204,7 @@ var TimeRangePicker = function (_a) {
                             },
                         },
                     },
-                    content: ((0, jsx_runtime_1.jsx)(RangeSelectorContainer_1.default, { 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: ((0, jsx_runtime_1.jsx)(RangeSelectorContainer_1.default, { 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);
@@ -188,18 +231,15 @@ 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 = (0, react_1.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((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, "aria-describedby": props['aria-describedby'], "aria-labelledby": props['aria-labelledby'], required: props.required, id: props.id }, 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 }));
 };
 exports.TimeRangePicker = TimeRangePicker;
+exports.TimeRangePicker.__standard = 'Component';

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

@@ -4,42 +4,32 @@ exports.TimezonePicker = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var typography_1 = require("../typography");
-var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
-var stack_1 = require("../stack");
-var base_button_1 = require("../base-button");
 var time_zone_picker_1 = require("../time-zone-picker");
-var locale_1 = require("../locale");
+var timezone_1 = tslib_1.__importDefault(require("../icon/components/timezone"));
+var InputFieldIcon_1 = require("../date-picker/InputFieldIcon");
 var overrides_1 = require("../overrides");
 var TimezonePicker = function (_a) {
-    var setTimezone = _a.setTimezone, timezone = _a.timezone, overrides = _a.overrides;
-    var locale = (0, locale_1.useLocale)();
+    var setTimezone = _a.setTimezone, timezone = _a.timezone, overrides = _a.overrides, props = tslib_1.__rest(_a, ["setTimezone", "timezone", "overrides"]);
     var mergedOverrides = (0, react_1.useMemo)(function () {
         return (0, overrides_1.mergeOverrides)({
             Select: {
                 props: {
-                    type: 'overlay',
-                    placeholder: locale.timeRangePicker.timezonePlaceholder,
-                    children: ((0, jsx_runtime_1.jsx)(base_button_1.BaseButton, (0, tslib_1.__assign)({ "data-testid": "time-zone-picker", className: "focus:spr-text-04 hover:spr-text-04" }, { children: (0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ variant: "l1" }, { children: timezone || locale.timeRangePicker.timezoneLabel }), void 0), (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 8 }, void 0)] }), void 0) }), void 0)),
                     overrides: {
-                        Popover: {
-                            props: {
-                                showArrow: false,
-                            },
-                            style: function () { return ({
-                                marginTop: '0',
-                            }); },
+                        ValueContainer: {
+                            component: InputFieldIcon_1.DropdownFieldIcon,
+                            props: { icon: timezone_1.default },
                         },
                     },
                 },
             },
         }, overrides);
-    }, [overrides, timezone, locale]);
+    }, [overrides]);
     var onChange = (0, react_1.useCallback)(function (_a) {
         var id = _a.id;
         setTimezone(id);
     }, [setTimezone]);
-    return (0, jsx_runtime_1.jsx)(time_zone_picker_1.TimezonePicker, { value: timezone, onChange: onChange, overrides: mergedOverrides }, void 0);
+    return ((0, jsx_runtime_1.jsx)(time_zone_picker_1.TimezonePicker, tslib_1.__assign({ value: timezone, onChange: onChange, clearable: false, size: "small", overrides: mergedOverrides }, props, { className: ['w-auto', props.className] })));
 };
 exports.TimezonePicker = TimezonePicker;
 exports.default = (0, react_1.memo)(exports.TimezonePicker);
+exports.TimezonePicker.__standard = 'Component';

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

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

package/time-range-picker/getSystemTzName.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSystemTzName = void 0;
+var SYSTEM_TIMEZONE;
+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;
+};
+exports.getSystemTzName = getSystemTzName;

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

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertDateFromTargetTzToSystemTz = exports.convertDateFromSystemTzToTargetTz = exports.convertDateFromSrcTzToTargetTz = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.TimeRangePicker = void 0;
+exports.getSystemTzName = exports.convertDateFromTargetTzToSystemTz = exports.convertDateFromSystemTzToTargetTz = exports.convertDateFromSrcTzToTargetTz = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.TimezonePicker = exports.TimeRangePicker = void 0;
 var TimeRangePicker_1 = require("./TimeRangePicker");
 Object.defineProperty(exports, "TimeRangePicker", { enumerable: true, get: function () { return TimeRangePicker_1.TimeRangePicker; } });
+var TimezonePicker_1 = require("./TimezonePicker");
+Object.defineProperty(exports, "TimezonePicker", { enumerable: true, get: function () { return TimezonePicker_1.TimezonePicker; } });
 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; } });
+var getSystemTzName_1 = require("./getSystemTzName");
+Object.defineProperty(exports, "getSystemTzName", { enumerable: true, get: function () { return getSystemTzName_1.getSystemTzName; } });