@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/date-picker/DatePickerContent.js

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

package/esm/date-picker/DatePickerInput.js

@@ -10,15 +10,19 @@ import ChevronDown from '../icon/components/chevron-down';
 import CalendarIcon from '../icon/components/calendar-solid';
 import ClearIconButton from '../helpers/ClearIconButton';
 import { mergeOverrides } from '../overrides';
-import { getComponentSizeTheme } from '../helpers/themeHelpers';
+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: {
@@ -84,15 +87,9 @@ var DatePickerInput = function (_a) {
         }, overrides);
     }, [overrides, onFocus, isOpen, inputWidth, disabled, autoSizeInput]);
     return (_jsxs(_Fragment, { children: [_jsx(Input, __assign({}, props, { value: value, onFocus: onFocus, disabled: disabled, overrides: INPUT_OVERRIDES }), void 0), _jsx(Box, __assign({ ref: ref, className: [
-                    function (_a) {
-                        var theme = _a.theme;
-                        var inputSizeTheme = getComponentSizeTheme(theme, 'input', props.size, 'lg');
-                        return {
-                            lineHeight: inputSizeTheme.lineHeight,
-                            paddingLeft: inputSizeTheme.paddingX,
-                            paddingRight: inputSizeTheme.paddingX,
-                            fontSize: inputSizeTheme.fontSize,
-                        };
+                    function (utils) {
+                        var inputStyles = getInputStyles(utils, { $size: props.size, $disabled: disabled });
+                        return inputStyles;
                     },
                     {
                         position: 'absolute',

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { CalendarProps as BaseCalendarProps } from 'baseui/datepicker';
+import { DateIOAdapter } from 'baseui/datepicker/utils/types';
 import { DatepickerOverrides } from './types';
 declare type Props = {
     range?: boolean;
-    adapter?: any;
+    adapter?: DateIOAdapter<Date>;
     timeSelectStart?: boolean;
     timeSelectEnd?: boolean;
     value?: Date | Date[] | null;
@@ -13,6 +14,7 @@ declare type Props = {
     locale?: any;
     minDate?: Date;
     maxDate?: Date;
+    disabled?: boolean;
 };
-export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, }: Props) => JSX.Element>;
+export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, disabled, }: Props) => JSX.Element>;
 export {};

package/esm/date-picker/DateTimeContainer.js

@@ -10,20 +10,20 @@ import { FormControl } from '../form-control';
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
 var DateAndTimeSelect = function (_a) {
-    var time = _a.time, onTimeChange = _a.onTimeChange, onDateChange = _a.onDateChange, dateInputLabel = _a.dateInputLabel, timePickerLabel = _a.timePickerLabel, overrides = _a.overrides, locale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, adapter = _a.adapter;
+    var time = _a.time, onTimeChange = _a.onTimeChange, onDateChange = _a.onDateChange, dateInputLabel = _a.dateInputLabel, timePickerLabel = _a.timePickerLabel, overrides = _a.overrides, locale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, adapter = _a.adapter, disabled = _a.disabled;
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TimePickerFormControl, FormControl), 2), TimePickerFormControl = _b[0], timePickerFormControlProps = _b[1];
     var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DateInputFormControl, FormControl), 2), DateInputFormControl = _c[0], dateInputFormControlProps = _c[1];
     return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, className: "items-center" }, { children: [_jsx(StackItem, __assign({ className: ['flex-1', function (_a) {
                         var px2rem = _a.px2rem;
                         return ({ width: px2rem(120) });
-                    }] }, { children: _jsx(DateInputFormControl, __assign({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: _jsx(DateInput, { dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), _jsx(StackItem, __assign({ className: ['flex-1', function (_a) {
+                    }] }, { children: _jsx(DateInputFormControl, __assign({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: _jsx(DateInput, { disabled: disabled, dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), _jsx(StackItem, __assign({ className: ['flex-1', function (_a) {
                         var px2rem = _a.px2rem;
                         return ({ width: px2rem(120) });
-                    }] }, { children: _jsx(TimePickerFormControl, __assign({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: _jsx(TimeInput, { time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate }, void 0) }), void 0) }), void 0)] }), void 0));
+                    }] }, { children: _jsx(TimePickerFormControl, __assign({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: _jsx(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));
 };
 export var DateTimeContainer = React.memo(function (_a) {
-    var range = _a.range, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _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;
+    var range = _a.range, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _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;
     var _c = __read([].concat(value), 2), startDate = _c[0], endDate = _c[1];
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var locale = useLocale();
@@ -117,5 +117,5 @@ export var DateTimeContainer = React.memo(function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange({ date: date });
         }
     }, [dateHelpers, onChange, range, adapter, value]);
-    return (_jsxs(Stack, __assign({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: _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 }, void 0) }), void 0)), range && timeSelectEnd && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: _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 }, void 0) }), void 0))] }), void 0));
+    return (_jsxs(Stack, __assign({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: _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 && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: _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));
 });

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

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { StatelessDatePickerProps } from './types';
-export declare const StatelessDatePicker: ({ onChange, onBlur, adapter, size, formatString, isOpen, onFocus, clearable, displayValueAtRangeIndex, variant, overrides, intent, value, formatDisplayValue, autoSizeInput, weekStartsOn, ...props }: StatelessDatePickerProps) => ReactElement;
+export declare const StatelessDatePicker: (_props: StatelessDatePickerProps) => ReactElement;

