@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/date-picker/Calendar.js

@@ -1,24 +1,20 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useMemo, useCallback } from 'react';
-import { Calendar as BaseCalendar } from 'baseui/datepicker';
-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 { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { Calendar as BaseCalendar, DENSITY } from '../baseui/datepicker';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import ChevronLeft from '../icon/components/chevron-left';
+import ChevronRight from '../icon/components/chevron-right';
+import { mergeOverrides } from '../overrides';
 import { Popover } from '../popover';
 import { Menu, MenuItem } from '../menu';
 import { IconButton } from '../button';
-import { themeContext, useTheme } from '../theme';
 import { DateTimeContainer } from './DateTimeContainer';
-import withThemeOverride from '../helpers/baseui/withThemeOverride';
 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 MonthYearSelectMenu = function (props) {
     var _a = __read(useState(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
     var onItemSelect = props.onItemSelect;
@@ -43,6 +39,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,14 +49,12 @@ 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;
     var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? dateFnsAdapter : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
-    var currentTheme = useTheme();
     var isMobileDevice = useIsMobileDevice();
-    var Provider = themeContext.Provider;
     var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var todaySOD = adapter.startOfDay(new Date());
     var value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
@@ -111,119 +106,117 @@ var Calendar = function (_a) {
             });
         }
     }, [adapter, onChange, props.value, setTime, props.timeSelectStart]);
-    var convertedOverrides = useConvertOverrides({
-        MonthYearSelectPopover: {
-            // @ts-ignore
-            component: Popover,
-            props: {
-                showArrow: false,
-            },
-        },
-        NextButton: {
-            component: function (nextButtonProps) { return _jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0); },
-        },
-        PrevButton: {
-            component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
-        },
-        MonthYearSelectStatefulMenu: {
-            // @ts-ignore
-            component: MonthYearSelectMenu,
-        },
-        CalendarContainer: {
-            style: getCalendarContainerStyles,
-            props: {
-                'data-testid': 'calendar-container',
-            },
-        },
-        WeekdayHeader: {
-            style: 'text-12 font-normal leading-8 spr-text-01 w-9 h-9',
-            props: {
-                'data-testid': 'week-day-header',
-            },
-        },
-        MonthHeader: {
-            style: function (_a) {
-                var theme = _a.theme;
-                return ({
-                    borderBottomColor: theme.spr.border02,
-                    borderBottomStyle: 'solid',
-                    borderBottomWidth: theme.borderWidth.default,
-                    color: theme.spr.text01,
-                });
+    var convertedOverrides = useMemo(function () {
+        return mergeOverrides({
+            MonthYearSelectPopover: {
+                // @ts-ignore
+                component: Popover,
+                props: {
+                    showArrow: false,
+                },
             },
-        },
-        Root: {
-            style: function (_a) {
-                var theme = _a.theme;
-                return (__assign({}, theme.typography.bl3));
-            },
-        },
-        TimeSelectContainer: {
-            props: {
-                range: range,
-                adapter: adapter,
-                timeSelectStart: timeSelectStart,
-                timeSelectEnd: timeSelectEnd,
-                value: value,
-                monthsShown: monthsShown,
-                onChange: onChange,
-                overrides: overrides,
-                locale: dateFnsLocale,
-                minDate: props.minDate,
-                maxDate: props.maxDate,
-            },
-            // @ts-ignore
-            component: DateTimeContainer,
-        },
-        Day: {
-            style: getDayStyles(todaySOD),
-        },
-        MonthContainer: {
-            style: 'flex-row',
-        },
-        CalendarHeader: {
-            style: 'py-3',
-        },
-        MonthYearSelectButton: {
-            style: 'typography-bs1',
-        },
-        Week: {
-            style: 'mb-1',
-        },
-    }, overrides, [
-        overrides,
-        todaySOD,
+            NextButton: {
+                component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0)); },
+            },
+            PrevButton: {
+                component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
+            },
+            MonthYearSelectStatefulMenu: {
+                // @ts-ignore
+                component: MonthYearSelectMenu,
+            },
+            CalendarContainer: {
+                style: getCalendarContainerStyles,
+                props: {
+                    'data-testid': 'calendar-container',
+                },
+            },
+            WeekdayHeader: {
+                style: [
+                    'text-12 font-normal leading-8 spr-text-01',
+                    function (_a) {
+                        var theme = _a.theme;
+                        return theme.density === 'COMPACT'
+                            ? {
+                                width: '30px',
+                                height: '30px',
+                            }
+                            : 'w-9 h-9';
+                    },
+                ],
+                props: {
+                    'data-testid': 'week-day-header',
+                },
+            },
+            MonthHeader: {
+                style: [
+                    function (_a) {
+                        var theme = _a.theme;
+                        return ({
+                            borderBottomColor: theme.spr.border02,
+                            borderBottomStyle: 'solid',
+                            borderBottomWidth: theme.borderWidth.default,
+                            color: theme.spr.text01,
+                        });
+                    },
+                    'block text-center',
+                ],
+            },
+            Root: {
+                style: [function (_a) {
+                        var theme = _a.theme;
+                        return (__assign({}, theme.typography.bl3));
+                    }, 'p-0'],
+            },
+            TimeSelectContainer: {
+                props: {
+                    range: range,
+                    adapter: adapter,
+                    timeSelectStart: timeSelectStart,
+                    timeSelectEnd: timeSelectEnd,
+                    value: value,
+                    monthsShown: monthsShown,
+                    onChange: onChange,
+                    overrides: overrides,
+                    locale: dateFnsLocale,
+                    minDate: props.minDate,
+                    maxDate: props.maxDate,
+                },
+                // @ts-ignore
+                component: DateTimeContainer,
+            },
+            Day: {
+                style: getDayStyles(todaySOD),
+            },
+            MonthContainer: {
+                style: 'flex-row',
+            },
+            CalendarHeader: {
+                style: 'flex justify-between py-3 px-4',
+            },
+            MonthYearSelectButton: {
+                style: 'typography-bs1 p-0 h-auto',
+            },
+            Week: {
+                style: 'mb-1',
+            },
+        }, overrides);
+    }, [
+        adapter,
+        dateFnsLocale,
         monthsShown,
+        onChange,
+        overrides,
+        props.maxDate,
+        props.minDate,
         range,
         timeSelectEnd,
         timeSelectStart,
-        dateFnsLocale,
+        todaySOD,
         value,
-        adapter,
-        formatString,
-        props.minDate,
-        props.maxDate,
     ]);
