@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/date-picker/Calendar.js

@@ -11,10 +11,12 @@ import { Popover } from '../popover';
 import { Menu, MenuItem } from '../menu';
 import { IconButton } from '../button';
 import { DateTimeContainer } from './DateTimeContainer';
-import { getDayStyles, getCalendarContainerStyles } from './styled-components';
+import { getDayNumberStyles, getDayStyles } from './styled-components';
 import { DEFAULT_FORMAT_STRING } from './constants';
-import { prepareLocale } from './utils';
+import { getTimePartsFromMilliseconds, isDateInTimeRange, prepareLocale } from './utils';
 import { useIsMobileDevice } from '../hooks/useIsMobileDevice';
+import { useLocale } from '../locale';
+import { useStyle } from '../style';
 var MonthYearSelectMenu = function (props) {
     var _a = __read(useState(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
     var onItemSelect = props.onItemSelect;
@@ -23,12 +25,7 @@ var MonthYearSelectMenu = function (props) {
         onItemSelect({ item: item, event: event });
         setHighlightedIndex(index);
     }, [onItemSelect]);
-    return (_jsx(Menu, __assign({ className: [
-            'overflow-y-scroll',
-            {
-                maxHeight: '25rem',
-            },
-        ] }, { children: props.items.map(function (item, index) { return (_jsx(MenuItem, __assign({ selected: index === highlightedIndex, onClick: function (event) { return onClick({ item: item, event: event, index: index }); }, role: "option" }, { children: item.label }), item.id)); }) }), void 0));
+    return (_jsx(Menu, __assign({ className: "overflow-y-scroll max-h-62.5" }, { children: props.items.map(function (item, index) { return (_jsx(MenuItem, __assign({ selected: index === highlightedIndex, onClick: function (event) { return onClick({ item: item, event: event, index: index }); }, role: "option" }, { children: item.label }), item.id)); }) })));
 };
 var isHiddenPaginationButton = function (direction, order, monthsShown) {
     if (direction === 'next') {
@@ -40,26 +37,20 @@ var ArrowButton = function (_a) {
     var $order = _a.$order, monthsShown = _a.monthsShown, direction = _a.direction, nextButtonProps = __rest(_a, ["$order", "monthsShown", "direction"]);
     var isHidden = isHiddenPaginationButton(direction, $order, monthsShown);
     var ChevronIcon = direction === 'next' ? ChevronRight : ChevronLeft;
-    return (_jsx(IconButton, __assign({ className: [
-            'h-6 w-6',
-            isHidden ? 'invisible' : 'visible',
-            function (_a) {
-                var px2rem = _a.px2rem;
-                return ({
-                    minWidth: px2rem(24),
-                });
-            },
-        ] }, nextButtonProps, { children: _jsx(ChevronIcon, { size: 8 }, void 0) }), void 0));
+    return (_jsx(IconButton, __assign({ className: ['h-6 w-6 min-w-6', isHidden ? 'invisible' : 'visible'] }, nextButtonProps, { children: _jsx(ChevronIcon, { size: 12 }) })));
 };
 var Calendar = function (_a) {
     var _b;
-    var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? dateFnsAdapter : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
+    var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? dateFnsAdapter : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, getDefaultTime = _a.getDefaultTime, formatDisplayValue = _a.formatDisplayValue, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn", "getDefaultTime", "formatDisplayValue"]);
+    var locale = useLocale();
     var isMobileDevice = useIsMobileDevice();
+    var getTimeRangesForDate = props.getTimeRangesForDate;
+    var theme = useStyle().theme;
     var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var todaySOD = adapter.startOfDay(new Date());
     var value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
     var monthsShown = isMobileDevice ? 1 : (_b = props.monthsShown) !== null && _b !== void 0 ? _b : 1;
-    var dateFnsLocale = useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
+    var dateFnsLocale = useMemo(function () { return (__assign(__assign({}, prepareLocale(props.locale, { weekStartsOn: weekStartsOn })), { datePickerLocale: locale.datePicker })); }, [weekStartsOn, props.locale, locale.datePicker]);
     var setTime = useCallback(function (_a) {
         var date = _a.date, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
         return dateHelpers.setSeconds(dateHelpers.setMinutes(dateHelpers.setHours(date, hours), minutes), seconds);
@@ -90,7 +81,23 @@ var Calendar = function (_a) {
         }
         else {
             var nextDate = date;
-            if (props.value && date && props.timeSelectStart) {
+            if (getTimeRangesForDate && date && props.timeSelectStart) {
+                var ranges = getTimeRangesForDate(date);
+                if (!Array.isArray(props.value) && props.value && isDateInTimeRange(props.value, ranges)) {
+                    nextDate = setTime({
+                        date: nextDate,
+                        hours: adapter.getHours(props.value),
+                        minutes: adapter.getMinutes(props.value),
+                        seconds: adapter.getSeconds(props.value),
+                    });
+                }
+                else {
+                    var from = ranges[0].from;
+                    var _c = getTimePartsFromMilliseconds(from), hours = _c.hours, minutes = _c.minutes, seconds = _c.seconds;
+                    nextDate = setTime({ date: nextDate, hours: hours, minutes: minutes, seconds: seconds });
+                }
+            }
+            else if (props.value && date && props.timeSelectStart) {
                 nextDate = setTime({
                     date: nextDate,
                     hours: adapter.getHours(props.value),
@@ -98,6 +105,9 @@ var Calendar = function (_a) {
                     seconds: adapter.getSeconds(props.value),
                 });
             }
+            else if (getDefaultTime) {
+                nextDate = getDefaultTime(date);
+            }
             else {
                 nextDate = adapter.startOfDay(date);
             }
@@ -105,7 +115,7 @@ var Calendar = function (_a) {
                 date: nextDate,
             });
         }
-    }, [adapter, onChange, props.value, setTime, props.timeSelectStart]);
+    }, [adapter, onChange, props.value, setTime, props.timeSelectStart, getDefaultTime, getTimeRangesForDate]);
     var convertedOverrides = useMemo(function () {
         return mergeOverrides({
             MonthYearSelectPopover: {
@@ -116,57 +126,31 @@ var Calendar = function (_a) {
                 },
             },
             NextButton: {
-                component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0)); },
+                component: ArrowButton,
+                props: { monthsShown: monthsShown, direction: 'next', 'aria-label': locale.datePicker.nextMonth },
             },
             PrevButton: {
-                component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
+                component: ArrowButton,
+                props: { monthsShown: monthsShown, direction: 'previous', 'aria-label': locale.datePicker.previousMonth },
             },
             MonthYearSelectStatefulMenu: {
                 // @ts-ignore
                 component: MonthYearSelectMenu,
             },
             CalendarContainer: {
-                style: getCalendarContainerStyles,
                 props: {
                     'data-testid': 'calendar-container',
+                    'aria-roledescription': locale.datePicker.ariaRoleDescCalMonth,
                 },
             },
             WeekdayHeader: {
-                style: [
-                    'text-12 font-normal leading-8 spr-text-01',
-                    function (_a) {
-                        var theme = _a.theme;
-                        return theme.density === 'COMPACT'
-                            ? {
-                                width: '30px',
-                                height: '30px',
-                            }
-                            : 'w-9 h-9';
-                    },
-                ],
+                className: theme.density === 'COMPACT' ? 'w-7.5 h-7.5' : 'w-9 h-9',
                 props: {
                     'data-testid': 'week-day-header',
                 },
             },
-            MonthHeader: {
-                style: [
-                    function (_a) {
-                        var theme = _a.theme;
-                        return ({
-                            borderBottomColor: theme.spr.border02,
-                            borderBottomStyle: 'solid',
-                            borderBottomWidth: theme.borderWidth.default,
-                            color: theme.spr.text01,
-                        });
-                    },
-                    'block text-center',
-                ],
-            },
             Root: {
-                style: [function (_a) {
-                        var theme = _a.theme;
-                        return (__assign({}, theme.typography.bl3));
-                    }, 'p-0'],
+                props: { 'aria-label': locale.datePicker.ariaLabelCalendar },
             },
             TimeSelectContainer: {
                 props: {
@@ -181,24 +165,25 @@ var Calendar = function (_a) {
                     locale: dateFnsLocale,
                     minDate: props.minDate,
                     maxDate: props.maxDate,
+                    getTimeRangesForDate: props.getTimeRangesForDate,
+                    formatString: formatString,
                 },
-                // @ts-ignore
+                // @ts-ignore -- monthsShown and onChange added from props
                 component: DateTimeContainer,
             },
             Day: {
-                style: getDayStyles(todaySOD),
-            },
-            MonthContainer: {
-                style: 'flex-row',
+                className: getDayStyles(todaySOD),
+                // @ts-ignore
+                style: { '--sw-outline-color': theme.spr.border06 },
             },
-            CalendarHeader: {
-                style: 'flex justify-between py-3 px-4',
+            DayNumber: {
+                style: getDayNumberStyles(todaySOD),
             },
-            MonthYearSelectButton: {
-                style: 'typography-bs1 p-0 h-auto',
+            MonthContainer: {
+                className: 'flex-row',
             },
             Week: {
-                style: 'mb-1',
+                className: 'mb-1',
             },
         }, overrides);
     }, [
@@ -214,9 +199,14 @@ var Calendar = function (_a) {
         timeSelectStart,
         todaySOD,
         value,
+        locale,
+        props.getTimeRangesForDate,
+        theme,
+        formatString,
     ]);
     return (_jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
         //@ts-ignore baseweb has type inconsistency in declaration file
-        density: DENSITY.high }), void 0));
+        density: DENSITY.high, formatDisplayValue: formatDisplayValue })));
 };
