@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

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 type { CalendarProps as BaseCalendarProps, GetTimeRangesForDate } from '../baseui/datepicker';
+import { DateIOAdapter } from '../baseui/datepicker/utils/types';
 import { DatepickerOverrides } from './types';
 declare type Props = {
     range?: boolean;
@@ -15,6 +15,7 @@ declare type Props = {
     minDate?: Date;
     maxDate?: Date;
     disabled?: boolean;
+    getTimeRangesForDate?: GetTimeRangesForDate;
 };
-export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, disabled, }: Props) => JSX.Element>;
+export declare const DateTimeContainer: React.MemoExoticComponent<({ range, adapter, timeSelectStart, timeSelectEnd, value, monthsShown, onChange, overrides, locale: dateFnsLocale, minDate, maxDate, disabled, getTimeRangesForDate, }: Props) => JSX.Element>;
 export {};

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");
@@ -13,20 +13,26 @@ var form_control_1 = require("../form-control");
 var overrides_1 = require("../overrides");
 var locale_1 = require("../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, disabled = _a.disabled;
+    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, getTimeRangesForDate = _a.getTimeRangesForDate;
     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, getTimeRangesForDate: getTimeRangesForDate }, 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;
+    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, getTimeRangesForDate = _a.getTimeRangesForDate;
     var _c = (0, tslib_1.__read)([].concat(value), 2), startDate = _c[0], endDate = _c[1];
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var locale = (0, locale_1.useLocale)();
@@ -83,7 +89,7 @@ exports.DateTimeContainer = React.memo(function (_a) {
     var handleDateInputChange = React.useCallback(function (date, index) {
         if (range && Array.isArray(value)) {
             var nextStartDate = 
-            // eslint-disable-next-line no-nested-ternary
+            // eslint-disable-next-line no-nested-ternary -- no need to extract these check in function
             index === 0
                 ? value[0]
                     ? dateHelpers.applyTimeToDate(date, value[0])
@@ -91,7 +97,7 @@ exports.DateTimeContainer = React.memo(function (_a) {
                 : value[0];
             var nextEndDate = 
             // if user is editing already selected endDate then we don't want to change the selected time, else set endtime as end of the day
-            // eslint-disable-next-line no-nested-ternary
+            // eslint-disable-next-line no-nested-ternary -- no need to extract these check in function
             index === 1 ? (value[1] ? dateHelpers.applyTimeToDate(date, value[1]) : adapter.endOfDay(date)) : value[1];
             if (index === 1) {
                 nextEndDate.setMilliseconds(999);
@@ -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, getTimeRangesForDate: getTimeRangesForDate }, 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, getTimeRangesForDate: getTimeRangesForDate }, void 0) }), void 0))] }), void 0));
 });

package/date-picker/StatelessDatePicker.js

@@ -5,9 +5,10 @@ var tslib_1 = require("tslib");
 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 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 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 popover_2 = require("../popover");
 var styled_components_1 = require("./styled-components");
 var typography_1 = require("../typography");