package/esm/date-picker/StatelessDatePicker.js

@@ -2,6 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import _noop from 'lodash/noop';
+import _compact from 'lodash/compact';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import { PLACEMENT } from 'baseui/popover';
@@ -11,10 +12,14 @@ import { Typography } from '../typography';
 import DatePickerInput from './DatePickerInput';
 import { useLocale } from '../locale';
 import useUniqueId from '../hooks/useUniqueId';
+import { useContextualFormProps } from '../form-control/context';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { DEFAULT_FORMAT_STRING } from './constants';
 import { formatDate, getAriaLabel, isTimeInRange, normalizeDashes, prepareLocale } from './utils';
 import { DatePickerContent } from './DatePickerContent';
+import { convertDateFromSystemTzToTargetTz, getSystemTzName } from '../time-range-picker/utils';
+import { getDefaultSize } from '../helpers/themeHelpers';
+import { useStyle } from '../style';
 var accessibilityStyles = {
     position: 'fixed',
     width: '0px',
@@ -29,16 +34,26 @@ var accessibilityStyles = {
     clipPath: 'inset(100%)',
 };
 // eslint-disable-next-line max-statements
-export var StatelessDatePicker = function (_a) {
-    var _b, _c;
-    var onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.adapter, adapter = _d === void 0 ? dateFnsAdapter : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f, _g = _a.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _a.onFocus, clearable = _a.clearable, displayValueAtRangeIndex = _a.displayValueAtRangeIndex, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, overrides = _a.overrides, intent = _a.intent, value = _a.value, formatDisplayValue = _a.formatDisplayValue, _j = _a.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
+export var StatelessDatePicker = function (_props) {
+    var _a, _b;
+    var theme = useStyle().theme;
+    var _c = useContextualFormProps(_props), onChange = _c.onChange, onBlur = _c.onBlur, _d = _c.adapter, adapter = _d === void 0 ? dateFnsAdapter : _d, _e = _c.size, size = _e === void 0 ? getDefaultSize(theme) : _e, _f = _c.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f, _g = _c.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _c.onFocus, clearable = _c.clearable, displayValueAtRangeIndex = _c.displayValueAtRangeIndex, _h = _c.variant, variant = _h === void 0 ? 'default' : _h, overrides = _c.overrides, intent = _c.intent, _value = _c.value, formatDisplayValue = _c.formatDisplayValue, _j = _c.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _c.weekStartsOn, _k = _c.timezone, timezone = _k === void 0 ? getSystemTzName() : _k, _l = _c.showTimezone, showTimezone = _l === void 0 ? false : _l, props = __rest(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone"]);
     var locale = useLocale();
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
+    var value = React.useMemo(function () {
+        if (Array.isArray(_value)) {
+            return _compact(_value).map(function (date) { return new Date(convertDateFromSystemTzToTargetTz(date, timezone)); });
+        }
+        if (_value) {
+            return new Date(convertDateFromSystemTzToTargetTz(_value, timezone));
+        }
+        return undefined;
+    }, [_value, timezone]);
     // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
     // and we will set this to false when calendar will be closed.
-    var _k = __read(React.useState(false), 2), autoFocusCalendar = _k[0], setAutoFocusCalendar = _k[1];
-    var _l = __read(React.useState(false), 2), error = _l[0], setError = _l[1];
+    var _m = __read(React.useState(false), 2), autoFocusCalendar = _m[0], setAutoFocusCalendar = _m[1];
+    var _o = __read(React.useState(false), 2), error = _o[0], setError = _o[1];
     React.useEffect(function () {
         if (isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
             setError(false);
@@ -48,7 +63,7 @@ export var StatelessDatePicker = function (_a) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers]);
     var screenReaderMsgId = useUniqueId();
-    var _m = props["aria-describedby"], ariaDescribedBy = _m === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _m;
+    var _p = props["aria-describedby"], ariaDescribedBy = _p === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _p;
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = normalizeDashes(formatString);
         if (formatDisplayValue) {
@@ -57,8 +72,15 @@ export var StatelessDatePicker = function (_a) {
             }
             return formatDisplayValue(date, normalizedFormatString);
         }
-        return formatDate({ date: date, dateHelpers: dateHelpers, formatString: normalizedFormatString, locale: dateFnsLocale });
-    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale]);
+        return formatDate({
+            date: date,
+            dateHelpers: dateHelpers,
+            formatString: normalizedFormatString,
+            locale: dateFnsLocale,
+            timezone: timezone,
+            showTimezone: showTimezone,
+        });
+    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale, timezone, showTimezone]);
     var mergedOverrides = React.useMemo(function () {
         return mergeOverrides({
             Popover: {
@@ -90,11 +112,11 @@ export var StatelessDatePicker = function (_a) {
                 style: 'rounded-8',
             },
         }, overrides);
-    }, [overrides]);
+    }, [locale.datePicker.popoverAriaLabel, overrides]);
     var displayValue = React.useMemo(function () { return defaultFormatDisplayValue(value) || ''; }, [value, defaultFormatDisplayValue]);
     var handleDateChange = React.useCallback(function (data) {
-        onChange === null || onChange === void 0 ? void 0 : onChange({ value: data.date });
-    }, [onChange]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(showTimezone ? { value: data.date, timezone: data.timezone } : { value: data.date });
+    }, [onChange, showTimezone]);
     var onClose = React.useCallback(function () {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         setAutoFocusCalendar(false);
@@ -121,17 +143,15 @@ export var StatelessDatePicker = function (_a) {
     var handleInputChange = React.useCallback(function (e) {
         var inputValue = e.currentTarget.value;
         if (clearable && inputValue.length === 0) {
-            onChange === null || onChange === void 0 ? void 0 : onChange({
-                value: undefined,
-            });
+            onChange === null || onChange === void 0 ? void 0 : onChange(showTimezone ? { value: undefined, timezone: timezone } : { value: undefined });
         }
-    }, [clearable, onChange]);
+    }, [clearable, onChange, timezone, showTimezone]);
     var dateAriaLabel = React.useMemo(function () { return getAriaLabel(value, defaultFormatDisplayValue, locale); }, [value, defaultFormatDisplayValue, locale]);
-    var _o = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput), 2), InputComponent = _o[0], inputProps = _o[1];
-    var _p = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverComponent = _p[0], popoverProps = _p[1];
-    var _q = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, StyledInputWrapper), 2), InputWrapper = _q[0], inputWrapperProps = _q[1];
-    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'MM/DD/YYYY';
-    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, onClick: props.disabled ? _noop : onFocus, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale }), void 0) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : 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, 
+    var _q = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput), 2), InputComponent = _q[0], inputProps = _q[1];
+    var _r = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverComponent = _r[0], popoverProps = _r[1];
+    var _s = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, StyledInputWrapper), 2), InputWrapper = _s[0], inputWrapperProps = _s[1];
+    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY';
+    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? _noop : onFocus, content: _jsx(DatePickerContent, __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: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __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), _jsx(Typography, __assign({ id: ariaDescribedBy, style: accessibilityStyles }, { children: locale.timeRangePicker.screenReaderMessageInput }), void 0), _jsx(Typography, __assign({ "aria-live": "assertive", style: accessibilityStyles }, { children: dateAriaLabel }), void 0)] }, void 0));
 };

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

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import { DateIOAdapter } from 'baseui/datepicker/utils/types';
 declare type TimeInputProps = {
     time?: Date | null;
     overrides?: any;
     onChange: (date: Date) => void;
-    dateHelpers: DateHelpers;
+    dateHelpers: DateHelpers<Date>;
     minTime?: Date;
     maxTime?: Date;
+    disabled?: boolean;
+    adapter: DateIOAdapter<Date>;
 };
