@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/date-picker/Calendar.js

@@ -3,25 +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 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 useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+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', sizeSm: { borderRadius: '4px' } } } };
 var MonthYearSelectMenu = function (props) {
     var _a = (0, tslib_1.__read)((0, react_1.useState)(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
     var onItemSelect = props.onItemSelect;
@@ -60,10 +55,8 @@ var ArrowButton = function (_a) {
 };
 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;
@@ -115,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,27 +4,21 @@ 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 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',
-        });
+        var theme = _a.theme;
+        return (theme.density === 'COMPACT' ? 'body-16' : '');
     },
 ];
 var DATE_CLASSNAME = [
@@ -44,20 +38,24 @@ var DATE_OVERRIDES = {
         },
     },
 };
-var MONTH_CLASSNAME = [
-    'text-center flex-none',
-    {
-        maxWidth: '2.7rem',
-    },
-];
 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',
+                    },
+                },
+            },
         },
     },
 };
@@ -78,34 +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;
 exports.DateInput = React.memo(
-// eslint-disable-next-line max-statements
+// 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;
+    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;
@@ -156,7 +140,7 @@ 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) {
@@ -168,9 +152,9 @@ 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;
@@ -213,10 +197,10 @@ function (_a) {
             updateYear(nextYear);
         }
     };
-    var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
-    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', 'sm', (0, themeHelpers_1.getDefaultSize)(theme));
+    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 border-box',
             (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(error ? theme.spr.supportError : theme.spr.ui03)), (0, longHandHelpers_1.borderRadius)((_b = inputSizeTheme.borderRadius) !== null && _b !== void 0 ? _b : theme.input.borderRadius)), { paddingLeft: inputSizeTheme.paddingX, paddingRight: inputSizeTheme.paddingX, paddingTop: inputSizeTheme.paddingY, paddingBottom: inputSizeTheme.paddingY }), (disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 })),
-        ] }, { children: [(0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm", disabled: disabled }), void 0)); } }), void 0), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
+        ] }, { 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.js

@@ -4,8 +4,8 @@ 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");
@@ -19,38 +19,19 @@ var locale_1 = require("../locale");
 var utils_1 = require("./utils");
 var utils_2 = require("../time-range-picker/utils");
 var MONTH_WIDTH = 284;
-var TIMEZONE_PICKER_OVERRIDES = {
-    Select: {
-        props: {
-            overrides: {
-                Input: {
-                    props: {
-                        'data-testid': 'timezone-selector',
-                    },
-                },
-            },
-        },
-    },
-};
 var DatePickerContent = function (_a) {
     var _value = _a.value, onChange = _a.onChange, overrides = _a.overrides, autoFocusCalendar = _a.autoFocusCalendar, onClose = _a.onClose, _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, showTimezone = _a.showTimezone, _timezone = _a.timezone, props = (0, tslib_1.__rest)(_a, ["value", "onChange", "overrides", "autoFocusCalendar", "onClose", "adapter", "showTimezone", "timezone"]);
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var _c = (0, tslib_1.__read)(React.useState(_value), 2), value = _c[0], setValue = _c[1];
-    var _d = (0, tslib_1.__read)(React.useState(false), 2), hasError = _d[0], setHasError = _d[1];
+    var _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];
-    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 _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) {
             if (Array.isArray(data.date)) {
                 onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -66,7 +47,7 @@ var DatePickerContent = function (_a) {
                 });
             }
         }