@@ -19,30 +20,31 @@ var overrides_1 = require("../overrides");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 var DatePickerContent_1 = require("./DatePickerContent");
-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 utils_2 = require("../time-range-picker/utils");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style");
+var commonStyles_1 = require("../helpers/commonStyles");
 // eslint-disable-next-line max-statements
 var StatelessDatePicker = function (_props) {
     var _a, _b;
-    var _c = (0, context_1.useContextualFormProps)(_props), onChange = _c.onChange, onBlur = _c.onBlur, _d = _c.adapter, adapter = _d === void 0 ? date_fns_adapter_1.default : _d, _e = _c.size, size = _e === void 0 ? 'md' : _e, _f = _c.formatString, formatString = _f === void 0 ? constants_1.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, props = (0, tslib_1.__rest)(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
+    var theme = (0, style_1.useStyle)().theme;
+    var _c = (0, context_1.useContextualFormProps)(_props), onChange = _c.onChange, onBlur = _c.onBlur, _d = _c.adapter, adapter = _d === void 0 ? date_fns_adapter_1.default : _d, _e = _c.size, size = _e === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _e, _f = _c.formatString, formatString = _f === void 0 ? constants_1.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 ? (0, utils_2.getSystemTzName)() : _k, _l = _c.showTimezone, showTimezone = _l === void 0 ? false : _l, props = (0, tslib_1.__rest)(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone"]);
     var locale = (0, locale_1.useLocale)();
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return (0, utils_1.prepareLocale)(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
+    var value = React.useMemo(function () {
+        if (Array.isArray(_value)) {
+            return (0, compact_1.default)(_value).map(function (date) { return new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(date, timezone)); });
+        }
+        if (_value) {
+            return new Date((0, utils_2.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 = (0, tslib_1.__read)(React.useState(false), 2), autoFocusCalendar = _k[0], setAutoFocusCalendar = _k[1];
-    var _l = (0, tslib_1.__read)(React.useState(false), 2), error = _l[0], setError = _l[1];
+    var _m = (0, tslib_1.__read)(React.useState(false), 2), autoFocusCalendar = _m[0], setAutoFocusCalendar = _m[1];
+    var _o = (0, tslib_1.__read)(React.useState(false), 2), error = _o[0], setError = _o[1];
     React.useEffect(function () {
         if ((0, utils_1.isTimeInRange)(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
             setError(false);
@@ -52,7 +54,7 @@ var StatelessDatePicker = function (_props) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers]);
     var screenReaderMsgId = (0, useUniqueId_1.default)();
-    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 = (0, utils_1.normalizeDashes)(formatString);
         if (formatDisplayValue) {
@@ -61,8 +63,15 @@ var StatelessDatePicker = function (_props) {
             }
             return formatDisplayValue(date, normalizedFormatString);
         }
-        return (0, utils_1.formatDate)({ date: date, dateHelpers: dateHelpers, formatString: normalizedFormatString, locale: dateFnsLocale });
-    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale]);
+        return (0, utils_1.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 (0, overrides_1.mergeOverrides)({
             Popover: {
@@ -97,8 +106,8 @@ var StatelessDatePicker = function (_props) {
     }, [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);
@@ -125,18 +134,16 @@ var StatelessDatePicker = function (_props) {
     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 (0, utils_1.getAriaLabel)(value, defaultFormatDisplayValue, locale); }, [value, defaultFormatDisplayValue, locale]);
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _o[0], inputProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _p[0], popoverProps = _p[1];
-    var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _q[0], inputWrapperProps = _q[1];
+    var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _q[0], inputProps = _q[1];
+    var _r = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _r[0], popoverProps = _r[1];
+    var _s = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _s[0], inputWrapperProps = _s[1];
     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)({ 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 }), 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)({ "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, 
+    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,7 @@
 /// <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';
+import { GetTimeRangesForDate } from '../baseui/datepicker/types';
 declare type TimeInputProps = {
     time?: Date | null;
     overrides?: any;
@@ -10,6 +11,7 @@ declare type TimeInputProps = {
     maxTime?: Date;
     disabled?: boolean;
     adapter: DateIOAdapter<Date>;
+    getTimeRangesForDate?: GetTimeRangesForDate;
 };
-export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, }: TimeInputProps) => JSX.Element;
+export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, getTimeRangesForDate, }: TimeInputProps) => JSX.Element;
 export {};

package/date-picker/TimeInput.js

@@ -10,7 +10,7 @@ var utils_1 = require("./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); };
 var TimeInput = function (_a) {
-    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 overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter, getTimeRangesForDate = _a.getTimeRangesForDate;
     var _b = (0, tslib_1.__read)((0, react_1.useState)(time), 2), value = _b[0], setValue = _b[1];
     var _c = (0, tslib_1.__read)((0, react_1.useState)(false), 2), error = _c[0], setError = _c[1];
     (0, react_1.useEffect)(function () {
@@ -70,6 +70,7 @@ var TimeInput = function (_a) {
         }, overrides);
     }, [error, value, overrides, time, minTime, maxTime, dateHelpers]);
     var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.TimePicker, time_picker_1.TimePicker), 2), TimePicker = _d[0], timeSelectProps = _d[1];
-    return ((0, jsx_runtime_1.jsx)(TimePicker, (0, tslib_1.__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));
+    var timeRanges = (0, react_1.useMemo)(function () { return (time ? getTimeRangesForDate === null || getTimeRangesForDate === void 0 ? void 0 : getTimeRangesForDate(time) : undefined); }, [time, getTimeRangesForDate]);
+    return ((0, jsx_runtime_1.jsx)(TimePicker, (0, tslib_1.__assign)({ adapter: adapter, 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, timeRanges: timeRanges }, timeSelectProps), void 0));
 };
 exports.TimeInput = TimeInput;

package/date-picker/constants.d.ts

@@ -1 +1,9 @@
 export declare const DEFAULT_FORMAT_STRING = "MM/dd/yyyy";
+export declare const DISABLE_WHOLE_DAY: {
+    from: number;
+    upto: number;
+}[];
+export declare const ENABLE_WHOLE_DAY: {
+    from: number;
+    upto: number;
+}[];

package/date-picker/constants.js

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_FORMAT_STRING = void 0;
+exports.ENABLE_WHOLE_DAY = exports.DISABLE_WHOLE_DAY = exports.DEFAULT_FORMAT_STRING = void 0;
 exports.DEFAULT_FORMAT_STRING = 'MM/dd/yyyy';
+exports.DISABLE_WHOLE_DAY = [{ from: 0, upto: 0 }];
+exports.ENABLE_WHOLE_DAY = [{ from: 0, upto: 24 * 60 * 60 * 1000 }];

package/date-picker/index.d.ts

@@ -1,7 +1,7 @@
 import Calendar from './Calendar';
 import DatePickerInput from './DatePickerInput';
 export { Calendar };
-export { StyledCalendarContainer, StyledCalendarHeader, StyledInputWrapper, StyledMonth, StyledMonthContainer, StyledMonthHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer, StyledNextButton, StyledPrevButton, StyledRoot, StyledSelectorContainer, StyledWeek, StyledWeekdayHeader, } from 'baseui/datepicker/styled-components';
+export { StyledCalendarContainer, StyledCalendarHeader, StyledInputWrapper, StyledMonth, StyledMonthContainer, StyledMonthHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer, StyledNextButton, StyledPrevButton, StyledRoot, StyledSelectorContainer, StyledWeek, StyledWeekdayHeader, } from '../baseui/datepicker/styled-components';
 export { DatePicker } from './DatePicker';
 export { DatePickerInput };
 export { StatelessDatePicker } from './StatelessDatePicker';
@@ -9,3 +9,4 @@ export { useDatePickerState } from './useDatePickerState';
 export { formatDate } from './utils';
 export { DateTimeContainer as DateTimeRangeInputs } from './DateTimeContainer';
 export * from './types';
+export * from './constants';

package/date-picker/index.js

@@ -6,7 +6,7 @@ var Calendar_1 = (0, tslib_1.__importDefault)(require("./Calendar"));
 exports.Calendar = Calendar_1.default;
 var DatePickerInput_1 = (0, tslib_1.__importDefault)(require("./DatePickerInput"));
 exports.DatePickerInput = DatePickerInput_1.default;
-var styled_components_1 = require("baseui/datepicker/styled-components");
+var styled_components_1 = require("../baseui/datepicker/styled-components");
 Object.defineProperty(exports, "StyledCalendarContainer", { enumerable: true, get: function () { return styled_components_1.StyledCalendarContainer; } });
 Object.defineProperty(exports, "StyledCalendarHeader", { enumerable: true, get: function () { return styled_components_1.StyledCalendarHeader; } });
 Object.defineProperty(exports, "StyledInputWrapper", { enumerable: true, get: function () { return styled_components_1.StyledInputWrapper; } });
@@ -32,3 +32,4 @@ Object.defineProperty(exports, "formatDate", { enumerable: true, get: function (
 var DateTimeContainer_1 = require("./DateTimeContainer");
 Object.defineProperty(exports, "DateTimeRangeInputs", { enumerable: true, get: function () { return DateTimeContainer_1.DateTimeContainer; } });
 (0, tslib_1.__exportStar)(require("./types"), exports);
+(0, tslib_1.__exportStar)(require("./constants"), exports);

package/date-picker/locale.d.ts

@@ -1,3 +1,15 @@
 export declare type DatePickerLocale = {
+    ariaLabelCalendar: string;
     popoverAriaLabel: string;
+    timezonePickerLabel: string;
+    timezonePickerPlaceholder: string;
+    nextMonth: string;
+    previousMonth: string;
+    ariaRoleDescCalMonth: string;
+    selectedStartDateLabel: string;
+    selectedEndDateLabel: string;
+    dateNotAvailableLabel: string;
+    dateAvailableLabel: string;
+    selectedLabel: string;
+    chooseLabel: string;
 };

package/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: import("baseui/datepicker/utils/types").DateIOAdapter<Date>;
+        adapter: import("../baseui/datepicker/utils/types").DateIOAdapter<Date>;
     };
 };
 export default StatefulContainer;

package/date-picker/stateful-container.js

@@ -2,25 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 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_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
 var useDatePickerState_1 = require("./useDatePickerState");
+var utils_1 = require("../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 = (0, tslib_1.__rest)(_a, ["adapter", "onChange", "value", "startOpen"]);
-    var _d = (0, tslib_1.__read)(React.useState(value), 2), date = _d[0], setDate = _d[1];
-    var _e = (0, useDatePickerState_1.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 = (0, tslib_1.__rest)(_a, ["adapter", "onChange", "value", "startOpen"]);
+    var _e = (0, tslib_1.__read)(React.useState(value), 2), date = _e[0], setDate = _e[1];
+    var _f = (0, tslib_1.__read)(React.useState((_b = props.timezone) !== null && _b !== void 0 ? _b : (0, utils_1.getSystemTzName)()), 2), timezone = _f[0], setTimezone = _f[1];
+    var _g = (0, useDatePickerState_1.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 = (0, tslib_1.__rest)(props, ["children"]);
-    return (_b = props.children) === null || _b === void 0 ? void 0 : _b.call(props, (0, tslib_1.__assign)((0, tslib_1.__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, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { value: date, adapter: adapter, onChange: handleDateChange, onFocus: handleOpen, onBlur: handleClose, isOpen: isOpen, range: false, timezone: timezone }));
 };
 StatefulContainer.defaultProps = {
     adapter: date_fns_adapter_1.default,

package/date-picker/styled-components.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCalendarContainerStyles = exports.StyledFooterBeforeEnhancer = exports.StyledFooter = exports.getDayStyles = exports.StyledInputWrapper = void 0;
 var tslib_1 = require("tslib");
-var day_state_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/day-state"));
-var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
+var day_state_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/day-state"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
 var style_1 = require("../style");
 exports.StyledInputWrapper = (0, style_1.styled)('div');
 var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
@@ -54,13 +54,64 @@ 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 = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__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] || {};
+};
 var getDayStyles = function (todaySOD) { return [
-    'text-12 leading-8 w-9',
+    'text-12 leading-8 w-9 flex items-center justify-center',
     function (_a, props) {
         var theme = _a.theme, px2rem = _a.px2rem;
-        var $isHighlighted = props.$isHighlighted, $hasRangeHighlighted = props.$hasRangeHighlighted, $date = props.$date, $selected = props.$selected, $isHovered = props.$isHovered, $range = props.$range, $outsideMonthWithinRange = props.$outsideMonthWithinRange, $startOfMonth = props.$startOfMonth, $endOfMonth = props.$endOfMonth, $hasDateLabel = props.$hasDateLabel, $month = props.$month;
+        var $isHighlighted = props.$isHighlighted, $hasRangeHighlighted = props.$hasRangeHighlighted, $date = props.$date, $selected = props.$selected, $isHovered = props.$isHovered, $range = props.$range, $outsideMonthWithinRange = props.$outsideMonthWithinRange, $startOfMonth = props.$startOfMonth, $endOfMonth = props.$endOfMonth, $month = props.$month;
         var code = (0, day_state_1.default)(props);
         var $outsideMonth = new Date($date).getMonth() !== $month;
+        var $isCompact = theme.density === 'COMPACT';
         var backgroundColor = 'transparent';
         if ($selected) {
             backgroundColor = theme.spr.ui04;
@@ -71,12 +122,14 @@ var getDayStyles = function (todaySOD) { return [
         else if ($isHovered || $isHighlighted || props.$pseudoHighlighted) {
             backgroundColor = theme.spr.ui05;
         }
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)({ height: $hasDateLabel ? px2rem('60px') : px2rem('36px'), paddingLeft: px2rem('6px'), paddingRight: px2rem('6px'), ':after': (0, tslib_1.__assign)((0, tslib_1.__assign)({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($isHighlighted &&
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({ 
+            // Todo:- Need to remove this ternary expression and this $hasDatelable prop
+            height: $isCompact ? px2rem('30px') : px2rem('36px'), width: $isCompact ? px2rem('30px') : px2rem('36px'), paddingLeft: px2rem('6px'), paddingRight: px2rem('6px'), ':after': (0, tslib_1.__assign)((0, tslib_1.__assign)({ left: 'unset', height: '100%', width: '100%', borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($isHighlighted &&
                 !$selected &&
                 !$isHovered &&
                 !$hasRangeHighlighted && {
                 backgroundColor: 'transparent',
-            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
+            })), { backgroundColor: backgroundColor, top: 0 }), ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ top: '0px', height: '100%', borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
                 ? {
                     borderTopLeftRadius: '100%',
                     borderBottomLeftRadius: '100%',
@@ -86,7 +139,7 @@ var getDayStyles = function (todaySOD) { return [
                     borderTopRightRadius: '100%',
                     borderBottomRightRadius: '100%',
                 }
-                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), ':first-child': (0, tslib_1.__assign)({}, ($range
+                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), (getTempRTLAdaptedStyles(code)[':before'] || {})), ':first-child': (0, tslib_1.__assign)({}, ($range
                 ? {
                     ':before': (0, tslib_1.__assign)({}, getEdgeDayBeforeStyle(code, true, props.$peekNextMonth)),
                 }
@@ -97,7 +150,7 @@ var getDayStyles = function (todaySOD) { return [
                 : {})) }, (date_fns_adapter_1.default.isEqual($date, todaySOD) &&
             !$selected && {
             color: theme.spr.text04,
-        })), ($outsideMonth && { color: theme.spr.text03 }));
+        })), ($outsideMonth && { color: $selected ? theme.spr.text05 : theme.spr.text03 }));
     },
 ]; };
 exports.getDayStyles = getDayStyles;

package/date-picker/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CalendarProps as BaseCalendarProps, DatepickerProps as BaseDatepickerProps, SharedStylePropsT } from 'baseui/datepicker';
+import { CalendarProps as BaseCalendarProps, DatepickerProps as BaseDatepickerProps, SharedStylePropsT } from '../baseui/datepicker';
 import { TimePickerProps } from '../time-picker';
 import { InputSize, InputVariant } from '../input';
 import { Override } from '../overrides/types';
@@ -19,6 +19,8 @@ export declare type DateTimeSelectSharedProps = {
 export declare type DatepickerOverrides<T = SharedStyleProps> = {
     CalendarContainer?: Override<T>;
     CalendarHeader?: Override<T>;
+    TimezonePicker?: Override<T>;
+    Calendar?: Override<CalendarProps & Record<string, any>>;
     Day?: Override<T>;
     Input?: Override<T>;
     InputWrapper?: Override<T>;
@@ -43,7 +45,11 @@ export declare type DatepickerOverrides<T = SharedStyleProps> = {
     Footer?: Override<T>;
     DateTimeSelect?: Override<DateTimeSelectSharedProps>;
 };
+export declare type Nullable<T> = T | null | undefined;
 export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSelectStart' | 'timeSelectEnd' | 'value' | 'onChange' | 'quickSelect' | 'quickSelectOptions' | 'size' | 'overrides' | 'onDayClick' | 'onDayMouseOver' | 'onDayMouseLeave' | 'onMonthChange' | 'onYearChange' | 'formatString' | 'peekNextMonth' | 'fixedHeight'> & {
+    id?: string;
+    showTimezone?: boolean;
+    timezone?: string;
     intent?: Intent;
     timeSelect?: boolean;
     onBlur?: () => void;
@@ -53,7 +59,8 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
     variant?: InputVariant;
     value: Date | Date[] | undefined;
     onChange?: (data: {
-        value?: (Date | undefined | null)[] | Date | null;
+        value?: Nullable<Date>[] | Nullable<Date>;
+        timezone?: string;
     }) => any;
     size?: InputSize;
     overrides?: DatepickerOverrides;
@@ -75,8 +82,11 @@ export declare type StatefulContainerProps = {
     value?: Date;
     onChange?: (data: {
         value?: Date | undefined | null;
+        timezone?: string;
     }) => any;
     startOpen?: boolean;
+    showTimezone?: boolean;
+    timezone?: string;
 };
 export declare type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
 export declare type DatePickerSharedProps = SharedStylePropsT;

package/date-picker/utils.d.ts

@@ -1,16 +1,18 @@
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
 interface FormatDateParams {
     date: Date | Date[] | undefined;
     formatString?: string;
     locale: any;
     dateHelpers?: DateHelpers<Date>;
+    timezone?: string;
+    showTimezone?: boolean;
 }
 export declare const normalizeDashes: (formatString: string) => string;
-export declare const formatDate: (params: FormatDateParams) => string;
+export declare const formatDate: ({ showTimezone, ...params }: FormatDateParams) => string;
 export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string, locale: Locale) => string;
 export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
-    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    weekStartsOn?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | undefined;
 } | undefined) => any;
 export declare const isTimeInRange: (date: Date | Array<Date | undefined | null> | null | undefined, { minDate, maxDate, dateHelpers, }: {
     minDate?: Date | null | undefined;