-    var calendarTheme = useMemo(function () { return _merge({}, currentTheme, CALENDAR_CUSTOM_THEME); }, [currentTheme]);
-    return (_jsx(Provider, __assign({ value: calendarTheme }, { children: _jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
-            //@ts-ignore baseweb has type inconsistency in declaration file
-            density: DENSITY.high }), void 0) }), void 0));
+    return (_jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
+        //@ts-ignore baseweb has type inconsistency in declaration file
+        density: DENSITY.high }), void 0));
 };
-export default withThemeOverride(Calendar, function (theme) { return ({
-    colors: {
-        calendarHeaderBackground: theme.spr.ui01,
-        calendarHeaderForeground: theme.spr.text01,
-        accent: theme.spr.ui04,
-        mono400: theme.spr.border02,
-        mono300: theme.spr.ui05,
-        calendarDayBackgroundSelectedHighlighted: theme.spr.ui04,
-        calendarDayForegroundSelected: theme.spr.text05,
-        calendarBackground: theme.spr.ui01,
-    },
-    sizing: {
-        scale1000: '36px',
-        scale800: '20px',
-        scale300: '8px',
-        scale200: '6px',
-    },
-}); });
+export default Calendar;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 export declare const isDateValid: (value: any) => boolean;
 declare type DateInputProps = {
     locale?: any;
@@ -10,5 +10,5 @@ declare type DateInputProps = {
     maxDate?: Date;
     disabled?: boolean;
 };
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled }: DateInputProps) => JSX.Element>;
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, locale }: DateInputProps) => JSX.Element>;
 export {};

package/esm/date-picker/DateInput.js

@@ -1,32 +1,27 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import _times from 'lodash/times';
 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 { AutosizeInput } from '../baseui/select';
 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 text-center tabular-nums',
     function (_a) {
-        var theme = _a.theme, px2rem = _a.px2rem;
-        return ({
-            '::selection': {
-                backgroundColor: 'transparent',
-            },
-            ':focus': {
-                caretColor: theme.spr.ui01,
-            },
-            fontVariantNumeric: 'tabular-nums',
-            lineHeight: px2rem(16),
-        });
+        var theme = _a.theme;
+        return (theme.density === 'COMPACT' ? 'body-16' : '');
     },
 ];
 var DATE_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '1.8rem',
+        maxWidth: '1.9rem',
     },
 ];
 var DATE_OVERRIDES = {
@@ -40,27 +35,31 @@ var DATE_OVERRIDES = {
         },
     },
 };
-var MONTH_CLASSNAME = [
-    'text-center flex-none',
-    {
-        maxWidth: '2.6rem',
-    },
-];
 var MONTH_OVERRIDES = {
-    InputContainer: {
-        style: 'border-0',
-    },
     Input: {
-        style: COMMON_STYLE,
+        component: function (_a) {
+            var $width = _a.$width, props = __rest(_a, ["$width"]);
+            return (_jsx(Input, __assign({}, props, { className: [{ width: $width }, 'text-center flex-none', props.className] }), void 0));
+        },
         props: {
-            'data-testid': 'month-spin-input',
+            overrides: {
+                InputContainer: {
+                    style: 'border-0',
+                },
+                Input: {
+                    style: COMMON_STYLE,
+                    props: {
+                        'data-testid': 'month-spin-input',
+                    },
+                },
+            },
         },
     },
 };
 var YEAR_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '3.6rem',