-    }, [onChange, props.timeSelect, timezone]);
+    }, [onChange, props.timeSelect, timezone, props.minDate, props.maxDate, dateHelpers]);
     var handleSubmit = React.useCallback(function () {
         if (value && !Array.isArray(value)) {
             var startMillis = (0, utils_2.convertDateFromTargetTzToSystemTz)(value, timezone);
@@ -88,9 +69,9 @@ var DatePickerContent = function (_a) {
             });
         } }, { 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 }, calendarProps), void 0), showTimezone ? ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "px-4 mb-4" }, { children: (0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ label: locale.datePicker.timezonePickerLabel }, { children: (0, jsx_runtime_1.jsx)(time_zone_picker_1.TimezonePicker, { clearable: false, placeholder: locale.datePicker.timezonePickerPlaceholder, value: timezone, size: "sm", onChange: function (_a) {
+                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);
-                        }, overrides: TIMEZONE_PICKER_OVERRIDES }, void 0) }), void 0) }), void 0)) : null, props.timeSelect ? ((0, jsx_runtime_1.jsx)(Footer, (0, tslib_1.__assign)({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { children: (0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "xs", onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "xs", onClick: handleSubmit, "data-testid": "save", disabled: hasError || !value }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0) }), void 0)) : null] }), void 0));
+                        } }, 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/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;

package/date-picker/DateTimeContainer.js

@@ -4,8 +4,8 @@ exports.DateTimeContainer = 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_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 date_helpers_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-helpers"));
 var stack_1 = require("../stack");
 var DateInput_1 = require("./DateInput");
 var TimeInput_1 = require("./TimeInput");
@@ -17,13 +17,19 @@ var DateAndTimeSelect = function (_a) {
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TimePickerFormControl, form_control_1.FormControl), 2), TimePickerFormControl = _b[0], timePickerFormControlProps = _b[1];
     var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DateInputFormControl, form_control_1.FormControl), 2), DateInputFormControl = _c[0], dateInputFormControlProps = _c[1];
-    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, className: "items-center" }, { children: [(0, jsx_runtime_1.jsx)(stack_1.StackItem, (0, tslib_1.__assign)({ className: ['flex-1', function (_a) {
-                        var px2rem = _a.px2rem;
-                        return ({ width: px2rem(120) });
-                    }] }, { children: (0, jsx_runtime_1.jsx)(DateInputFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: (0, jsx_runtime_1.jsx)(DateInput_1.DateInput, { disabled: disabled, dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, (0, tslib_1.__assign)({ className: ['flex-1', function (_a) {
-                        var px2rem = _a.px2rem;
-                        return ({ width: px2rem(120) });
-                    }] }, { children: (0, jsx_runtime_1.jsx)(TimePickerFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { disabled: disabled, time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate, adapter: adapter }, void 0) }), void 0) }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, className: "items-center" }, { children: [(0, jsx_runtime_1.jsx)(stack_1.StackItem, (0, tslib_1.__assign)({ className: [
+                    'flex-1',
+                    function (_a) {
+                        var px2rem = _a.px2rem, theme = _a.theme;
+                        return theme.density === 'COMPACT' ? { width: px2rem(100) } : { width: px2rem(120) };
+                    },
+                ] }, { children: (0, jsx_runtime_1.jsx)(DateInputFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: (0, jsx_runtime_1.jsx)(DateInput_1.DateInput, { disabled: disabled, dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, (0, tslib_1.__assign)({ className: [
+                    'flex-1',
+                    function (_a) {
+                        var px2rem = _a.px2rem, theme = _a.theme;
+                        return theme.density === 'COMPACT' ? { width: px2rem(100) } : { width: px2rem(120) };
+                    },
+                ] }, { children: (0, jsx_runtime_1.jsx)(TimePickerFormControl, (0, tslib_1.__assign)({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { disabled: disabled, time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate, adapter: adapter }, void 0) }), void 0) }), void 0)] }), void 0));
 };
 exports.DateTimeContainer = React.memo(function (_a) {
     var range = _a.range, _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, timeSelectStart = _a.timeSelectStart, timeSelectEnd = _a.timeSelectEnd, value = _a.value, monthsShown = _a.monthsShown, onChange = _a.onChange, overrides = _a.overrides, dateFnsLocale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, disabled = _a.disabled;
@@ -120,5 +126,5 @@ exports.DateTimeContainer = React.memo(function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange({ date: date });
         }
     }, [dateHelpers, onChange, range, adapter, value]);
-    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: startDate, onTimeChange: function (date) { return handleTimeChange(date, 0); }, onDateChange: function (date) { return handleDateInputChange(date, 0); }, dateInputLabel: locale.calendar.dateInputStartLabel, timePickerLabel: locale.calendar.timePickerStartLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0)), range && timeSelectEnd && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: endDate, onTimeChange: function (date) { return handleTimeChange(date, 1); }, onDateChange: function (date) { return handleDateInputChange(date, 1); }, dateInputLabel: locale.calendar.dateInputEndLabel, timePickerLabel: locale.calendar.timePickerEndLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: startDate, onTimeChange: function (date) { return handleTimeChange(date, 0); }, onDateChange: function (date) { return handleDateInputChange(date, 0); }, dateInputLabel: locale.calendar.dateInputStartLabel, timePickerLabel: locale.calendar.timePickerStartLabel, adapter: adapter, locale: dateFnsLocale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0)), range && timeSelectEnd && ((0, jsx_runtime_1.jsx)(DateTimeSelectContainer, (0, tslib_1.__assign)({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(DateAndTimeSelect, { time: endDate, onTimeChange: function (date) { return handleTimeChange(date, 1); }, onDateChange: function (date) { return handleDateInputChange(date, 1); }, dateInputLabel: locale.calendar.dateInputEndLabel, timePickerLabel: locale.calendar.timePickerEndLabel, adapter: adapter, locale: dateFnsLocale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0))] }), void 0));
 });

