@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/date-picker/StatelessDatePicker.js

@@ -3,58 +3,65 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatelessDatePicker = void 0;
 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 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 React = tslib_1.__importStar(require("react"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var compact_1 = tslib_1.__importDefault(require("lodash/compact"));
+var date_helpers_1 = tslib_1.__importDefault(require("../baseui/datepicker/utils/date-helpers"));
+var date_fns_adapter_1 = tslib_1.__importDefault(require("../baseui/datepicker/utils/date-fns-adapter"));
 var popover_1 = require("../baseui/popover");
+var box_1 = require("../box");
 var popover_2 = require("../popover");
 var styled_components_1 = require("./styled-components");
 var typography_1 = require("../typography");
-var DatePickerInput_1 = (0, tslib_1.__importDefault)(require("./DatePickerInput"));
+var DatePickerInput_1 = tslib_1.__importDefault(require("./DatePickerInput"));
 var locale_1 = require("../locale");
-var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var useUniqueId_1 = tslib_1.__importDefault(require("../hooks/useUniqueId"));
 var context_1 = require("../form-control/context");
 var overrides_1 = require("../overrides");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 var DatePickerContent_1 = require("./DatePickerContent");
 var utils_2 = require("../time-range-picker/utils");
+var getSystemTzName_1 = require("../time-range-picker/getSystemTzName");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
-var commonStyles_1 = require("../helpers/commonStyles");
-// eslint-disable-next-line max-statements
+// eslint-disable-next-line max-statements -- required for function component
 var StatelessDatePicker = function (_props) {
-    var _a, _b;
+    var _a, _b, _c;
     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 _d = (0, context_1.useContextualFormProps)(_props), onChange = _d.onChange, onBlur = _d.onBlur, _e = _d.adapter, adapter = _e === void 0 ? date_fns_adapter_1.default : _e, _f = _d.size, size = _f === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _f, _g = _d.formatString, formatString = _g === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _g, _h = _d.isOpen, isOpen = _h === void 0 ? false : _h, onFocus = _d.onFocus, clearable = _d.clearable, displayValueAtRangeIndex = _d.displayValueAtRangeIndex, _j = _d.variant, variant = _j === void 0 ? 'default' : _j, overrides = _d.overrides, intent = _d.intent, _value = _d.value, formatDisplayValue = _d.formatDisplayValue, _k = _d.autoSizeInput, autoSizeInput = _k === void 0 ? false : _k, weekStartsOn = _d.weekStartsOn, _l = _d.timezone, timezone = _l === void 0 ? (0, getSystemTzName_1.getSystemTzName)() : _l, _m = _d.showTimezone, showTimezone = _m === void 0 ? false : _m, timezoneOptions = _d.timezoneOptions, props = tslib_1.__rest(_d, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
     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)); });
+            return (0, compact_1.default)(_value).map(function (date) { return new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(date, timezone, timezoneOptions)); });
         }
         if (_value) {
-            return new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(_value, timezone));
+            return new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(_value, timezone, timezoneOptions));
         }
         return undefined;
-    }, [_value, timezone]);
+    }, [_value, timezone, timezoneOptions]);
     // 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 _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];
+    var _o = tslib_1.__read(React.useState(false), 2), autoFocusCalendar = _o[0], setAutoFocusCalendar = _o[1];
+    var _p = tslib_1.__read(React.useState(false), 2), error = _p[0], setError = _p[1];
     React.useEffect(function () {
-        if ((0, utils_1.isTimeInRange)(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
+        var _a = (0, utils_2.getMinMaxDateInTimezone)({
+            maxDate: props.maxDate,
+            minDate: props.minDate,
+            timezone: timezone,
+            timezoneOptions: timezoneOptions,
+        }), minDate = _a.minDate, maxDate = _a.maxDate;
+        if ((0, utils_1.isTimeInRange)(value, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers })) {
             setError(false);
         }
         else {
             setError(true);
         }
-    }, [value, props.minDate, props.maxDate, dateHelpers]);
+    }, [value, props.minDate, props.maxDate, dateHelpers, timezone, timezoneOptions]);
     var screenReaderMsgId = (0, useUniqueId_1.default)();
