@sprinklrjs/spaceweb 10.1.0

package/esm/themes/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author Yash Soni
+ * @author Ivan Torres
+ */
+import { Theme } from 'baseui/theme';
+declare const SPACEWEB_THEME_VS_BASEUI_THEME: {
+    [theme: string]: Theme;
+};
+export default SPACEWEB_THEME_VS_BASEUI_THEME;
+export declare function createTheme<P>(theme: Theme, overrides: P): Theme & P;

package/esm/themes/index.js

@@ -0,0 +1,18 @@
+/**
+ * @author Yash Soni
+ * @author Ivan Torres
+ */
+import _merge from 'lodash/merge';
+import { DarkTheme } from './dark-theme';
+import { LightTheme } from './light-theme';
+import { withResponsiveTheme } from './responsive-theme';
+var SPACEWEB_THEME_VS_BASEUI_THEME = {
+    'space-dark': withResponsiveTheme(DarkTheme),
+    'space-light': withResponsiveTheme(LightTheme),
+    'hyperspace-dark': withResponsiveTheme(DarkTheme),
+    'hyperspace-light': withResponsiveTheme(LightTheme),
+};
+export default SPACEWEB_THEME_VS_BASEUI_THEME;
+export function createTheme(theme, overrides) {
+    return _merge(theme, overrides);
+}

package/esm/themes/light-theme.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Yash Soni
+ * @author Ivan Torres
+ */
+import { Theme } from 'baseui/theme';
+export declare const LightTheme: Theme;

package/esm/themes/light-theme.js

@@ -0,0 +1,9 @@
+/**
+ * @author Yash Soni
+ * @author Ivan Torres
+ */
+import { __assign } from "tslib";
+/* eslint import/prefer-default-export: 0 */
+import { createTheme, LightTheme as BaseuiTheme, lightThemePrimitives as primitives } from 'baseui';
+import { sharedPrimitives } from './shared';
+export var LightTheme = __assign(__assign({}, createTheme(__assign(__assign({}, primitives), sharedPrimitives))), { name: 'light', colors: BaseuiTheme.colors });

package/esm/themes/responsive-theme.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @author Yash Soni
+ */
+declare const responsiveTheme: {
+    breakpoints: {
+        small: number;
+        medium: number;
+        large: number;
+    };
+    mediaQuery: Record<"medium" | "large" | "small", string>;
+};
+export declare const withResponsiveTheme: <T extends object>(theme: T) => T & {
+    breakpoints: {
+        small: number;
+        medium: number;
+        large: number;
+    };
+    mediaQuery: Record<"medium" | "large" | "small", string>;
+};
+export {};

package/esm/themes/responsive-theme.js

@@ -0,0 +1,19 @@
+/**
+ * @author Yash Soni
+ */
+import { __assign } from "tslib";
+/* eslint import/prefer-default-export: 0 */
+// TODO: Grab breakpoints from theme
+var breakpoints = {
+    small: 670,
+    medium: 920,
+    large: 1280,
+};
+var responsiveTheme = Object.keys(breakpoints).reduce(function (acc, key) {
+    acc.mediaQuery[key] = "@media screen and (min-width: ".concat(breakpoints[key], "px)");
+    return acc;
+}, {
+    breakpoints: breakpoints,
+    mediaQuery: {},
+});
+export var withResponsiveTheme = function (theme) { return (__assign(__assign({}, theme), responsiveTheme)); };

package/esm/themes/shared.d.ts

@@ -0,0 +1,4 @@
+declare const sharedPrimitives: {
+    primaryFontFamily: string;
+};
+export { sharedPrimitives };

package/esm/themes/shared.js

@@ -0,0 +1,4 @@
+var sharedPrimitives = {
+    primaryFontFamily: 'inherit',
+};
+export { sharedPrimitives };

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

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

package/esm/time-picker/TimePicker.js

@@ -0,0 +1,28 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimePicker as BaseTimePicker } from 'baseui/timepicker';
+import { Select } from '../select';
+import { useContextualFormProps } from '../form-control/context';
+import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+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,
+            },
+            style: [className, style],
+        },
+    }, 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/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps } from './types';

package/esm/time-picker/index.js

@@ -0,0 +1 @@
+export { TimePicker } from './TimePicker';

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