-export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, }: TimeInputProps) => JSX.Element;
+export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, }: TimeInputProps) => JSX.Element;
 export {};

package/esm/date-picker/TimeInput.js

@@ -4,8 +4,10 @@ import { useState, useEffect, useMemo } from 'react';
 import { TimePicker as DefaultTimePicker } from '../time-picker';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { isTimeInRange } from './utils';
+var MS_IN_5_MINUTES = 60 * 1000 * 5;
+var roundUpTime = function (minTime) { return new Date(Math.ceil(minTime.getTime() / MS_IN_5_MINUTES) * MS_IN_5_MINUTES); };
 export var TimeInput = function (_a) {
-    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime;
+    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter;
     var _b = __read(useState(time), 2), value = _b[0], setValue = _b[1];
     var _c = __read(useState(false), 2), error = _c[0], setError = _c[1];
     useEffect(function () {
@@ -65,5 +67,5 @@ export var TimeInput = function (_a) {
         }, overrides);
     }, [error, value, overrides, time, minTime, maxTime, dateHelpers]);
     var _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.TimePicker, DefaultTimePicker), 2), TimePicker = _d[0], timeSelectProps = _d[1];
-    return _jsx(TimePicker, __assign({ size: "sm", value: value, onChange: handleChange, creatable: true, clearable: true }, timeSelectProps), void 0);
+    return (_jsx(TimePicker, __assign({ adapter: adapter, size: "sm", value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined }, timeSelectProps), void 0));
 };

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