-    var _p = props["aria-describedby"], ariaDescribedBy = _p === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _p;
+    var _q = props["aria-describedby"], ariaDescribedBy = _q === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _q;
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = (0, utils_1.normalizeDashes)(formatString);
         if (formatDisplayValue) {
@@ -86,27 +93,19 @@ var StatelessDatePicker = function (_props) {
                     },
                 },
             },
-            TimePickerFormControl: {
-                props: {
-                    label: null,
-                },
-            },
-            DateInputFormControl: {
-                props: {
-                    label: null,
-                },
-            },
             Root: {
-                style: 'rounded-8',
+                className: 'rounded-8',
             },
             CalendarHeader: {
-                style: 'rounded-8',
+                className: 'rounded-8',
             },
         }, 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(showTimezone ? { value: data.date, timezone: data.timezone } : { value: data.date });
+        onChange === null || onChange === void 0 ? void 0 : onChange(showTimezone
+            ? { value: data.date, timezone: data.timezone, shouldClosePopover: data.shouldClosePopover }
+            : { value: data.date, shouldClosePopover: data.shouldClosePopover });
     }, [onChange, showTimezone]);
     var onClose = React.useCallback(function () {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
@@ -138,12 +137,14 @@ var StatelessDatePicker = function (_props) {
         }
     }, [clearable, onChange, timezone, showTimezone]);
     var dateAriaLabel = React.useMemo(function () { return (0, utils_1.getAriaLabel)(value, defaultFormatDisplayValue, locale); }, [value, defaultFormatDisplayValue, locale]);
-    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)({ 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, 
+    var _r = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _r[0], inputProps = _r[1];
+    var _s = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _s[0], popoverProps = _s[1];
+    var _t = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _t[0], inputWrapperProps = _t[1];
+    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : formatString.toLowerCase();
+    // if calendar is close, open it on click otherwise close the calendar
+    var popoverHandleClick = isOpen ? onBlur : onFocus;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, 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 : popoverHandleClick, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, tslib_1.__assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, tslib_1.__assign({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, 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-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_c = props.required) !== null && _c !== void 0 ? _c : props['aria-required'], 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: 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));
+                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "relative" }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ id: ariaDescribedBy, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
 };
 exports.StatelessDatePicker = StatelessDatePicker;

package/date-picker/TimeInput.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { DateIOAdapter } from '../baseui/datepicker/utils/types';
-declare type TimeInputProps = {
+import { GetTimeRangesForDate } from '../baseui/datepicker/types';
+import type { InputSize } from '../input/types';
+type TimeInputProps = {
     time?: Date | null;
     overrides?: any;
     onChange: (date: Date) => void;
@@ -10,6 +12,8 @@ declare type TimeInputProps = {
     maxTime?: Date;
     disabled?: boolean;
     adapter: DateIOAdapter<Date>;
+    getTimeRangesForDate?: GetTimeRangesForDate;
+    size?: InputSize;
 };
-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, size, }: TimeInputProps) => JSX.Element;
 export {};

package/date-picker/TimeInput.js

@@ -7,12 +7,14 @@ var react_1 = require("react");
 var time_picker_1 = require("../time-picker");
 var overrides_1 = require("../overrides");
 var utils_1 = require("./utils");
+var clock_icon_1 = tslib_1.__importDefault(require("../icon/components/clock-icon"));
+var InputFieldIcon_1 = require("./InputFieldIcon");
 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 _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];