@@ -0,0 +1,15 @@
+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';
+export declare type TimePickerOverrides = {
+    [key in keyof BaseTimePickerOverrides]?: Override<SharedProps>;
+};
+export declare type TimePickerProps = Omit<BaseTimePickerProps, 'error' | 'positive' | 'overrides' | 'size' | 'nullable'> & {
+    intent?: Intent;
+    className?: Styles;
+    style?: Styles;
+    overrides?: TimePickerOverrides;
+    size?: Size;
+    clearable?: boolean;
+};

package/esm/time-picker/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,25 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Box } from '../box';
+import DefaultTimeRangeList from './TimeRangeList';
+import Calendar from '../date-picker/Calendar';
+import { useOverrides } from '../overrides';
+import { getHeight } from './utils';
+var RangeSelector = function (_a) {
+    var _b;
+    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, 
+                    // @ts-ignore
+                    overrides: props.overrides, fixedHeight: props.fixedHeight }, void 0) }), void 0)] }), void 0));
+};
+RangeSelector.displayName = 'RangeSelector';
+export default memo(RangeSelector);

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

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { RangeSelectorContainerProps } from './types';
+declare const RangeSelectorContainer: {
+    ({ adapter, timeRangePresets, onChange, onSubmit, timezone: selectedTimezone, value: selectedValue, timeRange: selectedTimeRange, preset: selectedPreset, minDate, maxDate, monthsShown, disableTimezone, ...props }: RangeSelectorContainerProps): ReactElement;
+    displayName: string;
+};
+export default RangeSelectorContainer;

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

@@ -0,0 +1,101 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import cx from '../classNames';
+import { Box } from '../box';
+import RangeSelector from './RangeSelector';
+import { Typography } from '../typography';
+import { Button } from '../button';
+import { StyledHeader } from './styled-component';
+import { Stack, StackItem } from '../stack';
+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 { useOverrides } from '../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 = __rest(_a, ["adapter", "timeRangePresets", "onChange", "onSubmit", "timezone", "value", "timeRange", "preset", "minDate", "maxDate", "monthsShown", "disableTimezone"]);
+    var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var locale = useLocale();
+    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];
+    useEffect(function () {
+        setTimeRange(selectedTimeRange);
+        setPreset(getPresetId(selectedPreset, selectedValue));
+    }, [selectedTimeRange, 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 onDateChange = 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 = 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);
+            setTimeRange(nextDate);
+            onChange === null || onChange === void 0 ? void 0 : onChange(__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 = __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(__assign({ value: nextDate, date: nextDate, preset: 'CUSTOM' }, (disableTimezone ? {} : { timezone: timezone })));
+        }
+    }, [setTimeRange, dateHelpers, timeRangePresets, onChange, timezone, disableTimezone]);
+    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: [
+                    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));
+};
+RangeSelectorContainer.displayName = 'RangeSelectorContainer';
+export default RangeSelectorContainer;

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

