@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/date-input/DateInput.js

@@ -13,24 +13,18 @@ var overrides_1 = require("../overrides");
 var constants_1 = require("../date-picker/constants");
 var utils_1 = require("../date-picker/utils");
 var styled_components_1 = require("./styled-components");
+var utils_2 = require("../time-range-picker/utils");
+var context_1 = require("../form-control/context");
 var DateInput = function (_a) {
-    var _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, _c = _a.formatString, formatString = _c === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _c, mask = _a.mask, onChange = _a.onChange, value = _a.value, locale = _a.locale, weekStartsOn = _a.weekStartsOn, _d = _a.maskChar, maskChar = _d === void 0 ? '_' : _d, overrides = _a.overrides, minDate = _a.minDate, maxDate = _a.maxDate, timeSelect = _a.timeSelect, restProps = (0, tslib_1.__rest)(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect"]);
+    var _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, _c = _a.formatString, formatString = _c === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _c, mask = _a.mask, onChange = _a.onChange, value = _a.value, locale = _a.locale, weekStartsOn = _a.weekStartsOn, _d = _a.maskChar, maskChar = _d === void 0 ? '_' : _d, overrides = _a.overrides, minDate = _a.minDate, maxDate = _a.maxDate, timeSelect = _a.timeSelect, _e = _a.showTimezone, showTimezone = _e === void 0 ? false : _e, _f = _a.timezone, timezone = _f === void 0 ? (0, utils_2.getSystemTzName)() : _f, restProps = (0, tslib_1.__rest)(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect", "showTimezone", "timezone"]);
+    var intent = (0, context_1.useContextualFormProps)(restProps).intent;
     var dateFnsLocale = (0, react_1.useMemo)(function () { return (0, utils_1.prepareLocale)(locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, locale]);
     var dateHelpers = (0, react_1.useMemo)(function () { return new date_helpers_1.default(adapter); }, [adapter]);
-    var _e = (0, tslib_1.__read)((0, react_1.useState)(function () { return (0, utils_1.formatDate)({ date: value, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }); }), 2), date = _e[0], setDate = _e[1];
-    var _f = (0, tslib_1.__read)((0, react_1.useState)(false), 2), error = _f[0], setError = _f[1];
-    (0, react_1.useEffect)(function () {
-        if ((0, utils_1.isDayInRange)(value, {
-            minDate: minDate,
-            maxDate: maxDate,
-            dateHelpers: dateHelpers,
-        })) {
-            setError(false);
-        }
-        else {
-            setError(true);
-        }
-    }, [dateHelpers, maxDate, minDate, value]);
+    var timezoneAdaptedValue = (0, react_1.useMemo)(function () { return (value ? new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(value, timezone)) : undefined); }, [value, timezone]);
+    var _g = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        return (0, utils_1.formatDate)({ date: timezoneAdaptedValue, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString });
+    }), 2), date = _g[0], setDate = _g[1];
+    var _h = (0, tslib_1.__read)((0, react_1.useState)(function () { return !(0, utils_1.isDayInRange)(timezoneAdaptedValue, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }); }), 2), error = _h[0], setError = _h[1];
     var getMask = (0, react_1.useCallback)(function () {
         if (!mask && formatString !== constants_1.DEFAULT_FORMAT_STRING) {
             return null;
@@ -47,7 +41,10 @@ var DateInput = function (_a) {
         var _mask = getMask();
         var _date = dateHelpers.date(dateString);
         // to check the clearable cases
-        if ((typeof _mask === 'string' && inputValue === _mask.replace(/[9|a|*]/g, ' ')) || inputValue.length === 0) {
+        if ((typeof _mask === 'string' &&
+            inputValue.replace(new RegExp(maskChar, 'g'), ' ') === _mask.replace(/[9|a|*]/g, ' ')) ||
+            inputValue.length === 0) {
+            setError(false);
             onChange(null);
             return;
         }
@@ -59,18 +56,27 @@ var DateInput = function (_a) {
         }
         var isValidDate = _date && dateHelpers.isValid(_date);
         if (isValidDate && _date) {
-            setError(false);
+            setError(!(0, utils_1.isDayInRange)(_date, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
             setDate((0, utils_1.formatDate)({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
-            onChange === null || onChange === void 0 ? void 0 : onChange(_date);
+            onChange === null || onChange === void 0 ? void 0 : onChange(new Date((0, utils_2.convertDateFromTargetTzToSystemTz)(_date, timezone)), timezone);
         }
         else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
             setError(true);
         }
-    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask]);
-    var onCalendarDateChange = (0, react_1.useCallback)(function (_date) {
-        setDate((0, utils_1.formatDate)({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
-        onChange(_date);
-    }, [onChange, dateFnsLocale, dateHelpers, formatString]);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask, timezone, maskChar, maxDate, minDate]);
+    var onCalendarDateChange = (0, react_1.useCallback)(function (_date, _timezone) {
+        // _date is timezone adapted date, original date is what user actually selected from calendar
+        var originalDate = new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(_date, _timezone));
+        setDate((0, utils_1.formatDate)({
+            date: originalDate,
+            locale: dateFnsLocale,
+            dateHelpers: dateHelpers,
+            formatString: formatString,
+        }));
+        setError(!(0, utils_1.isDayInRange)(originalDate, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
+        onChange(_date, _timezone);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, minDate, maxDate]);
     var mergedOverrides = (0, react_1.useMemo)(function () {
         return (0, overrides_1.mergeOverrides)({
             Before: {
@@ -80,17 +86,32 @@ var DateInput = function (_a) {
                     locale: locale,
                     onChange: onCalendarDateChange,
                     weekStartsOn: weekStartsOn,
+                    // passing value as it is as date picker will adapt this with timezone
                     value: value,
                     minDate: minDate,
                     maxDate: maxDate,
                     timeSelect: timeSelect,
+                    showTimezone: showTimezone,
+                    timezone: timezone,
                 },
             },
             Input: {
                 style: styled_components_1.inputStyles,
             },
         }, overrides);
-    }, [adapter, onCalendarDateChange, locale, overrides, value, weekStartsOn, minDate, maxDate, timeSelect]);
-    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return (0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, restProps, props, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
+    }, [
+        adapter,
+        onCalendarDateChange,
+        locale,
+        overrides,
+        value,
+        weekStartsOn,
+        minDate,
+        maxDate,
+        timeSelect,
+        showTimezone,
+        timezone,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return (0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, restProps, props, { intent: error ? 'error' : intent, overrides: mergedOverrides }), void 0); } }), void 0));
 };
 exports.DateInput = DateInput;

package/date-input/styled-components.d.ts

@@ -1,4 +1,4 @@
 import { StyleObject } from '../types';
-export declare const inputStyles: (utils: any, { $size }: {
+export declare const inputStyles: (string | ((utils: any, { $size }: {
     $size: any;
-}) => StyleObject;
+}) => StyleObject))[];

package/date-input/styled-components.js

@@ -6,11 +6,13 @@ var dateInputSizeConfig = {
     md: { paddingLeft: '4px' },
     lg: { paddingLeft: '8px' },
 };
-var inputStyles = function (utils, _a) {
-    var _b;
-    var $size = _a.$size;
-    return ({
-        paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
-    });
-};
-exports.inputStyles = inputStyles;
+exports.inputStyles = [
+    'tabular-nums',
+    function (utils, _a) {
+        var _b;
+        var $size = _a.$size;
+        return ({
+            paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
+        });
+    },
+];

package/date-input/types.d.ts

@@ -1,15 +1,17 @@
 import { WeekStartsOn } from '../date-picker';
 import { InputProps } from '../input';
-export declare type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'intent' | 'min' | 'max' | 'debouncedOnChange' | 'debounceInterval' | 'type' | 'inputMode'> & {
+export declare type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'min' | 'max' | 'debouncedOnChange' | 'debounceInterval' | 'type' | 'inputMode'> & {
     formatString?: string;
     adapter?: any;
     mask?: string;
     locale?: any;
     value?: Date;
-    onChange: (value?: Date | null) => void;
+    onChange: (value?: Date | null, timezone?: string) => void;
     weekStartsOn?: WeekStartsOn;
     maskChar?: string;
     minDate?: Date;
     maxDate?: Date;
     timeSelect?: boolean;
+    showTimezone?: boolean;
+    timezone?: string;
 };

package/date-picker/Calendar.js

@@ -8,7 +8,8 @@ var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker
 var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
 var constants_1 = require("baseui/datepicker/constants");
 var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
-var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
+var chevron_left_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-left"));
+var chevron_right_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-right"));
 var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var popover_1 = require("../popover");
 var menu_1 = require("../menu");
@@ -20,7 +21,7 @@ var styled_components_1 = require("./styled-components");
 var constants_2 = require("./constants");
 var utils_1 = require("./utils");
 var useIsMobileDevice_1 = require("../hooks/useIsMobileDevice");
-var CALENDAR_CUSTOM_THEME = { theme: { input: { borderRadius: '4px' } } };
+var CALENDAR_CUSTOM_THEME = { theme: { input: { borderRadius: '4px', sizeSm: { borderRadius: '4px' } } } };
 var MonthYearSelectMenu = function (props) {
     var _a = (0, tslib_1.__read)((0, react_1.useState)(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
     var onItemSelect = props.onItemSelect;
@@ -45,6 +46,7 @@ var isHiddenPaginationButton = function (direction, order, monthsShown) {
 var ArrowButton = function (_a) {
     var $order = _a.$order, monthsShown = _a.monthsShown, direction = _a.direction, nextButtonProps = (0, tslib_1.__rest)(_a, ["$order", "monthsShown", "direction"]);
     var isHidden = isHiddenPaginationButton(direction, $order, monthsShown);
+    var ChevronIcon = direction === 'next' ? chevron_right_1.default : chevron_left_1.default;
     return ((0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ className: [
             'h-6 w-6',
             isHidden ? 'invisible' : 'visible',
@@ -54,7 +56,7 @@ var ArrowButton = function (_a) {
                     minWidth: px2rem(24),
                 });
             },
-        ] }, nextButtonProps, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 8, className: ['transform', direction === 'next' ? '-rotate-90' : 'rotate-90'] }, void 0) }), void 0));
+        ] }, nextButtonProps, { children: (0, jsx_runtime_1.jsx)(ChevronIcon, { size: 8 }, void 0) }), void 0));
 };
 var Calendar = function (_a) {
     var _b;

package/date-picker/DateInput.js

@@ -10,8 +10,10 @@ var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var input_1 = require("../input");
 var utils_1 = require("./utils");
 var box_1 = require("../box");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var theme_1 = require("../theme");
 var COMMON_STYLE = [
-    'px-0 py-0 rounded-2 font-mono focus:spr-ui-04 focus:spr-text-05 text-center',
+    'px-0 py-0 rounded-2 focus:spr-ui-04 focus:spr-text-05 text-center',
     function (_a) {
         var theme = _a.theme, px2rem = _a.px2rem;
         return ({
@@ -22,14 +24,13 @@ var COMMON_STYLE = [
                 caretColor: theme.spr.ui01,
             },
             fontVariantNumeric: 'tabular-nums',
-            lineHeight: px2rem(16),
         });
     },
 ];
 var DATE_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '1.8rem',
+        maxWidth: '1.9rem',
     },
 ];
 var DATE_OVERRIDES = {
@@ -46,7 +47,7 @@ var DATE_OVERRIDES = {
 var MONTH_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '2.6rem',
+        maxWidth: '2.7rem',
     },
 ];
 var MONTH_OVERRIDES = {
@@ -63,7 +64,7 @@ var MONTH_OVERRIDES = {
 var YEAR_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '3.6rem',
+        maxWidth: '3.7rem',
     },
 ];
 var YEAR_OVERRIDES = {
@@ -96,12 +97,15 @@ var MIN_YEAR = 1900;
 var MAX_YEAR = 2100;
 var isDateValid = function (value) { return value > 0 && value <= 31; };
 exports.isDateValid = isDateValid;
+exports.DateInput = React.memo(
 // eslint-disable-next-line max-statements
-exports.DateInput = React.memo(function (_a) {
+function (_a) {
+    var _b;
     var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled;
-    var _b = (0, tslib_1.__read)(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _b[0], setDay = _b[1];
-    var _c = (0, tslib_1.__read)(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _c[0], setYear = _c[1];
-    var _d = (0, tslib_1.__read)(React.useState(false), 2), error = _d[0], setError = _d[1];
+    var theme = (0, theme_1.useTheme)().theme;
+    var _c = (0, tslib_1.__read)(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _c[0], setDay = _c[1];
+    var _d = (0, tslib_1.__read)(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _d[0], setYear = _d[1];
+    var _e = (0, tslib_1.__read)(React.useState(false), 2), error = _e[0], setError = _e[1];
     var minAllowedDate = 1;
     var maxAllowedDate = (0, getDaysInMonth_1.default)(date || new Date());
     var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
@@ -210,11 +214,9 @@ exports.DateInput = React.memo(function (_a) {
         }
     };
     var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', 'sm', (0, themeHelpers_1.getDefaultSize)(theme));
     return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ "data-testid": "date-input", className: [
-            'px-3 flex items-center border-1 border-solid rounded-4 border-box',
-            function (_a) {
-                var theme = _a.theme, px2rem = _a.px2rem;
-                return ((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(error ? theme.spr.supportError : theme.spr.ui03)), { height: px2rem(35) }), (disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 })));
-            },
+            'px-3 flex items-center border-1 border-solid border-box',
+            (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(error ? theme.spr.supportError : theme.spr.ui03)), (0, longHandHelpers_1.borderRadius)((_b = inputSizeTheme.borderRadius) !== null && _b !== void 0 ? _b : theme.input.borderRadius)), { paddingLeft: inputSizeTheme.paddingX, paddingRight: inputSizeTheme.paddingX, paddingTop: inputSizeTheme.paddingY, paddingBottom: inputSizeTheme.paddingY }), (disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 })),
         ] }, { children: [(0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm", disabled: disabled }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
 });

package/date-picker/DatePickerContent.d.ts

@@ -1,9 +1,15 @@
 import * as React from 'react';
-import { DatepickerOverrides, CalendarProps } from './types';
-declare type DatePickerContentProps = Omit<CalendarProps, 'timeSelectEnd' | 'timeSelectStart'> & {
+import { DatepickerOverrides, CalendarProps, Nullable } from './types';
+declare type DatePickerContentProps = Omit<CalendarProps, 'timeSelectEnd' | 'timeSelectStart' | 'onChange'> & {
     overrides?: DatepickerOverrides;
     timeSelect?: boolean;
     onClose: () => void;
+    showTimezone?: boolean;
+    timezone: string;
+    onChange: (params: {
+        date?: Nullable<Date>[] | Nullable<Date>;
+        timezone?: string;
+    }) => void;
 };
-export declare const DatePickerContent: ({ value: _value, onChange, overrides, autoFocusCalendar, onClose, adapter, ...props }: DatePickerContentProps) => React.ReactElement;
+export declare const DatePickerContent: ({ value: _value, onChange, overrides, autoFocusCalendar, onClose, adapter, showTimezone, timezone: _timezone, ...props }: DatePickerContentProps) => React.ReactElement;
 export {};

package/date-picker/DatePickerContent.js

@@ -6,19 +6,38 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
 var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
 var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
+var compact_1 = (0, tslib_1.__importDefault)(require("lodash/compact"));
 var Calendar_1 = (0, tslib_1.__importDefault)(require("./Calendar"));
 var box_1 = require("../box");
 var stack_1 = require("../stack");
 var button_1 = require("../button");
 var styled_components_1 = require("./styled-components");
+var time_zone_picker_1 = require("../time-zone-picker");
+var form_control_1 = require("../form-control");
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
 var utils_1 = require("./utils");
+var utils_2 = require("../time-range-picker/utils");
+var MONTH_WIDTH = 284;
+var TIMEZONE_PICKER_OVERRIDES = {
+    Select: {
+        props: {
+            overrides: {
+                Input: {
+                    props: {
+                        'data-testid': 'timezone-selector',
+                    },
+                },
+            },
+        },
+    },
+};
 var DatePickerContent = function (_a) {
-    var _value = _a.value, onChange = _a.onChange, overrides = _a.overrides, autoFocusCalendar = _a.autoFocusCalendar, onClose = _a.onClose, _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, props = (0, tslib_1.__rest)(_a, ["value", "onChange", "overrides", "autoFocusCalendar", "onClose", "adapter"]);
+    var _value = _a.value, onChange = _a.onChange, overrides = _a.overrides, autoFocusCalendar = _a.autoFocusCalendar, onClose = _a.onClose, _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, showTimezone = _a.showTimezone, _timezone = _a.timezone, props = (0, tslib_1.__rest)(_a, ["value", "onChange", "overrides", "autoFocusCalendar", "onClose", "adapter", "showTimezone", "timezone"]);
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var _c = (0, tslib_1.__read)(React.useState(_value), 2), value = _c[0], setValue = _c[1];
     var _d = (0, tslib_1.__read)(React.useState(false), 2), hasError = _d[0], setHasError = _d[1];
+    var _e = (0, tslib_1.__read)(React.useState(_timezone), 2), timezone = _e[0], setTimezone = _e[1];
     React.useEffect(function () {
         if ((0, utils_1.isTimeInRange)(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
             setHasError(false);
@@ -27,19 +46,51 @@ var DatePickerContent = function (_a) {
             setHasError(true);
         }
     }, [dateHelpers, props.maxDate, props.minDate, value]);
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Footer, styled_components_1.StyledFooter), 2), Footer = _e[0], footerProps = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Footer, styled_components_1.StyledFooter), 2), Footer = _f[0], footerProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Calendar, Calendar_1.default), 2), Calendar = _g[0], calendarProps = _g[1];
     var locale = (0, locale_1.useLocale)();
     var handleChange = React.useCallback(function (data) {
         setValue(data.date);
         if (!props.timeSelect) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(data);
+            if (Array.isArray(data.date)) {
+                onChange === null || onChange === void 0 ? void 0 : onChange({
+                    date: (0, compact_1.default)(data.date).map(function (date) { return new Date((0, utils_2.convertDateFromTargetTzToSystemTz)(date, timezone)); }),
+                    timezone: timezone,
+                });
+            }
+            else {
+                var startMillis = (0, utils_2.convertDateFromTargetTzToSystemTz)(data.date, timezone);
+                onChange === null || onChange === void 0 ? void 0 : onChange({
+                    date: new Date(startMillis),
+                    timezone: timezone,
+                });
+            }
         }
-    }, [onChange, props.timeSelect]);
+    }, [onChange, props.timeSelect, timezone]);
     var handleSubmit = React.useCallback(function () {
-        onChange === null || onChange === void 0 ? void 0 : onChange({ date: value });
-    }, [onChange, value]);
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Calendar_1.default, (0, tslib_1.__assign)({ trapTabbing: !props.timeSelect }, props, { value: value, onChange: handleChange, 
+        if (value && !Array.isArray(value)) {
+            var startMillis = (0, utils_2.convertDateFromTargetTzToSystemTz)(value, timezone);
+            onChange === null || onChange === void 0 ? void 0 : onChange({ date: new Date(startMillis), timezone: timezone });
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                date: value
+                    ? (0, compact_1.default)(value).map(function (date) { return new Date((0, utils_2.convertDateFromTargetTzToSystemTz)(date, timezone)); })
+                    : undefined,
+                timezone: timezone,
+            });
+        }
+    }, [onChange, timezone, value]);
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: function (_a) {
+            var px2rem = _a.px2rem;
+            return ({
+                maxWidth: px2rem((props.monthsShown || 1) * MONTH_WIDTH),
+            });
+        } }, { children: [(0, jsx_runtime_1.jsx)(Calendar, (0, tslib_1.__assign)({ trapTabbing: !props.timeSelect }, props, { value: value, onChange: handleChange, 
                 // @ts-ignore
-                overrides: overrides, autoFocusCalendar: autoFocusCalendar, timeSelectEnd: props.timeSelect, timeSelectStart: props.timeSelect, adapter: adapter }), void 0), props.timeSelect ? ((0, jsx_runtime_1.jsx)(Footer, (0, tslib_1.__assign)({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { 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)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", onClick: 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", onClick: handleSubmit, "data-testid": "save", disabled: hasError }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0) }), void 0)) : null] }, void 0));
+                overrides: overrides, autoFocusCalendar: autoFocusCalendar, timeSelectEnd: props.timeSelect, timeSelectStart: props.timeSelect, adapter: adapter }, calendarProps), void 0), showTimezone ? ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "px-4 mb-4" }, { children: (0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ label: locale.datePicker.timezonePickerLabel }, { children: (0, jsx_runtime_1.jsx)(time_zone_picker_1.TimezonePicker, { clearable: false, placeholder: locale.datePicker.timezonePickerPlaceholder, value: timezone, size: "sm", onChange: function (_a) {
+                            var id = _a.id;
+                            return setTimezone(id);
+                        }, overrides: TIMEZONE_PICKER_OVERRIDES }, void 0) }), void 0) }), void 0)) : null, props.timeSelect ? ((0, jsx_runtime_1.jsx)(Footer, (0, tslib_1.__assign)({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { 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)(button_1.Button, (0, tslib_1.__assign)({ size: "xs", onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "xs", onClick: handleSubmit, "data-testid": "save", disabled: hasError || !value }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0) }), void 0)) : null] }), void 0));
 };
 exports.DatePickerContent = DatePickerContent;