+Calendar.__standard = 'Component';
 export default Calendar;

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import DateHelpers from '../baseui/datepicker/utils/date-helpers';
-export declare const isDateValid: (value: any) => boolean;
-declare type DateInputProps = {
+import type DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import type { InputSize } from '../input/types';
+export declare const isDateValid: (value: number) => boolean;
+export declare const isMonthValid: (value: number) => boolean;
+type DateInputProps = {
     locale?: any;
     dateHelpers: DateHelpers<Date>;
     onChange: (date: Date) => void;
@@ -9,6 +11,11 @@ declare type DateInputProps = {
     minDate?: Date;
     maxDate?: Date;
     disabled?: boolean;
+    size?: InputSize;
+    formatString?: string;
 };
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, locale }: DateInputProps) => JSX.Element>;
+/**
+ * This component renders the Date dropdown inside the DatePicker Popover.
+ */
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, size, formatString, }: DateInputProps) => JSX.Element>;
 export {};

package/esm/date-picker/DateInput.js

@@ -1,16 +1,20 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import _times from 'lodash/times';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 import InputMask from 'react-input-mask';
-import { borderColor, borderRadius } from '../helpers/longHandHelpers';
+import { Box } from '../box';
+import { borderRadius } from '../helpers/longHandHelpers';
 import { Input } from '../input';