+    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, size = _a.size;
+    var _b = tslib_1.__read((0, react_1.useState)(time), 2), value = _b[0], setValue = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), error = _c[0], setError = _c[1];
     (0, react_1.useEffect)(function () {
         setValue(time);
         if ((0, utils_1.isTimeInRange)(time, { minDate: minTime, maxDate: maxTime, dateHelpers: dateHelpers })) {
@@ -38,7 +40,7 @@ var TimeInput = function (_a) {
                 props: {
                     overrides: {
                         Select: {
-                            props: (0, tslib_1.__assign)((0, tslib_1.__assign)({ clearable: false, intent: error ? 'error' : 'default', backspaceRemoves: true }, (!value && { value: [] })), { onBlur: function () {
+                            props: tslib_1.__assign(tslib_1.__assign({ clearable: false, intent: error ? 'error' : 'default', backspaceRemoves: true }, (!value && { value: [] })), { onBlur: function () {
                                     setValue(time);
                                     if ((0, utils_1.isTimeInRange)(time, { minDate: minTime, maxDate: maxTime, dateHelpers: dateHelpers })) {
                                         setError(false);
@@ -57,10 +59,12 @@ var TimeInput = function (_a) {
                                             'data-testid': 'time-input',
                                         },
                                     },
+                                    ControlContainer: {
+                                        className: 'pl-2',
+                                    },
                                     ValueContainer: {
-                                        style: {
-                                            fontVariantNumeric: 'tabular-nums',
-                                        },
+                                        component: InputFieldIcon_1.DropdownFieldIcon,
+                                        props: { className: 'tabular-nums', icon: clock_icon_1.default },
                                     },
                                 } }),
                         },
@@ -69,7 +73,8 @@ 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, 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 _d = 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];
+    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, 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, size: size }, timeSelectProps)));
 };
 exports.TimeInput = TimeInput;

package/date-picker/TimezoneDisplay.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import type { TimezonePickerProps } from '../time-zone-picker';
+type Props = Pick<TimezonePickerProps, 'mapLabels' | 'timezoneOptions' | 'value' | 'date'> & {};
+export declare const TimezoneOptionsDisplay: import("react").MemoExoticComponent<({ date, mapLabels, timezoneOptions, value }: Props) => ReactElement>;
+export {};

package/date-picker/TimezoneDisplay.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimezoneOptionsDisplay = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var box_1 = require("../box");
+var typography_1 = require("../typography");
+var locale_1 = require("../locale");
+var utils_1 = require("../time-zone-picker/utils");
+var utils_2 = require("../baseui/select/utils");
+var contants_1 = require("../time-zone-picker/contants");
+exports.TimezoneOptionsDisplay = (0, react_1.memo)(function (_a) {
+    var _b = _a.date, date = _b === void 0 ? (0, utils_1.getMemoizedDate)() : _b, mapLabels = _a.mapLabels, timezoneOptions = _a.timezoneOptions, value = _a.value;
+    var locale = (0, locale_1.useLocale)();
+    var timezoneList = (0, react_1.useMemo)(function () { return (0, utils_1.getTimezoneList)({ date: date, mapLabels: mapLabels, timezoneOptions: timezoneOptions }); }, [date, mapLabels, timezoneOptions]);
+    var _value = (0, react_1.useMemo)(function () { return (value ? { id: contants_1.FALLBACK_TIME_ZONES[value] === undefined ? value : contants_1.FALLBACK_TIME_ZONES[value] } : {}); }, [value]);
+    var timezoneOption = (0, react_1.useMemo)(function () { return (0, utils_2.expandValue)(_value, { options: timezoneList, labelKey: 'label', valueKey: 'id' }); }, [timezoneList, _value]);
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex flex-col gap-1" }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-14", className: "spr-text-02" }, { children: locale.datePicker.timezonePickerLabel })), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ maxLines: 1, variant: "body-14" }, { children: timezoneOption.label }))] })));
+});

package/date-picker/constants.d.ts

@@ -1 +1,13 @@
 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;
+}[];
+export declare const MS_IN_SECOND = 1000;
+export declare const MS_IN_MINUTE: number;
+export declare const MS_IN_HOUR: number;
+export declare const MS_IN_DAY: number;

package/date-picker/constants.js

