@sprinklrjs/spaceweb 10.1.0

package/time-range-picker/RangeSelectorContainer.js

@@ -0,0 +1,103 @@
+"use strict";
+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 box_1 = require("../box");
+var RangeSelector_1 = (0, 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 styled_components_1 = require("../date-picker/styled-components");
+var locale_1 = require("../locale");
+var utils_1 = require("./utils");
+var utils_2 = require("../date-picker/utils");
+var overrides_1 = require("../overrides");
+var getPresetId = function (selectedPreset, selectedValue) {
+    if (selectedPreset) {
+        return selectedPreset;
+    }
+    if (Array.isArray(selectedValue)) {
+        return 'CUSTOM';
+    }
+    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 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 _k = (0, tslib_1.__read)((0, react_1.useState)(false), 2), hasError = _k[0], setHasError = _k[1];
+    (0, react_1.useEffect)(function () {
+        setTimeRange(selectedTimeRange);
+        setPreset(getPresetId(selectedPreset, selectedValue));
+    }, [selectedTimeRange, selectedValue, selectedPreset]);
+    var _l = (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 = _l[0], headerProps = _l[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, typography_1.Typography), 2), HeaderBeforeEnhancer = _m[0], headerBeforeEnhancerProps = _m[1];
+    var _o = (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 = _o[0], footerProps = _o[1];
+    var _p = (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 = _p[0], footerBeforeEnhancerProps = _p[1];
+    var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, TimezonePicker_1.default), 2), TimezonePicker = _q[0], timezonePickerProps = _q[1];
+    (0, react_1.useEffect)(function () {
+        if ((preset === 'CUSTOM' && timeRange.length !== 2) || typeof preset !== 'string') {
+            setHasError(true);
+        }
+        else if (!(0, utils_2.isTimeInRange)(timeRange, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers })) {
+            setHasError(true);
+        }
+        else {
+            setHasError(false);
+        }
+    }, [preset, timeRange, minDate, maxDate, dateHelpers]);
+    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);
+            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 })));
+        }
+        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];
+                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 })));
+        }
+    }, [setTimeRange, dateHelpers, timeRangePresets, onChange, timezone, disableTimezone]);
+    var handleSubmit = (0, react_1.useCallback)(function () {
+        return onSubmit((0, tslib_1.__assign)({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
+    }, [timeRange, preset, timezone, onSubmit, disableTimezone]);
+    var errorEl = hasError ? ((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: [
+                    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: locale.timeRangePicker.rangeErrorMsg }), 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.jsxs)(Footer, (0, tslib_1.__assign)({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { 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: "self-end" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", 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: "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));
+};
+RangeSelectorContainer.displayName = 'RangeSelectorContainer';
+exports.default = RangeSelectorContainer;

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

@@ -0,0 +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>>;
+    displayName: string;
+}>;
+export default _default;

package/time-range-picker/TimeRangeList.js

@@ -0,0 +1,35 @@
+"use strict";
+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 menu_1 = require("../menu");
+var box_1 = require("../box");
+var overrides_1 = require("../overrides");
+var locale_1 = require("../locale");
+var TimeRangeList = function (_a) {
+    var onChange = _a.onChange, timeRange = _a.timeRange, preset = _a.preset, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides;
+    var locale = (0, locale_1.useLocale)();
+    var onItemSelect = (0, react_1.useCallback)(function (timeRangePreset) {
+        if (timeRangePreset.id === 'CUSTOM') {
+            onChange({ date: timeRange });
+        }
+        else {
+            onChange({ preset: timeRangePreset.id });
+        }
+    }, [onChange, timeRange]);
+    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: "w-40 overflow-y-auto border-r-1 border-l-0 border-t-0 border-b-0 spr-border-01 border-solid" }, { 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', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox" }, 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));
+};
+exports.default = (0, react_1.memo)(TimeRangeList);
+TimeRangeList.displayName = 'TimeRangeList';

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

@@ -0,0 +1,3 @@
+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;

package/time-range-picker/TimeRangePicker.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 utils_1 = require("./utils");
+var date_picker_1 = require("../date-picker");
+var locale_1 = require("../locale");
+var constants_1 = require("../date-picker/constants");
+var overrides_1 = require("../overrides");
+var utils_2 = require("../date-picker/utils");
+var constants_2 = require("./constants");
+var __DEV__ = process.env.NODE_ENV !== 'production';
+var TimeRangePicker = function (_a) {
+    var _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, onSubmit = _a.onSubmit, _timezone = _a.timezone, value = _a.value, formatDisplayValue = _a.formatDisplayValue, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides, timeSelect = _a.timeSelect, peekNextMonth = _a.peekNextMonth, excludeDates = _a.excludeDates, filterDate = _a.filterDate, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.placeholder, placeholder = _c === void 0 ? "".concat(constants_1.DEFAULT_FORMAT_STRING, "-").concat(constants_1.DEFAULT_FORMAT_STRING) : _c, _d = _a.formatString, formatString = _d === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _d, onClose = _a.onClose, onChange = _a.onChange, showTimezoneInSummary = _a.showTimezoneInSummary, clearable = _a.clearable, onClear = _a.onClear, showFullDateInSummary = _a.showFullDateInSummary, autoSizeInput = _a.autoSizeInput, preset = _a.preset, _e = _a.startOpen, startOpen = _e === void 0 ? false : _e, fixedHeight = _a.fixedHeight, _f = _a.monthsShown, monthsShown = _f === void 0 ? 2 : _f, weekStartsOn = _a.weekStartsOn, _g = _a.disableTimezone, disableTimezone = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h, props = (0, tslib_1.__rest)(_a, ["adapter", "onSubmit", "timezone", "value", "formatDisplayValue", "timeRangePresets", "overrides", "timeSelect", "peekNextMonth", "excludeDates", "filterDate", "minDate", "maxDate", "placeholder", "formatString", "onClose", "onChange", "showTimezoneInSummary", "clearable", "onClear", "showFullDateInSummary", "autoSizeInput", "preset", "startOpen", "fixedHeight", "monthsShown", "weekStartsOn", "disableTimezone", "displayVariant"]);
+    if (__DEV__) {
+        if (disableTimezone && _timezone) {
+            console.warn('[spaceweb] timezone can not be passed to the TimeRangePicker when disableTimezone is true');
+        }
+    }
+    var timezone = (0, react_1.useMemo)(function () {
+        if (disableTimezone) {
+            return (0, utils_1.getSystemTzName)();
+        }
+        return _timezone !== null && _timezone !== void 0 ? _timezone : (0, utils_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)({
+        onClose: onClose,
+        startOpen: startOpen,
+    }), isOpen = _j.isOpen, handleOpen = _j.handleOpen, handleClose = _j.handleClose, setIsOpen = _j.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), [
+        {
+            id: constants_2.CUSTOM_OPTION.id,
+            label: locale.timeRangePicker.customRange,
+        },
+    ], false); }, [timeRangePresets, locale]);
+    var formatDate = (0, react_1.useCallback)(function (date, normalizedFormatString) {
+        if (normalizedFormatString === void 0) { normalizedFormatString = (0, utils_2.normalizeDashes)(formatString); }
+        var adaptedSystemTz = new Date((0, utils_1.switchEpochTimezone)(date, timezone, (0, utils_1.getSystemTzName)()));
+        return dateHelpers.formatDate(adaptedSystemTz, normalizedFormatString, dateFnsLocale);
+    }, [formatString, dateHelpers, timezone, dateFnsLocale]);
+    var defaultFormatDisplayValue = (0, react_1.useCallback)(function (date, normalizedFormatString) {
+        var _a, _b;
+        if (normalizedFormatString === void 0) { normalizedFormatString = (0, utils_2.normalizeDashes)(formatString); }
+        // case to handle a11y, where date is individually passed to format, else Date[] is passed as range is true.
+        if (!Array.isArray(date) && date) {
+            return formatDate(date);
+        }
+        if (formatDisplayValue) {
+            return formatDisplayValue(date, normalizedFormatString);
+        }
+        var timeRangePreset;
+        if (typeof preset === 'string') {
+            timeRangePreset = (0, utils_1.getSelectedTimeRange)(preset, timeRangeList);
+        }
+        else if (typeof value === 'string') {
+            timeRangePreset = (0, utils_1.getSelectedTimeRange)(value, timeRangeList);
+        }
+        return (0, utils_1.formatSummaryValue)({
+            date: date,
+            presetId: (_a = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.id) !== null && _a !== void 0 ? _a : constants_2.CUSTOM_OPTION.id,
+            presetLabel: (_b = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.label) !== null && _b !== void 0 ? _b : locale.timeRangePicker.customRange,
+            hidePresetLabel: timeRangeList.length === 1,
+            timezone: timezone,
+            formatString: formatString,
+            showTimezoneInSummary: showTimezoneInSummary,
+            showFullDateInSummary: showFullDateInSummary,
+            adapter: adapter,
+            locale: dateFnsLocale,
+            displayVariant: displayVariant,
+        });
+    }, [
+        timezone,
+        value,
+        timeRangeList,
+        formatDisplayValue,
+        showTimezoneInSummary,
+        formatString,
+        formatDate,
+        showFullDateInSummary,
+        adapter,
+        preset,
+        dateFnsLocale,
+        locale.timeRangePicker.customRange,
+        displayVariant,
+    ]);
+    var handleSubmit = (0, react_1.useCallback)(
+    // eslint-disable-next-line no-shadow
+    function (_a) {
+        var _b, _c, _d;
+        var timeRange = _a.timeRange, preset = _a.preset, timezone = _a.timezone;
+        // value is returned only for backward compatibility will be removed in future version.
+        if (preset === 'CUSTOM') {
+            var startMillis = (0, utils_1.switchEpochTimezone)(timeRange[0], (0, utils_1.getSystemTzName)(), timezone);
+            var endMillis = (0, utils_1.switchEpochTimezone)(timeRange[1], (0, utils_1.getSystemTzName)(), timezone);
+            var dates = [new Date(startMillis), new Date(endMillis)];
+            onSubmit((0, tslib_1.__assign)({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
+        }
+        else {
+            var timeRangeLimit = (_d = (_c = (_b = (0, utils_1.getSelectedTimeRange)(preset, timeRangeList)) === null || _b === void 0 ? void 0 : _b.getTimeRangeLimits) === null || _c === void 0 ? void 0 : _c.call(_b, timezone)) !== null && _d !== void 0 ? _d : [];
+            onSubmit((0, tslib_1.__assign)({ value: preset, preset: preset, date: timeRangeLimit }, (disableTimezone ? {} : { timezone: timezone })));
+        }
+        setIsOpen(false);
+    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone]);
+    var timeRange = (0, react_1.useMemo)(function () {
+        var _a, _b, _c;
+        var dates;
+        if (Array.isArray(value)) {
+            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 : [];
+        }
+        return (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((dates[0] ? [(0, utils_1.adaptDateWithSystemTz)(dates[0], timezone)] : [])), false), (0, tslib_1.__read)((dates[1] ? [(0, utils_1.adaptDateWithSystemTz)(dates[1], timezone)] : [])), false);
+    }, [value, timeRangeList, timezone, preset]);
+    var mergedOverrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            Input: {
+                props: {
+                    overrides: (0, tslib_1.__assign)({}, (displayVariant === 'compact'
+                        ? {
+                            Before: {
+                                component: function () { return null; },
+                            },
+                        }
+                        : {})),
+                },
+            },
+            InputWrapper: {
+                props: {
+                    'data-testid': 'time-range',
+                },
+            },
+            Popover: {
+                props: {
+                    overrides: {
+                        Body: {
+                            props: {
+                                'aria-label': locale.timeRangePicker.popoverAriaLabel,
+                            },
+                        },
+                    },
+                    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)),
+                },
+            },
+        }, overrides);
+    }, [
+        overrides,
+        handleClose,
+        value,
+        handleSubmit,
+        adapter,
+        timezone,
+        timeSelect,
+        peekNextMonth,
+        excludeDates,
+        filterDate,
+        minDate,
+        maxDate,
+        placeholder,
+        formatString,
+        timeRangeList,
+        onChange,
+        timeRange,
+        preset,
+        dateFnsLocale,
+        monthsShown,
+        fixedHeight,
+        disableTimezone,
+        locale.timeRangePicker.popoverAriaLabel,
+        displayVariant,
+    ]);
+    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 }, void 0));
+};
+exports.TimeRangePicker = TimeRangePicker;

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