-import { AutosizeInput } from '../baseui/select';
 import { isDayInRange } from './utils';
-import { Box } from '../box';
-import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
+import { getDefaultSize, getComponentSizeTheme } from '../helpers/themeHelpers';
 import { useTheme } from '../theme';
+import { input$Size } from '../input/cvaConfigs';
+import { inputStyleVariables } from '../input/styled-components';
+import { FieldIcon } from './InputFieldIcon';
+import CalendarSolid from '../icon/components/calendar-solid';
+import { isDDMM } from '../date-input/utils';
+import { DEFAULT_FORMAT_STRING } from './constants';
 var COMMON_STYLE = [
     'px-0 py-0 rounded-2 text-center tabular-nums',
     function (_a) {
@@ -18,56 +22,40 @@ var COMMON_STYLE = [
         return (theme.density === 'COMPACT' ? 'body-16' : '');
     },
 ];
-var DATE_CLASSNAME = [
-    'text-center flex-none',
-    {
-        maxWidth: '1.9rem',
-    },
-];
+var DATE_CLASSNAME = ['text-center flex-none max-w-4.75'];
 var DATE_OVERRIDES = {
     InputContainer: {
-        style: 'border-0',
+        className: 'border-0',
     },
     Input: {
-        style: COMMON_STYLE,
+        className: COMMON_STYLE,
         props: {
             'data-testid': 'date-spin-input',
         },
     },
 };
+var MONTH_CLASSNAME = ['text-center flex-none max-w-[--sw-max-width]'];
+var MONTH_STYLE = {
+    '--sw-max-width': '2.6rem',
+};
 var MONTH_OVERRIDES = {
+    InputContainer: {
+        className: 'border-0',
+    },
     Input: {
-        component: function (_a) {
-            var $width = _a.$width, props = __rest(_a, ["$width"]);
-            return (_jsx(Input, __assign({}, props, { className: [{ width: $width }, 'text-center flex-none', props.className] }), void 0));
-        },
+        className: COMMON_STYLE,
         props: {
-            overrides: {
-                InputContainer: {
-                    style: 'border-0',
-                },
-                Input: {
-                    style: COMMON_STYLE,
-                    props: {
-                        'data-testid': 'month-spin-input',
-                    },
-                },
-            },
+            'data-testid': 'month-spin-input',
         },
     },
 };
-var YEAR_CLASSNAME = [
-    'text-center flex-none',
-    {
-        maxWidth: '3.7rem',
-    },
-];
+var YEAR_CLASSNAME = ['text-center flex-none max-w-9.25'];
 var YEAR_OVERRIDES = {
     InputContainer: {
-        style: 'border-0',
+        className: 'border-0',
     },
     Input: {
-        style: COMMON_STYLE,
+        className: COMMON_STYLE,
         props: {
             'data-testid': 'year-spin-input',
         },
@@ -75,17 +63,23 @@ var YEAR_OVERRIDES = {
 };
 var MIN_YEAR = 1900;
 var MAX_YEAR = 2100;
+var MIN_MONTH = 1;
+var MAX_MONTH = 12;
 export var isDateValid = function (value) { return value > 0 && value <= 31; };
+export var isMonthValid = function (value) { return value >= MIN_MONTH && value <= MAX_MONTH; };
+/**
+ * This component renders the Date dropdown inside the DatePicker Popover.
+ */
 export var DateInput = React.memo(
 // eslint-disable-next-line max-statements -- works for functional component
 function (_a) {
-    var _b;
-    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, locale = _a.locale;
+    var _b, _c, _d, _e;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, size = _a.size, _f = _a.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f;
     var theme = useTheme().theme;
-    var _c = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _c[0], setDay = _c[1];
-    var _d = __read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _d[0], setYear = _d[1];
-    var _e = __read(React.useState(false), 2), error = _e[0], setError = _e[1];
-    var monthLabels = React.useMemo(function () { return _times(12, Number).map(function (month) { return dateHelpers.getMonthInLocale(month, locale); }); }, [dateHelpers, locale]);
+    var _g = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _g[0], setDay = _g[1];
+    var _h = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'MM') : ''); }), 2), month = _h[0], setMonth = _h[1];
+    var _j = __read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _j[0], setYear = _j[1];
+    var _k = __read(React.useState(false), 2), error = _k[0], setError = _k[1];
     var minAllowedDate = 1;
     var maxAllowedDate = getDaysInMonth(date || new Date());
     var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