package/date-picker/DatePickerInput.js

@@ -16,11 +16,15 @@ var styled_components_1 = require("../input/styled-components");
 var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
 var InputBeforeEnhancer = function (_a) {
     var disabled = _a.disabled, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: (0, classNames_1.default)('flex items-center pl-3', { 'cursor-pointer': !disabled }), onClick: disabled ? noop_1.default : onClick }, { children: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, { className: "".concat(disabled ? 'spr-icon-03' : 'spr-icon-01'), size: 14 }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: (0, classNames_1.default)('flex items-center pl-3', {
+            'cursor-pointer': !disabled,
+        }), onClick: disabled ? noop_1.default : onClick }, { children: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, { className: "".concat(disabled ? 'spr-icon-03' : 'spr-icon-01'), size: 14 }, void 0) }), void 0));
 };
 var InputAfterEnhancer = function (_a) {
     var onClick = _a.onClick, isOpen = _a.isOpen, disabled = _a.disabled;
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: (0, classNames_1.default)('flex items-center pr-3', { 'cursor-pointer': !disabled }), onClick: disabled ? noop_1.default : onClick }, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { className: commonStyles_1.chevronStyles, "$isOpen": isOpen }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: (0, classNames_1.default)('flex items-center pr-3', {
+            'cursor-pointer': !disabled,
+        }), onClick: disabled ? noop_1.default : onClick }, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { className: commonStyles_1.chevronStyles, "$isOpen": isOpen }, void 0) }), void 0));
 };
 var DEFAULT_INPUT_WIDTH = 62;
 var DatePickerInput = function (_a) {
@@ -71,10 +75,9 @@ var DatePickerInput = function (_a) {
                 style: function (_a, _b) {
                     var theme = _a.theme;
                     var $intent = _b.$intent;
-                    if (isOpen && $intent === 'default') {
-                        return (0, longHandHelpers_1.borderColor)(theme.spr.focus01);
-                    }
-                    return {};
+                    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (isOpen && $intent === 'default' && (0, longHandHelpers_1.borderColor)(theme.spr.focus01))), (autoSizeInput && {
+                        width: 'auto',
+                    })));
                 },
             },
             ClearIcon: {

package/date-picker/StatelessDatePicker.js

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var compact_1 = (0, tslib_1.__importDefault)(require("lodash/compact"));
 var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
 var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
 var popover_1 = require("baseui/popover");
@@ -19,6 +20,9 @@ var overrides_1 = require("../overrides");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 var DatePickerContent_1 = require("./DatePickerContent");
+var utils_2 = require("../time-range-picker/utils");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style");
 var accessibilityStyles = {
     position: 'fixed',
     width: '0px',
@@ -35,14 +39,24 @@ var accessibilityStyles = {
 // eslint-disable-next-line max-statements
 var StatelessDatePicker = function (_props) {
     var _a, _b;
-    var _c = (0, context_1.useContextualFormProps)(_props), onChange = _c.onChange, onBlur = _c.onBlur, _d = _c.adapter, adapter = _d === void 0 ? date_fns_adapter_1.default : _d, _e = _c.size, size = _e === void 0 ? 'md' : _e, _f = _c.formatString, formatString = _f === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _f, _g = _c.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _c.onFocus, clearable = _c.clearable, displayValueAtRangeIndex = _c.displayValueAtRangeIndex, _h = _c.variant, variant = _h === void 0 ? 'default' : _h, overrides = _c.overrides, intent = _c.intent, value = _c.value, formatDisplayValue = _c.formatDisplayValue, _j = _c.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _c.weekStartsOn, props = (0, tslib_1.__rest)(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
+    var theme = (0, style_1.useStyle)().theme;
+    var _c = (0, context_1.useContextualFormProps)(_props), onChange = _c.onChange, onBlur = _c.onBlur, _d = _c.adapter, adapter = _d === void 0 ? date_fns_adapter_1.default : _d, _e = _c.size, size = _e === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _e, _f = _c.formatString, formatString = _f === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _f, _g = _c.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _c.onFocus, clearable = _c.clearable, displayValueAtRangeIndex = _c.displayValueAtRangeIndex, _h = _c.variant, variant = _h === void 0 ? 'default' : _h, overrides = _c.overrides, intent = _c.intent, _value = _c.value, formatDisplayValue = _c.formatDisplayValue, _j = _c.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _c.weekStartsOn, _k = _c.timezone, timezone = _k === void 0 ? (0, utils_2.getSystemTzName)() : _k, _l = _c.showTimezone, showTimezone = _l === void 0 ? false : _l, props = (0, tslib_1.__rest)(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone"]);
     var locale = (0, locale_1.useLocale)();
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return (0, utils_1.prepareLocale)(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
+    var value = React.useMemo(function () {
+        if (Array.isArray(_value)) {
+            return (0, compact_1.default)(_value).map(function (date) { return new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(date, timezone)); });
+        }
+        if (_value) {
+            return new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(_value, timezone));
+        }
+        return undefined;
+    }, [_value, timezone]);
     // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
     // and we will set this to false when calendar will be closed.
-    var _k = (0, tslib_1.__read)(React.useState(false), 2), autoFocusCalendar = _k[0], setAutoFocusCalendar = _k[1];
-    var _l = (0, tslib_1.__read)(React.useState(false), 2), error = _l[0], setError = _l[1];
+    var _m = (0, tslib_1.__read)(React.useState(false), 2), autoFocusCalendar = _m[0], setAutoFocusCalendar = _m[1];
+    var _o = (0, tslib_1.__read)(React.useState(false), 2), error = _o[0], setError = _o[1];
     React.useEffect(function () {
         if ((0, utils_1.isTimeInRange)(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
             setError(false);
@@ -52,7 +66,7 @@ var StatelessDatePicker = function (_props) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers]);
     var screenReaderMsgId = (0, useUniqueId_1.default)();
-    var _m = props["aria-describedby"], ariaDescribedBy = _m === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _m;
+    var _p = props["aria-describedby"], ariaDescribedBy = _p === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _p;
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = (0, utils_1.normalizeDashes)(formatString);
         if (formatDisplayValue) {
@@ -61,8 +75,15 @@ var StatelessDatePicker = function (_props) {
             }
             return formatDisplayValue(date, normalizedFormatString);
         }
-        return (0, utils_1.formatDate)({ date: date, dateHelpers: dateHelpers, formatString: normalizedFormatString, locale: dateFnsLocale });
-    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale]);
+        return (0, utils_1.formatDate)({
+            date: date,
+            dateHelpers: dateHelpers,
+            formatString: normalizedFormatString,
+            locale: dateFnsLocale,
+            timezone: timezone,
+            showTimezone: showTimezone,
+        });
+    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale, timezone, showTimezone]);
     var mergedOverrides = React.useMemo(function () {
         return (0, overrides_1.mergeOverrides)({
             Popover: {
@@ -97,8 +118,8 @@ var StatelessDatePicker = function (_props) {
     }, [locale.datePicker.popoverAriaLabel, overrides]);
     var displayValue = React.useMemo(function () { return defaultFormatDisplayValue(value) || ''; }, [value, defaultFormatDisplayValue]);
     var handleDateChange = React.useCallback(function (data) {
-        onChange === null || onChange === void 0 ? void 0 : onChange({ value: data.date });
-    }, [onChange]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(showTimezone ? { value: data.date, timezone: data.timezone } : { value: data.date });
+    }, [onChange, showTimezone]);
     var onClose = React.useCallback(function () {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         setAutoFocusCalendar(false);
@@ -125,17 +146,15 @@ var StatelessDatePicker = function (_props) {
     var handleInputChange = React.useCallback(function (e) {
         var inputValue = e.currentTarget.value;
         if (clearable && inputValue.length === 0) {
-            onChange === null || onChange === void 0 ? void 0 : onChange({
-                value: undefined,
-            });
+            onChange === null || onChange === void 0 ? void 0 : onChange(showTimezone ? { value: undefined, timezone: timezone } : { value: undefined });
         }
-    }, [clearable, onChange]);
+    }, [clearable, onChange, timezone, showTimezone]);
     var dateAriaLabel = React.useMemo(function () { return (0, utils_1.getAriaLabel)(value, defaultFormatDisplayValue, locale); }, [value, defaultFormatDisplayValue, locale]);
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _o[0], inputProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _p[0], popoverProps = _p[1];
-    var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _q[0], inputWrapperProps = _q[1];
+    var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _q[0], inputProps = _q[1];
+    var _r = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _r[0], popoverProps = _r[1];
+    var _s = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _s[0], inputWrapperProps = _s[1];
     var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, (0, tslib_1.__assign)({ focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : onFocus, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, (0, tslib_1.__assign)({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale }), void 0) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, (0, tslib_1.__assign)({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, (0, tslib_1.__assign)({ "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, (0, tslib_1.__assign)({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : onFocus, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, (0, tslib_1.__assign)({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone }), void 0) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, (0, tslib_1.__assign)({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, (0, tslib_1.__assign)({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
                         onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps), void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ id: ariaDescribedBy, style: accessibilityStyles }, { children: locale.timeRangePicker.screenReaderMessageInput }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ "aria-live": "assertive", style: accessibilityStyles }, { children: dateAriaLabel }), void 0)] }, void 0));
 };

package/date-picker/locale.d.ts

@@ -1,3 +1,5 @@
 export declare type DatePickerLocale = {
     popoverAriaLabel: string;
+    timezonePickerLabel: string;
+    timezonePickerPlaceholder: string;
 };

package/date-picker/stateful-container.js

@@ -4,23 +4,26 @@ var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
 var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
 var useDatePickerState_1 = require("./useDatePickerState");
+var utils_1 = require("../time-range-picker/utils");
 var StatefulContainer = function (_a) {
-    var _b;
-    var adapter = _a.adapter, onChange = _a.onChange, value = _a.value, _c = _a.startOpen, startOpen = _c === void 0 ? false : _c, props = (0, tslib_1.__rest)(_a, ["adapter", "onChange", "value", "startOpen"]);
-    var _d = (0, tslib_1.__read)(React.useState(value), 2), date = _d[0], setDate = _d[1];
-    var _e = (0, useDatePickerState_1.useDatePickerState)({ startOpen: startOpen }), isOpen = _e.isOpen, handleOpen = _e.handleOpen, handleClose = _e.handleClose, setIsOpen = _e.setIsOpen;
+    var _b, _c;
+    var adapter = _a.adapter, onChange = _a.onChange, value = _a.value, _d = _a.startOpen, startOpen = _d === void 0 ? false : _d, props = (0, tslib_1.__rest)(_a, ["adapter", "onChange", "value", "startOpen"]);
+    var _e = (0, tslib_1.__read)(React.useState(value), 2), date = _e[0], setDate = _e[1];
+    var _f = (0, tslib_1.__read)(React.useState((_b = props.timezone) !== null && _b !== void 0 ? _b : (0, utils_1.getSystemTzName)()), 2), timezone = _f[0], setTimezone = _f[1];
+    var _g = (0, useDatePickerState_1.useDatePickerState)({ startOpen: startOpen }), isOpen = _g.isOpen, handleOpen = _g.handleOpen, handleClose = _g.handleClose, setIsOpen = _g.setIsOpen;
     React.useEffect(function () {
         setDate(value);
     }, [value]);
     var handleDateChange = React.useCallback(function (_a) {
-        var _value = _a.value;
+        var _value = _a.value, _timezone = _a.timezone;
         var prevValue = date;
         setDate(_value);
-        onChange === null || onChange === void 0 ? void 0 : onChange({ value: _value });
+        setTimezone(_timezone);
+        onChange === null || onChange === void 0 ? void 0 : onChange(props.showTimezone ? { value: _value, timezone: _timezone } : { value: _value });
         setIsOpen(false);
-    }, [setDate, setIsOpen, onChange, date]);
+    }, [setDate, setIsOpen, onChange, date, props.showTimezone]);
     var children = props.children, restProps = (0, tslib_1.__rest)(props, ["children"]);
-    return (_b = props.children) === null || _b === void 0 ? void 0 : _b.call(props, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { value: date, adapter: adapter, onChange: handleDateChange, onFocus: handleOpen, onBlur: handleClose, isOpen: isOpen, range: false }));
+    return (_c = props.children) === null || _c === void 0 ? void 0 : _c.call(props, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { value: date, adapter: adapter, onChange: handleDateChange, onFocus: handleOpen, onBlur: handleClose, isOpen: isOpen, range: false, timezone: timezone }));
 };
 StatefulContainer.defaultProps = {
     adapter: date_fns_adapter_1.default,