+        maxWidth: '3.7rem',
     },
 ];
 var YEAR_OVERRIDES = {
@@ -74,30 +73,19 @@ var YEAR_OVERRIDES = {
         },
     },
 };
-var MONTH_LABELS = [
-    //TODO: Should we use localization here
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-];
 var MIN_YEAR = 1900;
 var MAX_YEAR = 2100;
 export var isDateValid = function (value) { return value > 0 && value <= 31; };
-// eslint-disable-next-line max-statements
-export var DateInput = React.memo(function (_a) {
-    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];
+export var DateInput = React.memo(
+// eslint-disable-next-line max-statements -- works for functional component
+function (_a) {
+    var _b;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, locale = _a.locale;
+    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 monthLabels = React.useMemo(function () { return _times(12, Number).map(function (month) { return dateHelpers.getMonthInLocale(month, locale); }); }, [dateHelpers, locale]);
     var minAllowedDate = 1;
     var maxAllowedDate = getDaysInMonth(date || new Date());
     var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
@@ -148,7 +136,7 @@ export var DateInput = React.memo(function (_a) {
     var changeMonth = function (sign) {
         var currentMonthIndex = dateHelpers.getMonth(date || new Date());
         var nextMonth = currentMonthIndex + sign;
-        var newDate = dateHelpers.setMonth(date || new Date(), (nextMonth + MONTH_LABELS.length) % MONTH_LABELS.length);
+        var newDate = dateHelpers.setMonth(date || new Date(), (nextMonth + monthLabels.length) % monthLabels.length);
         onChange(newDate);
     };
     var monthKeyDown = function (event) {
@@ -160,9 +148,9 @@ export var DateInput = React.memo(function (_a) {
         else {
             var monthLabel_1 = event.key.toLowerCase();
             var currentMonthIndex_1 = dateHelpers.getMonth(date || new Date());
-            var monthIndex = MONTH_LABELS.findIndex(function (month, index) { return index > currentMonthIndex_1 && monthLabel_1 === month[0].toLowerCase(); });
+            var monthIndex = monthLabels.findIndex(function (month, index) { return index > currentMonthIndex_1 && monthLabel_1 === month[0].toLowerCase(); });
             if (monthIndex === -1) {
-                monthIndex = MONTH_LABELS.findIndex(function (month) { return monthLabel_1 === month[0].toLowerCase(); });
+                monthIndex = monthLabels.findIndex(function (month) { return monthLabel_1 === month[0].toLowerCase(); });
             }
             if (monthIndex === -1 || monthIndex === currentMonthIndex_1) {
                 return;
@@ -205,12 +193,10 @@ export var DateInput = React.memo(function (_a) {
             updateYear(nextYear);
         }
     };
-    var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
+    var month = date ? dateHelpers.formatDate(date, 'MMM', locale) : '';
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', undefined, 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 })));
-            },
-        ] }, { 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));
+            '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(AutosizeInput, { value: month, onKeyDown: monthKeyDown, disabled: disabled, "$searchable": true, placeholder: "MM", size: "sm", overrides: MONTH_OVERRIDES }, 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

@@ -1,41 +1,73 @@
 import { __assign, __read, __rest } from "tslib";
 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 DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+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 as BaseTimezonePicker } 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;
 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];
-    React.useEffect(function () {
-        if (isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
-            setHasError(false);
-        }
-        else {
-            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 _d = __read(React.useState(function () { return !isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers }); }), 2), hasError = _d[0], setHasError = _d[1];
+    var _e = __read(React.useState(_timezone), 2), timezone = _e[0], setTimezone = _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 _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TimezonePicker, BaseTimezonePicker), 2), TimezonePicker = _h[0], timezonePickerProps = _h[1];
     var locale = useLocale();
     var handleChange = React.useCallback(function (data) {
         setValue(data.date);
+        setHasError(!isTimeInRange(data.date, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers }));
         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, props.minDate, props.maxDate, dateHelpers]);
     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, __assign({ clearable: false, placeholder: locale.datePicker.timezonePickerPlaceholder, value: timezone, size: "sm", onChange: function (_a) {
+                            var id = _a.id;
+                            return setTimezone(id);
+                        } }, timezonePickerProps), 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({ onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ 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: {

package/esm/date-picker/DateTimeContainer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { CalendarProps as BaseCalendarProps } from 'baseui/datepicker';
-import { DateIOAdapter } from 'baseui/datepicker/utils/types';
+import { CalendarProps as BaseCalendarProps } from '../baseui/datepicker';
+import { DateIOAdapter } from '../baseui/datepicker/utils/types';
 import { DatepickerOverrides } from './types';
 declare type Props = {
     range?: boolean;