@@ -1,4 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_FORMAT_STRING = void 0;
+exports.MS_IN_DAY = exports.MS_IN_HOUR = exports.MS_IN_MINUTE = exports.MS_IN_SECOND = 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 }];
+exports.MS_IN_SECOND = 1000;
+exports.MS_IN_MINUTE = exports.MS_IN_SECOND * 60;
+exports.MS_IN_HOUR = exports.MS_IN_MINUTE * 60;
+exports.MS_IN_DAY = exports.MS_IN_HOUR * 24;

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, StyledRoot, StyledSelectorContainer, StyledWeek, StyledWeekdayHeader, StyledDay, } 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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateTimeRangeInputs = exports.formatDate = exports.useDatePickerState = exports.StatelessDatePicker = exports.DatePickerInput = exports.DatePicker = exports.StyledWeekdayHeader = exports.StyledWeek = exports.StyledSelectorContainer = exports.StyledRoot = exports.StyledPrevButton = exports.StyledNextButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledMonthContainer = exports.StyledMonth = exports.StyledInputWrapper = exports.StyledCalendarHeader = exports.StyledCalendarContainer = exports.Calendar = void 0;
+exports.DateTimeRangeInputs = exports.formatDate = exports.useDatePickerState = exports.StatelessDatePicker = exports.DatePickerInput = exports.DatePicker = exports.StyledDay = exports.StyledWeekdayHeader = exports.StyledWeek = exports.StyledSelectorContainer = exports.StyledRoot = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledMonthContainer = exports.StyledMonth = exports.StyledInputWrapper = exports.StyledCalendarHeader = exports.StyledCalendarContainer = exports.Calendar = void 0;
 var tslib_1 = require("tslib");
-var Calendar_1 = (0, tslib_1.__importDefault)(require("./Calendar"));
+var Calendar_1 = tslib_1.__importDefault(require("./Calendar"));
 exports.Calendar = Calendar_1.default;
-var DatePickerInput_1 = (0, tslib_1.__importDefault)(require("./DatePickerInput"));
+var DatePickerInput_1 = tslib_1.__importDefault(require("./DatePickerInput"));
 exports.DatePickerInput = DatePickerInput_1.default;
 var styled_components_1 = require("../baseui/datepicker/styled-components");
 Object.defineProperty(exports, "StyledCalendarContainer", { enumerable: true, get: function () { return styled_components_1.StyledCalendarContainer; } });
@@ -15,12 +15,11 @@ Object.defineProperty(exports, "StyledMonthContainer", { enumerable: true, get:
 Object.defineProperty(exports, "StyledMonthHeader", { enumerable: true, get: function () { return styled_components_1.StyledMonthHeader; } });
 Object.defineProperty(exports, "StyledMonthYearSelectButton", { enumerable: true, get: function () { return styled_components_1.StyledMonthYearSelectButton; } });
 Object.defineProperty(exports, "StyledMonthYearSelectIconContainer", { enumerable: true, get: function () { return styled_components_1.StyledMonthYearSelectIconContainer; } });
-Object.defineProperty(exports, "StyledNextButton", { enumerable: true, get: function () { return styled_components_1.StyledNextButton; } });
-Object.defineProperty(exports, "StyledPrevButton", { enumerable: true, get: function () { return styled_components_1.StyledPrevButton; } });
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.StyledRoot; } });
 Object.defineProperty(exports, "StyledSelectorContainer", { enumerable: true, get: function () { return styled_components_1.StyledSelectorContainer; } });
 Object.defineProperty(exports, "StyledWeek", { enumerable: true, get: function () { return styled_components_1.StyledWeek; } });
 Object.defineProperty(exports, "StyledWeekdayHeader", { enumerable: true, get: function () { return styled_components_1.StyledWeekdayHeader; } });