@@ -98,6 +92,7 @@ function (_a) {
             setError(true);
         }
         setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+        setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
         setYear(date ? dateHelpers.getYear(date) : '');
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
@@ -109,18 +104,22 @@ function (_a) {
             setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
         }
     };
-    var dateBlur = function (event) {
+    var dateBlur = function (_event) {
         setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
     };
+    // Match main: derive a number via Number(raw), not parseInt. For mask partials like "1_",
+    // Number returns NaN so we do not commit; parseInt("1_") === 1 incorrectly committed day 1.
     var dayChange = function (event) {
-        setDay(event.target.value);
-        if (event.target.value >= minAllowedDate && event.target.value <= maxAllowedDate) {
-            updateDate(event.target.value);
+        var raw = event.target.value;
+        setDay(raw);
+        var num = Number(raw);
+        if (!Number.isNaN(num) && num >= minAllowedDate && num <= maxAllowedDate) {
+            updateDate(num);
         }
     };
     var dateKeyDown = function (event) {
         var key = event.key;
-        var _value = parseInt(event.target.value, 10);
+        var _value = parseInt(event.target.value);
         if (key === 'ArrowDown' || key === 'ArrowUp') {
             event.preventDefault(); //to prevent arrow keys to change pointer in input field
             var nextDate = (_value || 0) + (key === 'ArrowDown' ? -1 : 1);
@@ -133,30 +132,40 @@ function (_a) {
             updateDate(nextDate);
         }
     };
-    var changeMonth = function (sign) {
-        var currentMonthIndex = dateHelpers.getMonth(date || new Date());
-        var nextMonth = currentMonthIndex + sign;
-        var newDate = dateHelpers.setMonth(date || new Date(), (nextMonth + monthLabels.length) % monthLabels.length);
-        onChange(newDate);
+    var updateMonth = function (nextMonth) {
+        if (isMonthValid(nextMonth)) {
+            var newDate = dateHelpers.setMonth(date || new Date(), nextMonth - 1);
+            onChange(newDate);
+        }
+        else {
+            setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
+        }
+    };
+    var monthBlur = function (_event) {
+        setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
+    };
+    // Same rules as dayChange: Number(raw) rejects partial mask values like "1_".
+    var monthChange = function (event) {
+        var raw = event.target.value;
+        setMonth(raw);
+        var num = Number(raw);
+        if (!Number.isNaN(num) && num >= MIN_MONTH && num <= MAX_MONTH) {
+            updateMonth(num);
+        }
     };
     var monthKeyDown = function (event) {
         var key = event.key;
+        var _value = parseInt(event.target.value);
         if (key === 'ArrowDown' || key === 'ArrowUp') {
             event.preventDefault(); //to prevent arrow keys to change pointer in input field
-            changeMonth(key === 'ArrowDown' ? -1 : 1);
-        }
-        else {
-            var monthLabel_1 = event.key.toLowerCase();
-            var currentMonthIndex_1 = dateHelpers.getMonth(date || new Date());
-            var monthIndex = monthLabels.findIndex(function (month, index) { return index > currentMonthIndex_1 && monthLabel_1 === month[0].toLowerCase(); });
-            if (monthIndex === -1) {
-                monthIndex = monthLabels.findIndex(function (month) { return monthLabel_1 === month[0].toLowerCase(); });
+            var nextMonth = (_value || 0) + (key === 'ArrowDown' ? -1 : 1);
+            if (nextMonth === MIN_MONTH - 1) {
+                nextMonth = MAX_MONTH;
             }
-            if (monthIndex === -1 || monthIndex === currentMonthIndex_1) {
-                return;
+            else if (nextMonth === MAX_MONTH + 1) {
+                nextMonth = MIN_MONTH;
             }
-            var newDate = dateHelpers.setMonth(date || new Date(), monthIndex);
-            onChange(newDate);
+            updateMonth(nextMonth);
         }
     };
     // year
@@ -180,7 +189,7 @@ function (_a) {
     };
     var yearKeyDown = function (event) {
         var key = event.key;
-        var _value = parseInt(event.target.value, 10);
+        var _value = parseInt(event.target.value);
         if (key === 'ArrowDown' || key === 'ArrowUp') {
             event.preventDefault(); //to prevent arrow keys to change pointer in input field
             var nextYear = (_value || minYear) + (key === 'ArrowDown' ? -1 : 1);
@@ -193,10 +202,34 @@ function (_a) {
             updateYear(nextYear);
         }
     };
-    var month = date ? dateHelpers.formatDate(date, 'MMM', locale) : '';
-    var inputSizeTheme = getComponentSizeTheme(theme, 'input', undefined, getDefaultSize(theme));
+    var defaultSize = getDefaultSize(theme);
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', size, defaultSize);
+    var inputClasses = input$Size[size !== null && size !== void 0 ? size : defaultSize];
+    var inputStyles = inputStyleVariables({ theme: theme }, { $size: size });
     return (_jsxs(Box, __assign({ "data-testid": "date-input", className: [
-            'px-3 flex items-center border-1 border-solid border-box',
-            __assign(__assign(__assign(__assign({}, borderColor(error ? theme.spr.supportError : theme.spr.ui03)), borderRadius((_b = inputSizeTheme.borderRadius) !== null && _b !== void 0 ? _b : theme.input.borderRadius)), { paddingLeft: inputSizeTheme.paddingX, paddingRight: inputSizeTheme.paddingX, paddingTop: inputSizeTheme.paddingY, paddingBottom: inputSizeTheme.paddingY }), (disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 })),
-        ] }, { children: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(AutosizeInput, { value: month, onKeyDown: monthKeyDown, disabled: disabled, "$searchable": true, placeholder: "MM", size: "sm", overrides: MONTH_OVERRIDES }, void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
+            'px-3 flex items-center border-1 border-solid border-box rounded-8',
+            error ? 'spr-support-error-border' : 'spr-border-03',
+            disabled ? 'spr-ui-02' : 'spr-ui-01',
+            inputClasses,
+            'pl-2',
+            __assign(__assign(__assign({}, (((_b = inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.borderRadius) !== null && _b !== void 0 ? _b : (_c = theme.input) === null || _c === void 0 ? void 0 : _c.borderRadius)
+                ? borderRadius((_d = inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.borderRadius) !== null && _d !== void 0 ? _d : (_e = theme.input) === null || _e === void 0 ? void 0 : _e.borderRadius)
+                : {})), ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.paddingX)
+                ? {
+                    paddingInlineStart: inputSizeTheme.paddingX,
+                    paddingInlineEnd: inputSizeTheme.paddingX,
+                }
+                : {})), ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.paddingY)
+                ? {
+                    paddingBlockStart: inputSizeTheme.paddingY,
+                    paddingBlockEnd: inputSizeTheme.paddingY,
+                }
+                : {})),
+        ], style: inputStyles }, { children: [_jsx(FieldIcon, { icon: CalendarSolid, disabled: disabled }), (function (isDayFirst) {
+                var DayInputMask = (_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "small", disabled: disabled }))); } })));
+                var MonthInputMask = (_jsx(InputMask, __assign({ onBlur: monthBlur, onKeyDown: monthKeyDown, mask: "99", value: month, onChange: monthChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, style: MONTH_STYLE, overrides: MONTH_OVERRIDES, placeholder: "mm", size: "small", disabled: disabled }))); } })));
+                if (isDayFirst)
+                    return [DayInputMask, '/', MonthInputMask];
+                return [MonthInputMask, '/', DayInputMask];
+            })(isDDMM(formatString)), "/", _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "small", disabled: disabled }))); } }))] })));
 });

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