@@ -7,4 +7,5 @@ export { DatePickerInput };
 export { StatelessDatePicker } from './StatelessDatePicker';
 export { useDatePickerState } from './useDatePickerState';
 export { formatDate } from './utils';
+export { DateTimeContainer as DateTimeRangeInputs } from './DateTimeContainer';
 export * from './types';

package/esm/date-picker/index.js

@@ -7,4 +7,5 @@ export { DatePickerInput };
 export { StatelessDatePicker } from './StatelessDatePicker';
 export { useDatePickerState } from './useDatePickerState';
 export { formatDate } from './utils';
+export { DateTimeContainer as DateTimeRangeInputs } from './DateTimeContainer';
 export * from './types';

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

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

package/esm/date-picker/stateful-container.d.ts

@@ -3,7 +3,7 @@ import { StatefulContainerProps } from './types';
 declare const StatefulContainer: {
     ({ adapter, onChange, value, startOpen, ...props }: StatefulContainerProps): ReactElement;
     defaultProps: {
-        adapter: any;
+        adapter: import("baseui/datepicker/utils/types").DateIOAdapter<Date>;
     };
 };
 export default StatefulContainer;

package/esm/date-picker/stateful-container.js

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

package/esm/date-picker/styled-components.d.ts

@@ -2,7 +2,6 @@ import { SharedStyleProps } from './types';
 import { StyleFn, Styles } from '../types';
 export declare const StyledInputWrapper: import("../style/styled").StyledComponent;
 export declare const getDayStyles: (todaySOD: any) => Styles;
-export declare const StyledWeekdayHeader: import("../style/styled").StyledComponent;
 export declare const StyledFooter: import("../style/styled").StyledComponent;
 export declare const StyledFooterBeforeEnhancer: import("../style/styled").StyledComponent;
 export declare const getCalendarContainerStyles: StyleFn<SharedStyleProps>;

package/esm/date-picker/styled-components.js

@@ -1,30 +1,8 @@
 import { __assign } from "tslib";
-import { getWeekdayInLocale } from 'baseui/datepicker/utils';
 import getDayStateCode from 'baseui/datepicker/utils/day-state';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import { styled } from '../style';
 export var StyledInputWrapper = styled('div');