@@ -0,0 +1,5 @@
+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>>>;
+export default _default;

package/time-range-picker/TimezonePicker.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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 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',
+                            }); },
+                        },
+                    },
+                },
+            },
+        }, overrides);
+    }, [overrides, timezone, locale]);
+    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);
+};
+exports.TimezonePicker = TimezonePicker;
+exports.default = (0, react_1.memo)(exports.TimezonePicker);

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

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

package/time-range-picker/constants.js

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

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

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

package/time-range-picker/index.js

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

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

@@ -0,0 +1,41 @@
+export declare type TimeRangePickerLocale = {
+    headerLabel: string;
+    timezoneLabel: string;
+    today: string;
+    yesterday: string;
+    lastOneHour: string;
+    lastTwelveHour: string;
+    lastTwentyFourHour: string;
+    thisWeek: string;
+    lastWeek: string;
+    lastSevenDays: string;
+    thisMonth: string;
+    lastMonth: string;
+    lastTwentyEightDays: string;
+    lastThirtyDays: string;
+    lastSixtyDays: string;
+    lastNinetyDays: string;
+    lastOneTwentyDays: string;
+    lastOneEightyDays: string;
+    thisYear: string;
+    lastYear: string;
+    lastThreeSixtyFiveDays: string;
+    nextSevenDays: string;
+    nextFourteenDays: string;
+    nextMonth: string;
+    customRange: string;
+    cancelBtnLabel: string;
+    saveBtnLabel: string;
+    timeSelectStartLabel: string;
+    timeSelectEndLabel: string;
+    screenReaderMessageInput: string;
+    ariaLabelRange: string;
+    ariaLabel: string;
+    selectedDate: string;
+    selectedDateRange: string;
+    selectSecondDatePrompt: string;
+    timezonePlaceholder: string;
+    rangeErrorMsg: string;
+    presetMenuAriaLabel: string;
+    popoverAriaLabel: string;
+};