@@ -1,3 +1,6 @@
 import { ReactElement } from 'react';
 import { DatePickerProps } from './types';
-export declare const DatePicker: (props: DatePickerProps) => ReactElement;
+export declare const DatePicker: {
+    (props: DatePickerProps): ReactElement;
+    __standard: string;
+};

package/esm/date-picker/DatePicker.js

@@ -2,4 +2,5 @@ import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import StatefulContainer from './stateful-container';
 import { StatelessDatePicker } from './StatelessDatePicker';
-export var DatePicker = function (props) { return (_jsx(StatefulContainer, __assign({}, props, { value: props.value }, { children: function (extendedProps) { return _jsx(StatelessDatePicker, __assign({}, extendedProps), void 0); } }), void 0)); };
+export var DatePicker = function (props) { return (_jsx(StatefulContainer, __assign({}, props, { value: props.value }, { children: function (extendedProps) { return _jsx(StatelessDatePicker, __assign({}, extendedProps)); } }))); };
+DatePicker.__standard = 'Component';

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

@@ -1,15 +1,19 @@
-import * as React from 'react';
-import { DatepickerOverrides, CalendarProps, Nullable } from './types';
-declare type DatePickerContentProps = Omit<CalendarProps, 'timeSelectEnd' | 'timeSelectStart' | 'onChange'> & {
-    overrides?: DatepickerOverrides;
-    timeSelect?: boolean;
+/// <reference types="react" />
+import type { TimezonePickerProps } from '../time-zone-picker';
+import type { DatepickerOverrides, CalendarProps, Nullable } from './types';
+export declare const DatePickerContent: import("react").ForwardRefExoticComponent<Omit<CalendarProps, "onChange" | "timeSelectStart" | "timeSelectEnd"> & {
+    overrides?: DatepickerOverrides | undefined;
+    timeSelect?: boolean | undefined;
     onClose: () => void;
-    showTimezone?: boolean;
+    showTimezone?: boolean | undefined;
     timezone: string;
+    timezoneOptions?: TimezonePickerProps['timezoneOptions'];
     onChange: (params: {
         date?: Nullable<Date>[] | Nullable<Date>;
         timezone?: string;
+        shouldClosePopover?: boolean;
     }) => void;
-};
-export declare const DatePickerContent: ({ value: _value, onChange, overrides, autoFocusCalendar, onClose, adapter, showTimezone, timezone: _timezone, ...props }: DatePickerContentProps) => React.ReactElement;
-export {};
+    disableTimezoneSwitch?: boolean | undefined;
+    tabIndex?: number | undefined;
+    formatDisplayValue?: ((date: Date | undefined) => string) | undefined;
+} & import("react").RefAttributes<HTMLElement>>;