@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/esm/theme/context.js

@@ -1,65 +1,5 @@
-import { __assign, __read } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState } from 'react';
-import _merge from 'lodash/merge';
+import { createContext, useContext } from 'react';
 import hyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';
-import { ThemeProvider as BaseUIThemProvider } from 'baseui';
-import usePrevious from '../hooks/usePrevious';
-import useMemoizedStyletron from '../style/useMemoizedStyletron';
-import SPACEWEB_THEME_VS_BASEUI_THEME from '../themes';
-import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
-//todo: remove default sprLight, too many tests failing on removal
 export var themeContext = createContext(hyperspaceLight);
 export var useTheme = function () { return useContext(themeContext); };
-var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
-var addDensityToTheme = function (theme, density) {
-    var _a;
-    return (__assign(__assign({}, theme), { theme: __assign(__assign({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
-};
-export var ThemeProvider = function (props) {
-    var _a;
-    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
-    var _b = __read(useState(null), 2), containerElementRef = _b[0], setContainerElementRef = _b[1];
-    var outerTheme = useTheme();
-    var _c = __read(useMemoizedStyletron(), 2), baseUITheme = _c[1];
-    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
-        throw new Error('No Theme present in context & props');
-    }
-    var Provider = themeContext.Provider;
-    var value = useMemo(function () {
-        var _a, _b;
-        if (theme) {
-            var newTheme = void 0;
-            if (typeof theme === 'function') {
-                newTheme = theme(outerTheme);
-            }
-            else {
-                var newThemeName = (_a = theme.theme) === null || _a === void 0 ? void 0 : _a.name, outerThemeName = (_b = outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.theme) === null || _b === void 0 ? void 0 : _b.name, 
-                // theme should be merged if both the outerTheme & themeToOverride has same name
-                shouldMergeThemes = !newThemeName || !outerThemeName || newThemeName === outerThemeName;
-                if (shouldMergeThemes) {
-                    newTheme = _merge({}, outerTheme, theme);
-                }
-                else {
-                    newTheme = __assign({ direction: outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.direction }, theme);
-                }
-            }
-            if (typeof newTheme !== 'object') {
-                throw new Error('theme has to be an object of shape {theme : {}, classes : {}}');
-            }
-            return addDensityToTheme(newTheme, density);
-        }
-        return addDensityToTheme(outerTheme, density);
-    }, [theme, outerTheme, density]);
-    var themeName = value.theme.name, prevThemName = usePrevious(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = usePrevious(containerElement);
-    useIsomorphicLayoutEffect(function () {
-        prevThemName && (prevContainerElement === null || prevContainerElement === void 0 ? void 0 : prevContainerElement.classList.remove(prevThemName));
-        THEME_NAMES.forEach(function (name) { return containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.remove(name); });
-        containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.add(themeName);
-    }, [themeName, prevThemName, containerElement, prevContainerElement]);
-    /**
-     * Box component/styled cannot be used here as styletron might not be initialized when ThemeProvider renders for the first time.
-     */
-    return (_jsx("div", __assign({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: _jsx(BaseUIThemProvider, __assign({ theme: (_a = SPACEWEB_THEME_VS_BASEUI_THEME[themeName]) !== null && _a !== void 0 ? _a : baseUITheme }, { children: _jsx(Provider, __assign({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
-};
 export var ThemeConsumer = themeContext.Consumer;

package/esm/theme/index.d.ts

@@ -1,2 +1,3 @@
+export * from './Provider';
 export * from './context';
 export * from './types';

package/esm/theme/index.js

@@ -1,2 +1,3 @@
+export * from './Provider';
 export * from './context';
 export * from './types';

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

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

package/esm/time-picker/TimePicker.js

@@ -1,28 +1,31 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TimePicker as BaseTimePicker } from 'baseui/timepicker';
+import { useMemo } from 'react';
+import { TimePicker as BaseTimePicker } from '../baseui/timepicker';
 import { Select } from '../select';
 import { useContextualFormProps } from '../form-control/context';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { getDefaultSize } from '../helpers/themeHelpers';
+import { useStyle } from '../style';
+import { mergeOverrides } from '../overrides';
 var useTimePickerBasewebAdapter = function (props) {
-    var _a = useContextualFormProps(props), size = _a.size, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, clearable = _a.clearable, restProps = __rest(_a, ["size", "className", "style", "intent", "overrides", "clearable"]);
-    var convertedOverrides = useConvertOverrides({
-        Select: {
-            component: Select,
-            props: {
-                size: size,
-                intent: intent,
-                clearable: !!clearable,
+    var theme = useStyle().theme;
+    var _a = useContextualFormProps(props), _b = _a.size, size = _b === void 0 ? getDefaultSize(theme) : _b, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, clearable = _a.clearable, restProps = __rest(_a, ["size", "className", "style", "intent", "overrides", "clearable"]);
+    var convertedOverrides = useMemo(function () {
+        return mergeOverrides({
+            Select: {
+                component: Select,
+                props: {
+                    size: size,
+                    intent: intent,
+                    clearable: !!clearable,
+                },
+                style: [className, style],
             },
-            style: [className, style],
-        },
-    }, overrides, [overrides, className, style, size, intent]);
+        }, overrides);
+    }, [overrides, className, style, size, intent]);
     return __assign(__assign({}, restProps), { nullable: clearable, overrides: convertedOverrides });
 };
 export var TimePicker = function (props) {
     var adaptedProps = useTimePickerBasewebAdapter(props);
     return _jsx(BaseTimePicker, __assign({}, adaptedProps), void 0);
 };
-TimePicker.defaultProps = {
-    size: 'md',
-};

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

@@ -1,11 +1,13 @@
 import { Intent, Styles } from '../types';
 import { Override } from '../overrides/types';
 import { SharedProps, Size } from '../select/types';
-import { TimePickerProps as BaseTimePickerProps, TimePickerOverrides as BaseTimePickerOverrides } from 'baseui/timepicker';
+import { TimePickerProps as BaseTimePickerProps, TimePickerOverrides as BaseTimePickerOverrides } from '../baseui/timepicker';
+import { DateIOAdapter } from '../baseui/datepicker/utils/types';
 export declare type TimePickerOverrides = {
     [key in keyof BaseTimePickerOverrides]?: Override<SharedProps>;
 };
-export declare type TimePickerProps = Omit<BaseTimePickerProps, 'error' | 'positive' | 'overrides' | 'size' | 'nullable'> & {
+export declare type TimePickerProps = Omit<BaseTimePickerProps, 'error' | 'positive' | 'overrides' | 'size' | 'nullable' | 'adapter'> & {
+    adapter?: DateIOAdapter<Date>;
     intent?: Intent;
     className?: Styles;
     style?: Styles;

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

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

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

@@ -1,7 +1,7 @@
-import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, useCallback } from 'react';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import cx from '../classNames';
 import { Box } from '../box';
 import RangeSelector from './RangeSelector';
@@ -13,8 +13,7 @@ import DefaultTimezonePicker from './TimezonePicker';
 import ErrorIcon from '../icon/components/error';
 import { StyledFooter, StyledFooterBeforeEnhancer } from '../date-picker/styled-components';
 import { useLocale } from '../locale';
-import { getSelectedTimeRange } from './utils';
-import { isTimeInRange } from '../date-picker/utils';
+import { getRangeError, getSelectedTimeRange, getValidRange } from './utils';
 import { useOverrides } from '../overrides';
 var getPresetId = function (selectedPreset, selectedValue) {
     if (selectedPreset) {
@@ -33,42 +32,43 @@ var RangeSelectorContainer = function (_a) {
     var _g = __read(useState(selectedTimeRange), 2), timeRange = _g[0], setTimeRange = _g[1];
     var _h = __read(useState(getPresetId(selectedPreset, selectedValue)), 2), preset = _h[0], setPreset = _h[1];
     var _j = __read(useState(selectedTimezone), 2), timezone = _j[0], setTimezone = _j[1];
-    var _k = __read(useState(false), 2), hasError = _k[0], setHasError = _k[1];
+    var _k = __read(selectedTimeRange, 2), startDate = _k[0], endDate = _k[1];
+    var startTimeEpoch = startDate === null || startDate === void 0 ? void 0 : startDate.getTime();
+    var endTimeEpoch = endDate === null || endDate === void 0 ? void 0 : endDate.getTime();
     useEffect(function () {
         setTimeRange(selectedTimeRange);
         setPreset(getPresetId(selectedPreset, selectedValue));
-    }, [selectedTimeRange, selectedValue, selectedPreset]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- need to check only start and end epoch
+    }, [startTimeEpoch, endTimeEpoch, selectedValue, selectedPreset]);
     var _l = __read(useOverrides((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Header, StyledHeader), 2), Header = _l[0], headerProps = _l[1];
     var _m = __read(useOverrides((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, Typography), 2), HeaderBeforeEnhancer = _m[0], headerBeforeEnhancerProps = _m[1];
     var _o = __read(useOverrides((_d = props.overrides) === null || _d === void 0 ? void 0 : _d.Footer, StyledFooter), 2), Footer = _o[0], footerProps = _o[1];
     var _p = __read(useOverrides((_e = props.overrides) === null || _e === void 0 ? void 0 : _e.FooterBeforeEnhancer, StyledFooterBeforeEnhancer), 2), FooterBeforeEnhancer = _p[0], footerBeforeEnhancerProps = _p[1];
     var _q = __read(useOverrides((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, DefaultTimezonePicker), 2), TimezonePicker = _q[0], timezonePickerProps = _q[1];
-    useEffect(function () {
-        if ((preset === 'CUSTOM' && timeRange.length !== 2) || typeof preset !== 'string') {
-            setHasError(true);
-        }
-        else if (!isTimeInRange(timeRange, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers })) {
-            setHasError(true);
-        }
-        else {
-            setHasError(false);
-        }
-    }, [preset, timeRange, minDate, maxDate, dateHelpers]);
+    var _r = useMemo(function () {
+        return getRangeError({
+            dateHelpers: dateHelpers,
+            timeRange: timeRange,
+            maxDate: maxDate,
+            minDate: minDate,
+            locale: locale,
+            preset: preset,
+        });
+    }, [timeRange, minDate, maxDate, dateHelpers, locale, preset]), hasError = _r.hasError, errMsg = _r.errMsg;
     var onDateChange = useCallback(function (_a) {
         var _b, _c, _d;
-        var date = _a.date, preset = _a.preset;
+        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 = 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 = __spreadArray(__spreadArray([], __read((nextDate[0] ? [new Date(nextDate[0].setMilliseconds(0))] : [])), false), __read((nextDate[1] ? [new Date(nextDate[1].setMilliseconds(999))] : [])), false);
-            setPreset(preset);
+        if (_preset) {
+            var nextDate = getValidRange({
+                range: (_d = (_c = (_b = 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 : [],
+                dateHelpers: dateHelpers,
+                maxDate: maxDate,
+                minDate: minDate,
+            });
+            setPreset(_preset);
             setTimeRange(nextDate);
-            onChange === null || onChange === void 0 ? void 0 : onChange(__assign({ value: preset, date: nextDate, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
+            onChange === null || onChange === void 0 ? void 0 : onChange(__assign({ value: _preset, date: nextDate, preset: _preset }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
             var nextDate = date;
@@ -83,19 +83,22 @@ var RangeSelectorContainer = function (_a) {
             setPreset('CUSTOM');
             onChange === null || onChange === void 0 ? void 0 : onChange(__assign({ value: nextDate, date: nextDate, preset: 'CUSTOM' }, (disableTimezone ? {} : { timezone: timezone })));
         }
-    }, [setTimeRange, dateHelpers, timeRangePresets, onChange, timezone, disableTimezone]);
+    }, [setTimeRange, dateHelpers, timeRangePresets, onChange, timezone, disableTimezone, minDate, maxDate]);
     var handleSubmit = useCallback(function () {
         return onSubmit(__assign({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);
-    var errorEl = hasError ? (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: cx('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [_jsx(ErrorIcon, { size: 14, className: [
+    // 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 ? (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: cx('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [_jsx(ErrorIcon, { size: 14, className: [
+                    'block',
                     function (_a) {
                         var theme = _a.theme;
                         return ({
                             fill: theme.spr.clrRed,
                         });
                     },
-                ] }, void 0), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: locale.timeRangePicker.rangeErrorMsg }), void 0)] }), void 0)) : null;
-    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), _jsx(RangeSelector, { overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown }, void 0), _jsxs(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps), void 0), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [cx({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "self-end" }, { children: [_jsx(Button, __assign({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "sm", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0)] }), void 0));
+                ] }, void 0), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: errMsg }), void 0)] }), void 0)) : null;
+    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), _jsx(RangeSelector, { overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown }, void 0), _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { children: _jsxs(Box, __assign({ className: "justify-between w-0 flex-grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps), void 0), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [cx({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0) }), void 0)] }), void 0));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 export default RangeSelectorContainer;

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

@@ -5,6 +5,7 @@ import { Menu as DefaultMenu, MenuItem as DefaultMenuItem } from '../menu';
 import { Box } from '../box';
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
+import { useIsMobileDevice } from '../hooks/useIsMobileDevice';
 var TimeRangeList = function (_a) {
     var onChange = _a.onChange, timeRange = _a.timeRange, preset = _a.preset, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides;
     var locale = useLocale();
@@ -16,9 +17,15 @@ var TimeRangeList = function (_a) {
             onChange({ preset: timeRangePreset.id });
         }
     }, [onChange, timeRange]);
+    var isMobileDevice = useIsMobileDevice();
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Menu, DefaultMenu), 2), Menu = _b[0], menuProps = _b[1];
     var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, DefaultMenuItem), 2), MenuItem = _c[0], menuItemProps = _c[1];
-    return (_jsx(Box, __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: _jsx(Menu, __assign({ "aria-label": locale.timeRangePicker.presetMenuAriaLabel, disableNavigationOnMount: true, resetMenuHighlightOnMouseLeave: true, className: ['focus-visible:-outline-offset-2', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox" }, menuProps, { children: timeRangePresets.map(function (timeRangePreset) { return (_jsx(MenuItem, __assign({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
+    return (_jsx(Box, __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: _jsx(Menu, __assign({ "aria-label": locale.timeRangePicker.presetMenuAriaLabel, disableNavigationOnMount: true, resetMenuHighlightOnMouseLeave: true, className: ['focus-visible:-outline-offset-2 min-w-full', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox", "$showFocusOutline": true }, menuProps, { children: timeRangePresets.map(function (timeRangePreset) { return (_jsx(MenuItem, __assign({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
                     'static',
                     function (_a, _b) {
                         var theme = _a.theme;

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

@@ -1,17 +1,23 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from 'react';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import RangeSelectorContainer from './RangeSelectorContainer';
-import { getSelectedTimeRange, getSystemTzName, getDefaultTimeRangePresets, switchEpochTimezone, adaptDateWithSystemTz, formatSummaryValue, } from './utils';
+import { getSelectedTimeRange, getSystemTzName, getDefaultTimeRangePresets, convertDateFromTargetTzToSystemTz, convertDateFromSystemTzToTargetTz, formatSummaryValue, getValidRange, } from './utils';
 import { useDatePickerState, StatelessDatePicker } from '../date-picker';
 import { useLocale } from '../locale';
 import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
 import { mergeOverrides } from '../overrides';
 import { normalizeDashes, prepareLocale } from '../date-picker/utils';
 import { CUSTOM_OPTION } from './constants';
+import { IconButton } from '../button';
+import BaseCalendarIcon from '../icon/components/calendar-solid';
 var __DEV__ = process.env.NODE_ENV !== 'production';
+var CalendarIconInputButton = function (_a) {
+    var size = _a.size, value = _a.value, isSelected = _a.isSelected, locale = _a.locale;
+    return (_jsx(IconButton, __assign({ tooltipContent: value !== null && value !== void 0 ? value : locale.calendar.calendarButtonAriaLabel, size: size, bordered: true, shape: "square", isSelected: isSelected }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0));
+};
 export var TimeRangePicker = function (_a) {
     var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, onSubmit = _a.onSubmit, _timezone = _a.timezone, value = _a.value, formatDisplayValue = _a.formatDisplayValue, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides, timeSelect = _a.timeSelect, peekNextMonth = _a.peekNextMonth, excludeDates = _a.excludeDates, filterDate = _a.filterDate, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.placeholder, placeholder = _c === void 0 ? "".concat(DEFAULT_FORMAT_STRING, "-").concat(DEFAULT_FORMAT_STRING) : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, onClose = _a.onClose, onChange = _a.onChange, showTimezoneInSummary = _a.showTimezoneInSummary, clearable = _a.clearable, onClear = _a.onClear, showFullDateInSummary = _a.showFullDateInSummary, autoSizeInput = _a.autoSizeInput, preset = _a.preset, _e = _a.startOpen, startOpen = _e === void 0 ? false : _e, fixedHeight = _a.fixedHeight, _f = _a.monthsShown, monthsShown = _f === void 0 ? 2 : _f, weekStartsOn = _a.weekStartsOn, _g = _a.disableTimezone, disableTimezone = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h, props = __rest(_a, ["adapter", "onSubmit", "timezone", "value", "formatDisplayValue", "timeRangePresets", "overrides", "timeSelect", "peekNextMonth", "excludeDates", "filterDate", "minDate", "maxDate", "placeholder", "formatString", "onClose", "onChange", "showTimezoneInSummary", "clearable", "onClear", "showFullDateInSummary", "autoSizeInput", "preset", "startOpen", "fixedHeight", "monthsShown", "weekStartsOn", "disableTimezone", "displayVariant"]);
     if (__DEV__) {
@@ -41,9 +47,8 @@ export var TimeRangePicker = function (_a) {
     ], false); }, [timeRangePresets, locale]);
     var formatDate = useCallback(function (date, normalizedFormatString) {
         if (normalizedFormatString === void 0) { normalizedFormatString = normalizeDashes(formatString); }
-        var adaptedSystemTz = new Date(switchEpochTimezone(date, timezone, getSystemTzName()));
-        return dateHelpers.formatDate(adaptedSystemTz, normalizedFormatString, dateFnsLocale);
-    }, [formatString, dateHelpers, timezone, dateFnsLocale]);
+        return dateHelpers.formatDate(date, normalizedFormatString, dateFnsLocale);
+    }, [formatString, dateHelpers, dateFnsLocale]);
     var defaultFormatDisplayValue = useCallback(function (date, normalizedFormatString) {
         var _a, _b;
         if (normalizedFormatString === void 0) { normalizedFormatString = normalizeDashes(formatString); }
@@ -51,9 +56,6 @@ export var TimeRangePicker = function (_a) {
         if (!Array.isArray(date) && date) {
             return formatDate(date);
         }
-        if (formatDisplayValue) {
-            return formatDisplayValue(date, normalizedFormatString);
-        }
         var timeRangePreset;
         if (typeof preset === 'string') {
             timeRangePreset = getSelectedTimeRange(preset, timeRangeList);
@@ -61,7 +63,7 @@ export var TimeRangePicker = function (_a) {
         else if (typeof value === 'string') {
             timeRangePreset = getSelectedTimeRange(value, timeRangeList);
         }
-        return formatSummaryValue({
+        var options = {
             date: date,
             presetId: (_a = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.id) !== null && _a !== void 0 ? _a : CUSTOM_OPTION.id,
             presetLabel: (_b = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.label) !== null && _b !== void 0 ? _b : locale.timeRangePicker.customRange,
@@ -73,7 +75,11 @@ export var TimeRangePicker = function (_a) {
             adapter: adapter,
             locale: dateFnsLocale,
             displayVariant: displayVariant,
-        });
+        };
+        if (formatDisplayValue) {
+            return formatDisplayValue(date, normalizedFormatString, options);
+        }
+        return formatSummaryValue(options);
     }, [
         timezone,
         value,
@@ -90,23 +96,23 @@ export var TimeRangePicker = function (_a) {
         displayVariant,
     ]);
     var handleSubmit = useCallback(
-    // eslint-disable-next-line no-shadow
+    // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow -- used within function only
     function (_a) {
         var _b, _c, _d;
         var timeRange = _a.timeRange, preset = _a.preset, timezone = _a.timezone;
         // value is returned only for backward compatibility will be removed in future version.
         if (preset === 'CUSTOM') {
-            var startMillis = switchEpochTimezone(timeRange[0], getSystemTzName(), timezone);
-            var endMillis = switchEpochTimezone(timeRange[1], getSystemTzName(), timezone);
+            var startMillis = convertDateFromTargetTzToSystemTz(timeRange[0], timezone);
+            var endMillis = convertDateFromTargetTzToSystemTz(timeRange[1], timezone);
             var dates = [new Date(startMillis), new Date(endMillis)];
             onSubmit(__assign({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
             var timeRangeLimit = (_d = (_c = (_b = getSelectedTimeRange(preset, timeRangeList)) === null || _b === void 0 ? void 0 : _b.getTimeRangeLimits) === null || _c === void 0 ? void 0 : _c.call(_b, timezone)) !== null && _d !== void 0 ? _d : [];
-            onSubmit(__assign({ value: preset, preset: preset, date: timeRangeLimit }, (disableTimezone ? {} : { timezone: timezone })));
+            onSubmit(__assign({ value: preset, preset: preset, date: getValidRange({ range: timeRangeLimit, dateHelpers: dateHelpers, maxDate: maxDate, minDate: minDate }) }, (disableTimezone ? {} : { timezone: timezone })));
         }
         setIsOpen(false);
-    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone]);
+    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone, dateHelpers, minDate, maxDate]);
     var timeRange = useMemo(function () {
         var _a, _b, _c;
         var dates;
@@ -114,14 +120,27 @@ export var TimeRangePicker = function (_a) {
             dates = value;
         }
         else {
-            dates = (_c = (_b = (_a = getSelectedTimeRange(preset !== null && preset !== void 0 ? preset : value, timeRangeList)) === null || _a === void 0 ? void 0 : _a.getTimeRangeLimits) === null || _b === void 0 ? void 0 : _b.call(_a, timezone)) !== null && _c !== void 0 ? _c : [];
+            dates = getValidRange({
+                range: (_c = (_b = (_a = getSelectedTimeRange(preset !== null && preset !== void 0 ? preset : value, timeRangeList)) === null || _a === void 0 ? void 0 : _a.getTimeRangeLimits) === null || _b === void 0 ? void 0 : _b.call(_a, timezone)) !== null && _c !== void 0 ? _c : [],
+                dateHelpers: dateHelpers,
+                maxDate: maxDate,
+                minDate: minDate,
+            });
         }
-        return __spreadArray(__spreadArray([], __read((dates[0] ? [adaptDateWithSystemTz(dates[0], timezone)] : [])), false), __read((dates[1] ? [adaptDateWithSystemTz(dates[1], timezone)] : [])), false);
-    }, [value, timeRangeList, timezone, preset]);
+        return __spreadArray(__spreadArray([], __read((dates[0] ? [new Date(convertDateFromSystemTzToTargetTz(dates[0], timezone))] : [])), false), __read((dates[1] ? [new Date(convertDateFromSystemTzToTargetTz(dates[1], timezone))] : [])), false);
+    }, [value, timeRangeList, timezone, preset, dateHelpers, minDate, maxDate]);
     var mergedOverrides = useMemo(function () {
         return mergeOverrides({
-            Input: {
-                props: {
+            Input: __assign(__assign({}, (displayVariant === 'iconButton'
+                ? {
+                    component: CalendarIconInputButton,
+                    Before: {
+                        component: function () { return null; },
+                    },
+                }
+                : {})), { props: {
+                    isSelected: !!value && value.length > 0,
+                    locale: locale,
                     overrides: __assign({}, (displayVariant === 'compact'
                         ? {
                             Before: {
@@ -129,8 +148,7 @@ export var TimeRangePicker = function (_a) {
                             },
                         }
                         : {})),
-                },
-            },
+                } }),
             InputWrapper: {
                 props: {
                     'data-testid': 'time-range',
@@ -172,8 +190,8 @@ export var TimeRangePicker = function (_a) {
         monthsShown,
         fixedHeight,
         disableTimezone,
-        locale.timeRangePicker.popoverAriaLabel,
         displayVariant,
+        locale,
     ]);
     var handleInputChange = useCallback(function (_a) {
         var _b = _a.value, _value = _b === void 0 ? [] : _b;
@@ -182,5 +200,5 @@ export var TimeRangePicker = function (_a) {
         onSubmit(__assign({ value: _value, preset: 'CUSTOM', date: _value }, (disableTimezone ? {} : { timezone: timezone })));
         onClear === null || onClear === void 0 ? void 0 : onClear();
     }, [onSubmit, timezone, onClear, disableTimezone]);
-    return (_jsx(StatelessDatePicker, { value: timeRange, isOpen: isOpen, onFocus: handleOpen, onBlur: handleClose, formatDisplayValue: defaultFormatDisplayValue, trapTabbing: false, intent: props.intent, variant: props.variant, size: props.size, disabled: props.disabled, formatString: formatString, placeholder: placeholder, "aria-label": locale.timeRangePicker.ariaLabelRange, overrides: mergedOverrides, clearable: clearable, onChange: handleInputChange, autoSizeInput: autoSizeInput, locale: dateFnsLocale, mountNode: props.mountNode, minDate: minDate, maxDate: maxDate }, void 0));
+    return (_jsx(StatelessDatePicker, { value: timeRange, isOpen: isOpen, onFocus: handleOpen, onBlur: handleClose, formatDisplayValue: defaultFormatDisplayValue, trapTabbing: false, intent: props.intent, variant: props.variant, size: props.size, disabled: props.disabled, formatString: formatString, placeholder: placeholder, "aria-label": locale.timeRangePicker.ariaLabelRange, overrides: mergedOverrides, clearable: clearable, onChange: handleInputChange, autoSizeInput: autoSizeInput, locale: dateFnsLocale, mountNode: props.mountNode, minDate: minDate, maxDate: maxDate, "aria-describedby": props['aria-describedby'], "aria-labelledby": props['aria-labelledby'], required: props.required, id: props.id }, void 0));
 };

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

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

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

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

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

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

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

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

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

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

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

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