-var getWeekdayHeaderStyle = function (utils, props) {
-    var getStyle = utils.getStyle, px2rem = utils.px2rem, theme = utils.theme;
-    var _a = props.$date, $date = _a === void 0 ? [new Date()] : _a, alt = props.alt, range = props.range;
-    // no highlight required if range is true or no date is selected
-    var isHighlighted;
-    if (range || !$date[0]) {
-        isHighlighted = false;
-    }
-    else {
-        isHighlighted = getWeekdayInLocale(Array.isArray($date) ? $date[0] : $date) === alt;
-    }
-    return getStyle('border-b-2 box-border cursor-default h-9 inline-block m-0 pb-2 pt-2 relative text-center w-9', {
-        marginBottom: '-1px',
-        borderBottomStyle: 'solid',
-        borderBottomColor: isHighlighted ? theme.spr.ui04 : 'transparent',
-        color: isHighlighted ? theme.spr.text04 : 'inherit',
-        lineHeight: px2rem(20),
-        paddingLeft: px2rem(6),
-        paddingRight: px2rem(6),
-    });
-};
 var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
     var firstChildStyle = firstChild ? { content: 'none' } : {};
     var lastChildStyle = firstChild ? {} : { content: 'none' };
@@ -73,6 +51,56 @@ var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
         '101010010000010': !peekNextMonth && firstChild ? { content: 'none' } : pseudoSelectedStyle,
     }[code] || {});
 };
+function generateDayStyles(defaultCode, defaultStyle) {
+    var _a;
+    var codeForSM = "".concat(defaultCode.substr(0, 12), "1").concat(defaultCode.substr(12 + 1));
+    var codeForEM = "".concat(defaultCode.substr(0, 13), "1").concat(defaultCode.substr(13 + 1));
+    return _a = {},
+        _a[defaultCode] = defaultStyle,
+        _a[codeForSM] = defaultStyle,
+        _a[codeForEM] = defaultStyle,
+        _a;
+}
+var getTempRTLAdaptedStyles = function (code) {
+    var dayStyles = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, generateDayStyles('100110100000000', {
+        ':before': {
+            right: '0%',
+            left: '0%',
+        },
+    })), generateDayStyles('100100001001000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101000001010000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101110100000000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('101000001001000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100100001010000', {
+        ':before': {
+            left: '50%',
+        },
+    }));
+    return dayStyles[code] || {};
+};
 export var getDayStyles = function (todaySOD) { return [
     'text-12 leading-8 w-9',
     function (_a, props) {
@@ -95,7 +123,7 @@ export var getDayStyles = function (todaySOD) { return [
                 !$isHovered &&
                 !$hasRangeHighlighted && {
                 backgroundColor: 'transparent',
-            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': __assign(__assign(__assign(__assign({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
+            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': __assign(__assign(__assign(__assign(__assign({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
                 ? {
                     borderTopLeftRadius: '100%',
                     borderBottomLeftRadius: '100%',
@@ -105,7 +133,7 @@ export var getDayStyles = function (todaySOD) { return [
                     borderTopRightRadius: '100%',
                     borderBottomRightRadius: '100%',
                 }
-                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), ':first-child': __assign({}, ($range
+                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), (getTempRTLAdaptedStyles(code)[':before'] || {})), ':first-child': __assign({}, ($range
                 ? {
                     ':before': __assign({}, getEdgeDayBeforeStyle(code, true, props.$peekNextMonth)),
                 }
@@ -116,10 +144,9 @@ export var getDayStyles = function (todaySOD) { return [
                 : {})) }, (dateFnsAdapter.isEqual($date, todaySOD) &&
             !$selected && {
             color: theme.spr.text04,
-        })), ($outsideMonth && { color: theme.spr.text03 }));
+        })), ($outsideMonth && { color: $selected ? theme.spr.text05 : theme.spr.text03 }));
     },
 ]; };
-export var StyledWeekdayHeader = styled('div', getWeekdayHeaderStyle);
 export var StyledFooter = styled('div', 'flex px-4 py-3');
 export var StyledFooterBeforeEnhancer = styled('div', 'flex-none');
 export var getCalendarContainerStyles = function (_a) {