@@ -0,0 +1,33 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, memo } from 'react';
+import { Menu as DefaultMenu, MenuItem as DefaultMenuItem } from '../menu';
+import { Box } from '../box';
+import { useOverrides } from '../overrides';
+import { useLocale } from '../locale';
+var TimeRangeList = function (_a) {
+    var onChange = _a.onChange, timeRange = _a.timeRange, preset = _a.preset, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides;
+    var locale = useLocale();
+    var onItemSelect = useCallback(function (timeRangePreset) {
+        if (timeRangePreset.id === 'CUSTOM') {
+            onChange({ date: timeRange });
+        }
+        else {
+            onChange({ preset: timeRangePreset.id });
+        }
+    }, [onChange, timeRange]);
+    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: [
+                    '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));
+};
+export default memo(TimeRangeList);
+TimeRangeList.displayName = 'TimeRangeList';

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

@@ -0,0 +1,186 @@
+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 RangeSelectorContainer from './RangeSelectorContainer';
+import { getSelectedTimeRange, getSystemTzName, getDefaultTimeRangePresets, switchEpochTimezone, adaptDateWithSystemTz, formatSummaryValue, } from './utils';
+import { useDatePickerState, StatelessDatePicker } from '../date-picker';
+import { useLocale } from '../locale';
+import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
+import { mergeOverrides } from '../overrides';
+import { normalizeDashes, prepareLocale } from '../date-picker/utils';
+import { CUSTOM_OPTION } from './constants';
+var __DEV__ = process.env.NODE_ENV !== 'production';
+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__) {
+        if (disableTimezone && _timezone) {
+            console.warn('[spaceweb] timezone can not be passed to the TimeRangePicker when disableTimezone is true');
+        }
+    }
+    var timezone = useMemo(function () {
+        if (disableTimezone) {
+            return getSystemTzName();
+        }
+        return _timezone !== null && _timezone !== void 0 ? _timezone : getSystemTzName();
+    }, [_timezone, disableTimezone]);
+    var dateFnsLocale = useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
+    var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var locale = useLocale();
+    var _j = 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 = useMemo(function () { return __spreadArray(__spreadArray([], __read((timeRangePresets !== null && timeRangePresets !== void 0 ? timeRangePresets : getDefaultTimeRangePresets(locale))), false), [
+        {
+            id: CUSTOM_OPTION.id,
+            label: locale.timeRangePicker.customRange,
+        },
+    ], 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]);
+    var defaultFormatDisplayValue = useCallback(function (date, normalizedFormatString) {
+        var _a, _b;
+        if (normalizedFormatString === void 0) { normalizedFormatString = 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 = getSelectedTimeRange(preset, timeRangeList);
+        }
+        else if (typeof value === 'string') {
+            timeRangePreset = getSelectedTimeRange(value, timeRangeList);
+        }
+        return formatSummaryValue({
+            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,
+            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 = 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 = switchEpochTimezone(timeRange[0], getSystemTzName(), timezone);
+            var endMillis = switchEpochTimezone(timeRange[1], getSystemTzName(), 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 })));
+        }
+        setIsOpen(false);
+    }, [setIsOpen, onSubmit, timeRangeList, disableTimezone]);
+    var timeRange = useMemo(function () {
+        var _a, _b, _c;
+        var dates;
+        if (Array.isArray(value)) {
+            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 : [];
+        }
+        return __spreadArray(__spreadArray([], __read((dates[0] ? [adaptDateWithSystemTz(dates[0], timezone)] : [])), false), __read((dates[1] ? [adaptDateWithSystemTz(dates[1], timezone)] : [])), false);
+    }, [value, timeRangeList, timezone, preset]);
+    var mergedOverrides = useMemo(function () {
+        return mergeOverrides({
+            Input: {
+                props: {
+                    overrides: __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: (_jsx(RangeSelectorContainer, { 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 = 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(__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));
+};

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

@@ -0,0 +1,41 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, memo } from 'react';
+import { Typography } from '../typography';
+import ChevronDown from '../icon/components/chevron-down';
+import { Stack } from '../stack';
+import { BaseButton } from '../base-button';
+import { TimezonePicker as DefaultTimezonePicker } from '../time-zone-picker';
+import { useLocale } from '../locale';
+import { mergeOverrides } from '../overrides';
+export var TimezonePicker = function (_a) {
+    var setTimezone = _a.setTimezone, timezone = _a.timezone, overrides = _a.overrides;
+    var locale = useLocale();
+    var mergedOverrides = useMemo(function () {
+        return mergeOverrides({
+            Select: {
+                props: {
+                    type: 'overlay',
+                    placeholder: locale.timeRangePicker.timezonePlaceholder,
+                    children: (_jsx(BaseButton, __assign({ "data-testid": "time-zone-picker", className: "focus:spr-text-04 hover:spr-text-04" }, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(Typography, __assign({ variant: "l1" }, { children: timezone || locale.timeRangePicker.timezoneLabel }), void 0), _jsx(ChevronDown, { size: 8 }, void 0)] }), void 0) }), void 0)),
+                    overrides: {
+                        Popover: {
+                            props: {
+                                showArrow: false,
+                            },
+                            style: function () { return ({
+                                marginTop: '0',
+                            }); },
+                        },
+                    },
+                },
+            },
+        }, overrides);
+    }, [overrides, timezone, locale]);
+    var onChange = useCallback(function (_a) {
+        var id = _a.id;
+        setTimezone(id);
+    }, [setTimezone]);
+    return _jsx(DefaultTimezonePicker, { value: timezone, onChange: onChange, overrides: mergedOverrides }, void 0);
+};
+export default memo(TimezonePicker);

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

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

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

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