package/date-picker/StatelessDatePicker.js

@@ -6,9 +6,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 var compact_1 = (0, tslib_1.__importDefault)(require("lodash/compact"));
-var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
-var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
-var popover_1 = require("baseui/popover");
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-helpers"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
+var popover_1 = require("../baseui/popover");
 var popover_2 = require("../popover");
 var styled_components_1 = require("./styled-components");
 var typography_1 = require("../typography");
@@ -23,19 +23,7 @@ var DatePickerContent_1 = require("./DatePickerContent");
 var utils_2 = require("../time-range-picker/utils");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
-var accessibilityStyles = {
-    position: 'fixed',
-    width: '0px',
-    height: '0px',
-    borderLeftWidth: 0,
-    borderRightWidth: 0,
-    borderTopWidth: 0,
-    borderBottomWidth: 0,
-    padding: 0,
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    clipPath: 'inset(100%)',
-};
+var commonStyles_1 = require("../helpers/commonStyles");
 // eslint-disable-next-line max-statements
 var StatelessDatePicker = function (_props) {
     var _a, _b;
@@ -156,6 +144,6 @@ var StatelessDatePicker = function (_props) {
     var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, (0, tslib_1.__assign)({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : onFocus, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, (0, tslib_1.__assign)({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone }), void 0) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, (0, tslib_1.__assign)({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, (0, tslib_1.__assign)({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
-                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps), void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ id: ariaDescribedBy, style: accessibilityStyles }, { children: locale.timeRangePicker.screenReaderMessageInput }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ "aria-live": "assertive", style: accessibilityStyles }, { children: dateAriaLabel }), void 0)] }, void 0));
+                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps), void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ id: ariaDescribedBy, style: commonStyles_1.accessibilityStyles }, { children: locale.timeRangePicker.screenReaderMessageInput }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ "aria-live": "assertive", style: commonStyles_1.accessibilityStyles }, { children: dateAriaLabel }), void 0)] }, void 0));
 };
 exports.StatelessDatePicker = StatelessDatePicker;

package/date-picker/TimeInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
-import { DateIOAdapter } from 'baseui/datepicker/utils/types';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import { DateIOAdapter } from '../baseui/datepicker/utils/types';
 declare type TimeInputProps = {
     time?: Date | null;
     overrides?: any;