package/time-range-picker/locale.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/time-range-picker/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/time-range-picker/index.js"
+}

package/time-range-picker/styled-component.d.ts

@@ -0,0 +1 @@
+export declare const StyledHeader: import("../style/styled").StyledComponent;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledHeader = void 0;
+var tslib_1 = require("tslib");
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+exports.StyledHeader = (0, styled_1.default)('div', 'flex justify-between items-center h-10 px-5');

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

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import { DatepickerOverrides, FormatString, StatelessDatePickerProps } from '../date-picker';
+import { Override } from '../overrides';
+import { Option } from 'baseui/select';
+import { BaseSelectProps } from '../select/types';
+export type { FormatString } from '../date-picker';
+export declare type TimeRangePreset = {
+    id: string;
+    label: string;
+    getTimeRangeLimits?: (timezone?: string) => [Date, Date] | [];
+};
+export declare type TimezonePickerProps = {
+    setTimezone: React.Dispatch<string>;
+    timezone: string;
+    overrides?: BaseSelectProps['overrides'];
+};
+export declare type TimeRangeListProps = {
+    timeRangePresets: TimeRangePreset[];
+    onChange: ({ date, preset }: any) => void;
+    timeRange?: Date[];
+    preset: string | undefined;
+    overrides?: {
+        Menu?: Override<any>;
+        MenuItem?: Override<any>;
+    };
+};
+export declare type TimeRangePickerOverrides = DatepickerOverrides<Record<string, any>> & {
+    TimeRangeList?: Override<TimeRangeListProps & Record<string, any>>;
+    Header?: Override<Record<string, any>>;
+    HeaderBeforeEnhancer?: Override<Record<string, any>>;
+    FooterBeforeEnhancer?: Override<Record<string, any>>;
+    TimezonePicker?: Override<Record<string, any>>;
+};
+export declare type TimeRangePickerValue = {
+    value: Date[] | string;
+    date: Date[];
+    preset: string;
+    timezone?: string;
+};
+declare type Preset = string;
+export declare type SizeVariant = 'default' | 'compact';
+export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range'> & {
+    /**
+     * @deprecated Please prevent passing preset to value. Instead, pass it in the prop `preset`.
+     *   This will be removed in future major releases.
+     */
+    value?: Preset | Date[];
+    preset?: Preset;
+    timezone?: string;
+    timeRangePresets?: TimeRangePreset[];
+    onSubmit: (timeRangePickerValue: TimeRangePickerValue) => void;
+    overrides?: TimeRangePickerOverrides;
+    mapLabels?: (args: Option) => React.ReactNode;
+    onChange?: (timeRangePickerValue: TimeRangePickerValue) => any;
+    showTimezoneInSummary?: boolean;
+    onClear?: () => void;
+    showFullDateInSummary?: boolean;
+    startOpen?: boolean;
+    disableTimezone?: boolean;
+    displayVariant?: SizeVariant;
+};
+export declare type RangeSelectorContainerProps = Omit<TimeRangePickerProps, 'onFocus' | 'onBlur' | 'timeRangePresets' | 'onSubmit' | 'formatDisplayValue' | 'onClear' | 'timezone'> & {
+    timeRangePresets: TimeRangePreset[];
+    onSubmit: ({ timeRange, preset, timezone }: {
+        timeRange: Date[];
+        preset?: string;
+        timezone?: string;
+    }) => void;
+    onClose: () => void;
+    timeRange: Date[];
+    timezone: string;
+    formatString: FormatString;
+};
+export declare type RangeSelectorProps = Omit<RangeSelectorContainerProps, 'onSubmit' | 'onClose' | 'onChage' | 'formatDate' | 'formatDisplayValue'> & {
+    timeRange?: Date[];
+    onChange: ({ date, preset }: any) => void;
+    preset: string | undefined;
+};