+Object.defineProperty(exports, "StyledDay", { enumerable: true, get: function () { return styled_components_1.StyledDay; } });
 var DatePicker_1 = require("./DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 var StatelessDatePicker_1 = require("./StatelessDatePicker");
@@ -31,4 +30,5 @@ var utils_1 = require("./utils");
 Object.defineProperty(exports, "formatDate", { enumerable: true, get: function () { return utils_1.formatDate; } });
 var DateTimeContainer_1 = require("./DateTimeContainer");
 Object.defineProperty(exports, "DateTimeRangeInputs", { enumerable: true, get: function () { return DateTimeContainer_1.DateTimeContainer; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./constants"), exports);

package/date-picker/locale.d.ts

@@ -1,5 +1,17 @@
-export declare type DatePickerLocale = {
+export 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;
+    openDatePicker: string;
+    closeDatePicker: string;
 };

package/date-picker/stateful-container.js

@@ -1,29 +1,39 @@
 "use strict";
 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 React = tslib_1.__importStar(require("react"));
+var date_fns_adapter_1 = tslib_1.__importDefault(require("../baseui/datepicker/utils/date-fns-adapter"));
 var useDatePickerState_1 = require("./useDatePickerState");
-var utils_1 = require("../time-range-picker/utils");
+var getSystemTzName_1 = require("../time-range-picker/getSystemTzName");
 var StatefulContainer = function (_a) {
     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;
+    var adapter = _a.adapter, onChange = _a.onChange, value = _a.value, _d = _a.startOpen, startOpen = _d === void 0 ? false : _d, props = tslib_1.__rest(_a, ["adapter", "onChange", "value", "startOpen"]);
+    var _e = tslib_1.__read(React.useState(value), 2), date = _e[0], setDate = _e[1];
+    var _f = tslib_1.__read(React.useState((_b = props.timezone) !== null && _b !== void 0 ? _b : (0, getSystemTzName_1.getSystemTzName)()), 2), timezone = _f[0], setTimezone = _f[1];
+    var _g = tslib_1.__read(React.useState(timezone), 2), prevTimezone = _g[0], setPrevTimezone = _g[1];
+    var _h = (0, useDatePickerState_1.useDatePickerState)({ startOpen: startOpen }), isOpen = _h.isOpen, handleOpen = _h.handleOpen, handleClose = _h.handleClose, setIsOpen = _h.setIsOpen;
     React.useEffect(function () {
         setDate(value);
     }, [value]);
+    if (props.timezone !== prevTimezone) {
+        setPrevTimezone(props.timezone);
+        if (timezone !== props.timezone) {
+            setTimezone(props.timezone);
+        }
+    }
     var handleDateChange = React.useCallback(function (_a) {
-        var _value = _a.value, _timezone = _a.timezone;
-        var prevValue = date;
+        var _value = _a.value, _timezone = _a.timezone, _b = _a.shouldClosePopover, shouldClosePopover = _b === void 0 ? true : _b;
         setDate(_value);
-        setTimezone(_timezone);
+        if (props.showTimezone) {
+            setTimezone(_timezone);
+        }
         onChange === null || onChange === void 0 ? void 0 : onChange(props.showTimezone ? { value: _value, timezone: _timezone } : { value: _value });
-        setIsOpen(false);
-    }, [setDate, setIsOpen, onChange, date, props.showTimezone]);
-    var children = props.children, restProps = (0, tslib_1.__rest)(props, ["children"]);
-    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 }));
+        if (shouldClosePopover) {
+            setIsOpen(false);
+        }
+    }, [setDate, setIsOpen, onChange, props.showTimezone]);
+    var children = props.children, restProps = tslib_1.__rest(props, ["children"]);
+    return (_c = props.children) === null || _c === void 0 ? void 0 : _c.call(props, tslib_1.__assign(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.d.ts

@@ -1,7 +1,8 @@
-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 StyledFooter: import("../style/styled").StyledComponent;
-export declare const StyledFooterBeforeEnhancer: import("../style/styled").StyledComponent;
-export declare const getCalendarContainerStyles: StyleFn<SharedStyleProps>;
+import { ClassName, Styles } from '../types';
+export declare const StyledInputWrapper: import("../style").StyledComponent;
+export declare const getInputPaddingX: (size: any) => "px-1.75" | "px-2.75";
+export declare const getInputPaddingY: (size: any) => "py-2" | "py-1.5" | "py-0.75" | "py-2.5";
+export declare const getDayStyles: (todaySOD: any) => ClassName;
+export declare const getDayNumberStyles: (todaySOD: any) => Styles;
+export declare const StyledFooter: import("../style").StyledComponent;
+export declare const StyledFooterBeforeEnhancer: import("../style").StyledComponent;