@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/date-picker/Calendar.js

@@ -3,24 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var datepicker_1 = require("baseui/datepicker");
-var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
-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 useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var datepicker_1 = require("../baseui/datepicker");
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-helpers"));
+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 overrides_1 = require("../overrides");
 var popover_1 = require("../popover");
 var menu_1 = require("../menu");
 var button_1 = require("../button");
-var theme_1 = require("../theme");
 var DateTimeContainer_1 = require("./DateTimeContainer");
-var withThemeOverride_1 = (0, tslib_1.__importDefault)(require("../helpers/baseui/withThemeOverride"));
 var styled_components_1 = require("./styled-components");
-var constants_2 = require("./constants");
+var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 var useIsMobileDevice_1 = require("../hooks/useIsMobileDevice");
-var CALENDAR_CUSTOM_THEME = { theme: { input: { 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 +41,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,14 +51,12 @@ 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;
-    var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? date_fns_adapter_1.default : _c, _d = _a.formatString, formatString = _d === void 0 ? constants_2.DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, props = (0, tslib_1.__rest)(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
-    var currentTheme = (0, theme_1.useTheme)();
+    var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? date_fns_adapter_1.default : _c, _d = _a.formatString, formatString = _d === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, props = (0, tslib_1.__rest)(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
     var isMobileDevice = (0, useIsMobileDevice_1.useIsMobileDevice)();
-    var Provider = theme_1.themeContext.Provider;
     var dateHelpers = (0, react_1.useMemo)(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var todaySOD = adapter.startOfDay(new Date());
     var value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
@@ -113,119 +108,117 @@ var Calendar = function (_a) {
             });
         }
     }, [adapter, onChange, props.value, setTime, props.timeSelectStart]);
-    var convertedOverrides = (0, useConvertOverrides_1.useConvertOverrides)({
-        MonthYearSelectPopover: {
-            // @ts-ignore
-            component: popover_1.Popover,
-            props: {
-                showArrow: false,
-            },
-        },
-        NextButton: {
-            component: function (nextButtonProps) { return (0, jsx_runtime_1.jsx)(ArrowButton, (0, tslib_1.__assign)({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0); },
-        },
-        PrevButton: {
-            component: function (nextButtonProps) { return ((0, jsx_runtime_1.jsx)(ArrowButton, (0, tslib_1.__assign)({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
-        },
-        MonthYearSelectStatefulMenu: {
-            // @ts-ignore
-            component: MonthYearSelectMenu,
-        },
-        CalendarContainer: {
-            style: styled_components_1.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 = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            MonthYearSelectPopover: {
+                // @ts-ignore
+                component: popover_1.Popover,
+                props: {
+                    showArrow: false,
+                },
             },
-        },
-        Root: {
-            style: function (_a) {
-                var theme = _a.theme;
-                return ((0, tslib_1.__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_1.DateTimeContainer,
-        },
-        Day: {
-            style: (0, styled_components_1.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 ((0, jsx_runtime_1.jsx)(ArrowButton, (0, tslib_1.__assign)({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0)); },
+            },
+            PrevButton: {
+                component: function (nextButtonProps) { return ((0, jsx_runtime_1.jsx)(ArrowButton, (0, tslib_1.__assign)({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
+            },
+            MonthYearSelectStatefulMenu: {
+                // @ts-ignore
+                component: MonthYearSelectMenu,
+            },
+            CalendarContainer: {
+                style: styled_components_1.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 ((0, tslib_1.__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_1.DateTimeContainer,
+            },
+            Day: {
+                style: (0, styled_components_1.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 = (0, react_1.useMemo)(function () { return (0, merge_1.default)({}, currentTheme, CALENDAR_CUSTOM_THEME); }, [currentTheme]);
-    return ((0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: calendarTheme }, { children: (0, jsx_runtime_1.jsx)(datepicker_1.Calendar, (0, tslib_1.__assign)({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
-            //@ts-ignore baseweb has type inconsistency in declaration file
-            density: constants_1.DENSITY.high }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(datepicker_1.Calendar, (0, tslib_1.__assign)({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
+        //@ts-ignore baseweb has type inconsistency in declaration file
+        density: datepicker_1.DENSITY.high }), void 0));
 };
-exports.default = (0, withThemeOverride_1.default)(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',
-    },
-}); });
+exports.default = Calendar;

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

@@ -4,32 +4,27 @@ exports.DateInput = exports.isDateValid = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
+var times_1 = (0, tslib_1.__importDefault)(require("lodash/times"));
 var getDaysInMonth_1 = (0, tslib_1.__importDefault)(require("date-fns/getDaysInMonth"));
 var react_input_mask_1 = (0, tslib_1.__importDefault)(require("react-input-mask"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var input_1 = require("../input");
+var select_1 = require("../baseui/select");
 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 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 = {
@@ -43,27 +38,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 = (0, tslib_1.__rest)(_a, ["$width"]);
+            return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__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 = {
@@ -77,31 +76,20 @@ 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;
 var isDateValid = function (value) { return value > 0 && value <= 31; };
 exports.isDateValid = isDateValid;
-// eslint-disable-next-line max-statements
-exports.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 = (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];
+exports.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 = (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 monthLabels = React.useMemo(function () { return (0, times_1.default)(12, Number).map(function (month) { return dateHelpers.getMonthInLocale(month, locale); }); }, [dateHelpers, locale]);
     var minAllowedDate = 1;
     var maxAllowedDate = (0, getDaysInMonth_1.default)(date || new Date());
     var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
@@ -152,7 +140,7 @@ exports.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) {
@@ -164,9 +152,9 @@ exports.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;
@@ -209,12 +197,10 @@ exports.DateInput = React.memo(function (_a) {
             updateYear(nextYear);
         }
     };
-    var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
+    var month = date ? dateHelpers.formatDate(date, 'MMM', locale) : '';
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', undefined, (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 })));
-            },
-        ] }, { 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));
+            '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)(select_1.AutosizeInput, { value: month, onKeyDown: monthKeyDown, disabled: disabled, "$searchable": true, placeholder: "MM", size: "sm", overrides: MONTH_OVERRIDES }, 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

@@ -4,42 +4,74 @@ exports.DatePickerContent = void 0;
 var tslib_1 = require("tslib");
 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 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 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];
-    React.useEffect(function () {
-        if ((0, utils_1.isTimeInRange)(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
-            setHasError(false);
-        }
-        else {
-            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 _d = (0, tslib_1.__read)(React.useState(function () { return !(0, utils_1.isTimeInRange)(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers }); }), 2), hasError = _d[0], setHasError = _d[1];
+    var _e = (0, tslib_1.__read)(React.useState(_timezone), 2), timezone = _e[0], setTimezone = _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 _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TimezonePicker, time_zone_picker_1.TimezonePicker), 2), TimezonePicker = _h[0], timezonePickerProps = _h[1];
     var locale = (0, locale_1.useLocale)();
     var handleChange = React.useCallback(function (data) {
         setValue(data.date);
+        setHasError(!(0, utils_1.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: (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, props.minDate, props.maxDate, dateHelpers]);
     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)(TimezonePicker, (0, tslib_1.__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 ? ((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)({ 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)({ 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/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;