package/time-range-picker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,42 @@
+import { Locale } from '../locale';
+import { SizeVariant, TimeRangePreset } from './types';
+export declare const getSelectedTimeRange: (selectedTimeRange: string | undefined, timeRangeOptions: Array<TimeRangePreset>) => TimeRangePreset | undefined;
+export declare const getSystemTzName: () => string;
+/**
+ * returns milliseconds offset from timezone name
+ */
+export declare const getTzOffset: (timezone: string, date?: number | Date | undefined) => number;
+/**
+ * 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.
+ * Now in Asia/Kolkata timezone today implies 19th Feb. But for Asia/Kabul which is one hour behind Asia/Kolkata Today still implies 18th Feb.
+ * So, this function will subtract that offset of 1 hour from current date so new time 11:30PM, with this time we can get correct value
+ * of today, this week, etc preset.
+ */
+export declare const getDateForGivenTimezone: (timezone?: string | undefined) => Date;
+export declare const getDefaultTimeRangePresets: (locale: Locale) => TimeRangePreset[];
+export declare const formatSummaryValue: ({ date, presetId, presetLabel, timezone, formatString, showFullDateInSummary, showTimezoneInSummary, adapter, locale, hidePresetLabel, displayVariant, }: {
+    date: Date[];
+    presetId: string;
+    presetLabel: string;
+    timezone?: string | undefined;
+    formatString?: string | undefined;
+    showFullDateInSummary?: boolean | undefined;
+    showTimezoneInSummary?: boolean | undefined;
+    adapter?: any;
+    locale?: any;
+    hidePresetLabel?: boolean | undefined;
+    displayVariant?: SizeVariant | undefined;
+}) => string;
+export declare const getHeight: ({ monthsShown, timeSelect }: {
+    monthsShown?: number | undefined;
+    timeSelect?: boolean | undefined;
+}) => number;