@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/esm/date-input/Before.d.ts

@@ -2,16 +2,18 @@ import { ReactElement } from 'react';
 import { SharedProps } from 'baseui/input';
 import { WeekStartsOn } from '../date-picker';
 import { Override } from '../overrides';
-export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, ...props }: SharedProps & {
+export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, showTimezone, timezone, ...props }: SharedProps & {
     adapter?: any;
     locale?: any;
     overrides?: {
         DatePicker?: Override<Record<string, any>> | undefined;
     } | undefined;
-    onChange: (value?: Date | undefined) => void;
+    onChange: (value?: Date | undefined, timezone?: string | undefined) => void;
     weekStartsOn?: WeekStartsOn | undefined;
     minDate?: Date | undefined;
     maxDate?: Date | undefined;
     value?: Date | undefined;
     timeSelect?: boolean | undefined;
+    showTimezone?: boolean | undefined;
+    timezone?: string | undefined;
 }) => ReactElement;

package/esm/date-input/Before.js

@@ -5,11 +5,11 @@ import { DatePicker as DefaultDatePicker } from '../date-picker';
 import { CalendarIconButton } from './CalendarIconButton';
 import { mergeOverrides, useOverrides } from '../overrides';
 export var Before = function (_a) {
-    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, props = __rest(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect"]);
+    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, _b = _a.showTimezone, showTimezone = _b === void 0 ? false : _b, timezone = _a.timezone, props = __rest(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect", "showTimezone", "timezone"]);
     var onChange = useCallback(function (data) {
-        _onChange(data.value);
+        _onChange(data.value, data.timezone);
     }, [_onChange]);
-    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, DefaultDatePicker), 2), DatePicker = _b[0], datePickerProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, DefaultDatePicker), 2), DatePicker = _c[0], datePickerProps = _c[1];
     var mergedOverrides = useMemo(function () {
         var _a;
         return mergeOverrides({
@@ -19,5 +19,5 @@ export var Before = function (_a) {
             },
         }, (_a = datePickerProps) === null || _a === void 0 ? void 0 : _a.overrides);
     }, [datePickerProps, props]);
-    return (_jsx(DatePicker, __assign({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value }, datePickerProps, { overrides: mergedOverrides }), void 0));
+    return (_jsx(DatePicker, __assign({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value, showTimezone: showTimezone, timezone: timezone }, datePickerProps, { overrides: mergedOverrides }), void 0));
 };

package/esm/date-input/CalendarIconButton.js

@@ -3,4 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import BaseCalendarIcon from '../icon/components/calendar-solid';
 import { IconButton } from '../button';
 import { Box } from '../box';
-export var CalendarIconButton = function (props) { return (_jsx(Box, __assign({ className: "flex items-center h-full pl-1" }, { children: _jsx(IconButton, __assign({ size: "xs", className: "flex items-center", disabled: props.$disabled, type: "button" }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0) }), void 0)); };
+import { useLocale } from '../locale';
+import { useStyle } from '../style';
+export var CalendarIconButton = function (props) {
+    var locale = useLocale();
+    var theme = useStyle().theme;
+    return (_jsx(Box, __assign({ className: "flex items-center h-full pl-1" }, { children: _jsx(IconButton, __assign({ size: theme.density === 'COMPACT' ? 'xxxs' : 'xxs', className: "flex items-center", disabled: props.$disabled, type: "button", "aria-label": locale.calendar.calendarButtonAriaLabel }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0) }), void 0));
+};

package/esm/date-input/DateInput.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { DateInputProps } from './types';
-export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, ...restProps }: DateInputProps) => ReactElement;
+export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, showTimezone, timezone, ...restProps }: DateInputProps) => ReactElement;

package/esm/date-input/DateInput.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import InputMask from 'react-input-mask';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
@@ -10,24 +10,18 @@ import { mergeOverrides } from '../overrides';
 import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
 import { prepareLocale, formatDate, normalizeDashes, isDayInRange } from '../date-picker/utils';
 import { inputStyles } from './styled-components';
+import { convertDateFromSystemTzToTargetTz, getSystemTzName, convertDateFromTargetTzToSystemTz, } from '../time-range-picker/utils';
+import { useContextualFormProps } from '../form-control/context';
 export var DateInput = function (_a) {
-    var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? 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 = __rest(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect"]);
+    var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? 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 ? getSystemTzName() : _f, restProps = __rest(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect", "showTimezone", "timezone"]);
+    var intent = useContextualFormProps(restProps).intent;
     var dateFnsLocale = useMemo(function () { return prepareLocale(locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, locale]);
     var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
-    var _e = __read(useState(function () { return formatDate({ date: value, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }); }), 2), date = _e[0], setDate = _e[1];
-    var _f = __read(useState(false), 2), error = _f[0], setError = _f[1];
-    useEffect(function () {
-        if (isDayInRange(value, {
-            minDate: minDate,
-            maxDate: maxDate,
-            dateHelpers: dateHelpers,
-        })) {
-            setError(false);
-        }
-        else {
-            setError(true);
-        }
-    }, [dateHelpers, maxDate, minDate, value]);
+    var timezoneAdaptedValue = useMemo(function () { return (value ? new Date(convertDateFromSystemTzToTargetTz(value, timezone)) : undefined); }, [value, timezone]);
+    var _g = __read(useState(function () {
+        return formatDate({ date: timezoneAdaptedValue, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString });
+    }), 2), date = _g[0], setDate = _g[1];
+    var _h = __read(useState(function () { return !isDayInRange(timezoneAdaptedValue, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }); }), 2), error = _h[0], setError = _h[1];
     var getMask = useCallback(function () {
         if (!mask && formatString !== DEFAULT_FORMAT_STRING) {
             return null;
@@ -44,7 +38,10 @@ export 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;
         }
@@ -56,18 +53,27 @@ export var DateInput = function (_a) {
         }
         var isValidDate = _date && dateHelpers.isValid(_date);
         if (isValidDate && _date) {
-            setError(false);
+            setError(!isDayInRange(_date, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
             setDate(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(convertDateFromTargetTzToSystemTz(_date, timezone)), timezone);
         }
         else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
             setError(true);
         }
-    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask]);
-    var onCalendarDateChange = useCallback(function (_date) {
-        setDate(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 = useCallback(function (_date, _timezone) {
+        // _date is timezone adapted date, original date is what user actually selected from calendar
+        var originalDate = new Date(convertDateFromSystemTzToTargetTz(_date, _timezone));
+        setDate(formatDate({
+            date: originalDate,
+            locale: dateFnsLocale,
+            dateHelpers: dateHelpers,
+            formatString: formatString,
+        }));
+        setError(!isDayInRange(originalDate, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
+        onChange(_date, _timezone);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, minDate, maxDate]);
     var mergedOverrides = useMemo(function () {
         return mergeOverrides({
             Before: {
@@ -77,16 +83,31 @@ export 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: inputStyles,
             },
         }, overrides);
-    }, [adapter, onCalendarDateChange, locale, overrides, value, weekStartsOn, minDate, maxDate, timeSelect]);
-    return (_jsx(InputMask, __assign({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return _jsx(Input, __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 (_jsx(InputMask, __assign({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return _jsx(Input, __assign({}, restProps, props, { intent: error ? 'error' : intent, overrides: mergedOverrides }), void 0); } }), void 0));
 };

package/esm/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/esm/date-input/styled-components.js

@@ -3,10 +3,13 @@ var dateInputSizeConfig = {
     md: { paddingLeft: '4px' },
     lg: { paddingLeft: '8px' },
 };
-export var inputStyles = function (utils, _a) {
-    var _b;
-    var $size = _a.$size;
-    return ({
-        paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
-    });
-};
+export var 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/esm/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/esm/date-picker/Calendar.js

@@ -6,7 +6,8 @@ import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import { DENSITY } from 'baseui/datepicker/constants';
 import _merge from 'lodash/merge';
-import ChevronDown from '../icon/components/chevron-down';
+import ChevronLeft from '../icon/components/chevron-left';
+import ChevronRight from '../icon/components/chevron-right';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { Popover } from '../popover';
 import { Menu, MenuItem } from '../menu';
@@ -18,7 +19,7 @@ import { getDayStyles, getCalendarContainerStyles } from './styled-components';
 import { DEFAULT_FORMAT_STRING } from './constants';
 import { prepareLocale } from './utils';
 import { useIsMobileDevice } from '../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 = __read(useState(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
     var onItemSelect = props.onItemSelect;
@@ -43,6 +44,7 @@ var isHiddenPaginationButton = function (direction, order, monthsShown) {
 var ArrowButton = function (_a) {
     var $order = _a.$order, monthsShown = _a.monthsShown, direction = _a.direction, nextButtonProps = __rest(_a, ["$order", "monthsShown", "direction"]);
     var isHidden = isHiddenPaginationButton(direction, $order, monthsShown);
+    var ChevronIcon = direction === 'next' ? ChevronRight : ChevronLeft;
     return (_jsx(IconButton, __assign({ className: [
             'h-6 w-6',
             isHidden ? 'invisible' : 'visible',
@@ -52,7 +54,7 @@ var ArrowButton = function (_a) {
                     minWidth: px2rem(24),
                 });
             },
-        ] }, nextButtonProps, { children: _jsx(ChevronDown, { size: 8, className: ['transform', direction === 'next' ? '-rotate-90' : 'rotate-90'] }, void 0) }), void 0));
+        ] }, nextButtonProps, { children: _jsx(ChevronIcon, { size: 8 }, void 0) }), void 0));
 };
 var Calendar = function (_a) {
     var _b;

package/esm/date-picker/DateInput.js

@@ -3,12 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 import InputMask from 'react-input-mask';
-import { borderColor } from '../helpers/longHandHelpers';
+import { borderColor, borderRadius } from '../helpers/longHandHelpers';
 import { Input } from '../input';
 import { isDayInRange } from './utils';
 import { Box } from '../box';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
+import { useTheme } from '../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 ({
@@ -19,14 +21,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 = {
@@ -43,7 +44,7 @@ var DATE_OVERRIDES = {
 var MONTH_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '2.6rem',
+        maxWidth: '2.7rem',
     },
 ];
 var MONTH_OVERRIDES = {
@@ -60,7 +61,7 @@ var MONTH_OVERRIDES = {
 var YEAR_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '3.6rem',
+        maxWidth: '3.7rem',
     },
 ];
 var YEAR_OVERRIDES = {
@@ -92,12 +93,15 @@ var MONTH_LABELS = [
 var MIN_YEAR = 1900;
 var MAX_YEAR = 2100;
 export var isDateValid = function (value) { return value > 0 && value <= 31; };
+export var DateInput = React.memo(
 // eslint-disable-next-line max-statements
-export var 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 = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _b[0], setDay = _b[1];
-    var _c = __read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _c[0], setYear = _c[1];
-    var _d = __read(React.useState(false), 2), error = _d[0], setError = _d[1];
+    var theme = useTheme().theme;
+    var _c = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _c[0], setDay = _c[1];
+    var _d = __read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _d[0], setYear = _d[1];
+    var _e = __read(React.useState(false), 2), error = _e[0], setError = _e[1];
     var minAllowedDate = 1;
     var maxAllowedDate = getDaysInMonth(date || new Date());
     var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
@@ -206,11 +210,9 @@ export var DateInput = React.memo(function (_a) {
         }
     };
     var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', 'sm', getDefaultSize(theme));
     return (_jsxs(Box, __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 (__assign(__assign(__assign({}, 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',
+            __assign(__assign(__assign(__assign({}, borderColor(error ? theme.spr.supportError : theme.spr.ui03)), 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: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(InputMask, __assign({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
 });

package/esm/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/esm/date-picker/DatePickerContent.js

@@ -3,19 +3,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
-import Calendar from './Calendar';
+import _compact from 'lodash/compact';
+import BaseCalendar from './Calendar';
 import { Box } from '../box';
 import { Stack } from '../stack';
 import { Button } from '../button';
 import { StyledFooter } from './styled-components';
+import { TimezonePicker } from '../time-zone-picker';
+import { FormControl } from '../form-control';
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
 import { isTimeInRange } from './utils';
+import { convertDateFromTargetTzToSystemTz } from '../time-range-picker/utils';
+var MONTH_WIDTH = 284;
+var TIMEZONE_PICKER_OVERRIDES = {
+    Select: {
+        props: {
+            overrides: {
+                Input: {
+                    props: {
+                        'data-testid': 'timezone-selector',
+                    },
+                },
+            },
+        },
+    },
+};
 export 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 ? dateFnsAdapter : _b, props = __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 ? dateFnsAdapter : _b, showTimezone = _a.showTimezone, _timezone = _a.timezone, props = __rest(_a, ["value", "onChange", "overrides", "autoFocusCalendar", "onClose", "adapter", "showTimezone", "timezone"]);
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var _c = __read(React.useState(_value), 2), value = _c[0], setValue = _c[1];
     var _d = __read(React.useState(false), 2), hasError = _d[0], setHasError = _d[1];
+    var _e = __read(React.useState(_timezone), 2), timezone = _e[0], setTimezone = _e[1];
     React.useEffect(function () {
         if (isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
             setHasError(false);
@@ -24,18 +43,50 @@ export var DatePickerContent = function (_a) {
             setHasError(true);
         }
     }, [dateHelpers, props.maxDate, props.minDate, value]);
-    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Footer, StyledFooter), 2), Footer = _e[0], footerProps = _e[1];
+    var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Footer, StyledFooter), 2), Footer = _f[0], footerProps = _f[1];
+    var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Calendar, BaseCalendar), 2), Calendar = _g[0], calendarProps = _g[1];
     var locale = 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: _compact(data.date).map(function (date) { return new Date(convertDateFromTargetTzToSystemTz(date, timezone)); }),
+                    timezone: timezone,
+                });
+            }
+            else {
+                var startMillis = 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 (_jsxs(Box, { children: [_jsx(Calendar, __assign({ trapTabbing: !props.timeSelect }, props, { value: value, onChange: handleChange, 
+        if (value && !Array.isArray(value)) {
+            var startMillis = 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
+                    ? _compact(value).map(function (date) { return new Date(convertDateFromTargetTzToSystemTz(date, timezone)); })
+                    : undefined,
+                timezone: timezone,
+            });
+        }
+    }, [onChange, timezone, value]);
+    return (_jsxs(Box, __assign({ className: function (_a) {
+            var px2rem = _a.px2rem;
+            return ({
+                maxWidth: px2rem((props.monthsShown || 1) * MONTH_WIDTH),
+            });
+        } }, { children: [_jsx(Calendar, __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 ? (_jsx(Footer, __assign({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(Button, __assign({ size: "sm", onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __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 ? (_jsx(Box, __assign({ className: "px-4 mb-4" }, { children: _jsx(FormControl, __assign({ label: locale.datePicker.timezonePickerLabel }, { children: _jsx(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 ? (_jsx(Footer, __assign({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(Button, __assign({ size: "xs", onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "xs", onClick: handleSubmit, "data-testid": "save", disabled: hasError || !value }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0) }), void 0)) : null] }), void 0));
 };

package/esm/date-picker/DatePickerInput.js

@@ -14,11 +14,15 @@ import { getInputStyles } from '../input/styled-components';
 import cx from '../classNames';
 var InputBeforeEnhancer = function (_a) {
     var disabled = _a.disabled, onClick = _a.onClick;
-    return (_jsx(Box, __assign({ className: cx('flex items-center pl-3', { 'cursor-pointer': !disabled }), onClick: disabled ? _noop : onClick }, { children: _jsx(CalendarIcon, { className: "".concat(disabled ? 'spr-icon-03' : 'spr-icon-01'), size: 14 }, void 0) }), void 0));
+    return (_jsx(Box, __assign({ className: cx('flex items-center pl-3', {
+            'cursor-pointer': !disabled,
+        }), onClick: disabled ? _noop : onClick }, { children: _jsx(CalendarIcon, { 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 (_jsx(Box, __assign({ className: cx('flex items-center pr-3', { 'cursor-pointer': !disabled }), onClick: disabled ? _noop : onClick }, { children: _jsx(ChevronDown, { className: chevronStyles, "$isOpen": isOpen }, void 0) }), void 0));
+    return (_jsx(Box, __assign({ className: cx('flex items-center pr-3', {
+            'cursor-pointer': !disabled,
+        }), onClick: disabled ? _noop : onClick }, { children: _jsx(ChevronDown, { className: chevronStyles, "$isOpen": isOpen }, void 0) }), void 0));
 };
 var DEFAULT_INPUT_WIDTH = 62;
 var DatePickerInput = function (_a) {
@@ -69,10 +73,9 @@ var DatePickerInput = function (_a) {
                 style: function (_a, _b) {
                     var theme = _a.theme;
                     var $intent = _b.$intent;
-                    if (isOpen && $intent === 'default') {
-                        return borderColor(theme.spr.focus01);
-                    }
-                    return {};
+                    return (__assign(__assign({}, (isOpen && $intent === 'default' && borderColor(theme.spr.focus01))), (autoSizeInput && {
+                        width: 'auto',
+                    })));
                 },
             },
             ClearIcon: {