@stenajs-webui/calendar 15.0.0-alpha.4 → 15.0.0-alpha.8

package/dist/index.js

@@ -14,14 +14,14 @@ var faAngleDoubleLeft = require('@fortawesome/free-solid-svg-icons/faAngleDouble
 var faAngleDoubleRight = require('@fortawesome/free-solid-svg-icons/faAngleDoubleRight');
 var faCaretLeft = require('@fortawesome/free-solid-svg-icons/faCaretLeft');
 var faCaretRight = require('@fortawesome/free-solid-svg-icons/faCaretRight');
-var faCalendarAlt = require('@fortawesome/free-solid-svg-icons/faCalendarAlt');
+var faCalendarAlt = require('@fortawesome/free-regular-svg-icons/faCalendarAlt');
 var forms = require('@stenajs-webui/forms');
 var tooltip = require('@stenajs-webui/tooltip');
+var faCalendarAlt$1 = require('@fortawesome/free-solid-svg-icons/faCalendarAlt');
 var theme = require('@stenajs-webui/theme');
 var faLongArrowAltRight = require('@fortawesome/free-solid-svg-icons/faLongArrowAltRight');
 var faClock = require('@fortawesome/free-solid-svg-icons/faClock');
 var faClock$1 = require('@fortawesome/free-regular-svg-icons/faClock');
-var faCalendarAlt$1 = require('@fortawesome/free-regular-svg-icons/faCalendarAlt');
 var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -176,11 +176,13 @@ var addDayStateHighlights = function (calendarState, date, highlights) {
         calendarState[monthString] &&
         calendarState[monthString][weekNumber] &&
         calendarState[monthString][weekNumber][dayInMonth];
-    var newHighlights = dayState && dayState.highlights
-        ? __spreadArray(__spreadArray([], dayState.highlights, true), highlights, true) : highlights;
     return __assign(__assign({}, calendarState), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = __assign(__assign({}, (calendarState &&
         calendarState[monthString] &&
-        calendarState[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = __assign(__assign({}, dayState), { highlights: newHighlights }), _c)), _b)), _a));
+        calendarState[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = addDayStateHighlightsOnSingleDay(dayState, highlights), _c)), _b)), _a));
+};
+var addDayStateHighlightsOnSingleDay = function (dayState, highlights) {
+    var _a;
+    return __assign(__assign({}, dayState), { highlights: __spreadArray(__spreadArray([], ((_a = dayState === null || dayState === void 0 ? void 0 : dayState.highlights) !== null && _a !== void 0 ? _a : []), true), highlights, true) });
 };
 var addWeekStateHighlights = function (calendarState, week, highlights) {
     var _a, _b;
@@ -428,6 +430,26 @@ var defaultCalendarTheme = {
 };
 var extranetCalendarTheme = __assign(__assign({}, defaultCalendarTheme), { width: "37px", height: "37px" });
 
+var isDateInMinMaxRange = function (date, min, max) {
+    if (min && dateFns.isBefore(date, min)) {
+        return dateFns.isSameDay(date, min);
+    }
+    if (max && dateFns.isAfter(date, max)) {
+        return dateFns.isSameDay(date, max);
+    }
+    return true;
+};
+
+var DisabledDayWrapper = function DisabledDayWrapper(_a) {
+    var DayComponent = _a.dayComponent, minDate = _a.minDate, maxDate = _a.maxDate, dayState = _a.dayState, day = _a.day, props = __rest(_a, ["dayComponent", "minDate", "maxDate", "dayState", "day"]);
+    var activeDayState = React.useMemo(function () {
+        return !isDateInMinMaxRange(day.date, minDate, maxDate)
+            ? addDayStateHighlightsOnSingleDay(dayState, ["disabled"])
+            : dayState;
+    }, [day.date, dayState, maxDate, minDate]);
+    return React__namespace.createElement(DayComponent, __assign({ day: day }, props, { dayState: activeDayState }));
+};
+
 var WeekNumberCell = function (_a) {
     var onClickWeek = _a.onClickWeek, theme = _a.theme, week = _a.week, background = _a.background, backgroundColor = _a.backgroundColor, prefix = _a.prefix;
     var content = (React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
@@ -442,10 +464,10 @@ var WeekNumberCell = function (_a) {
 };
 
 function CalendarWeek(_a) {
-    var week = _a.week, month = _a.month, DayComponent = _a.dayComponent, statePerWeekDay = _a.statePerWeekDay, userDataPerWeekDay = _a.userDataPerWeekDay, onClickWeek = _a.onClickWeek, onClickDay = _a.onClickDay, theme = _a.theme, renderWeekNumber = _a.renderWeekNumber, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
+    var week = _a.week, month = _a.month, dayComponent = _a.dayComponent, statePerWeekDay = _a.statePerWeekDay, userDataPerWeekDay = _a.userDataPerWeekDay, minDate = _a.minDate, maxDate = _a.maxDate, onClickWeek = _a.onClickWeek, onClickDay = _a.onClickDay, theme = _a.theme, renderWeekNumber = _a.renderWeekNumber, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
     return (React__namespace.createElement("tr", { key: week.weekNumber },
         theme.WeekNumber.show && (React__namespace.createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (React__namespace.createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
-        week.days.map(function (day) { return (React__namespace.createElement(DayComponent, { key: day.dateString, day: day, week: week, month: month, dayState: statePerWeekDay && statePerWeekDay[day.dayOfMonth], userData: userDataPerWeekDay && userDataPerWeekDay[day.dayOfMonth], onClickDay: onClickDay, theme: theme, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights })); })));
+        week.days.map(function (day) { return (React__namespace.createElement(DisabledDayWrapper, { dayComponent: dayComponent, key: day.dateString, day: day, week: week, month: month, dayState: statePerWeekDay && statePerWeekDay[day.dayOfMonth], userData: userDataPerWeekDay && userDataPerWeekDay[day.dayOfMonth], onClickDay: onClickDay, theme: theme, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDate, maxDate: maxDate })); })));
 }
 
 var WeekDayCell = function (_a) {
@@ -460,7 +482,7 @@ var WeekDayCell = function (_a) {
     return content;
 };
 
-var CalendarDay = function (_a) {
+var CalendarDay = function CalendarDay(_a) {
     var day = _a.day, week = _a.week, month = _a.month, dayState = _a.dayState, userData = _a.userData, onClickDay = _a.onClickDay, theme = _a.theme, ExtraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
     var content = (React__namespace.createElement(core.Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
         React__namespace.createElement(core.Text, __assign({}, (theme.CalendarDay.textProps &&
@@ -482,7 +504,7 @@ var isClickable = function (defaultHighlights, dayState) {
 };
 
 function CalendarMonth(_a) {
-    var month = _a.month, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, statePerWeek = _a.statePerWeek, userDataPerWeek = _a.userDataPerWeek, onClickDay = _a.onClickDay, onClickWeek = _a.onClickWeek, onClickWeekDay = _a.onClickWeekDay, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekNumber = _a.renderWeekNumber, renderWeekDay = _a.renderWeekDay, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
+    var month = _a.month, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, statePerWeek = _a.statePerWeek, userDataPerWeek = _a.userDataPerWeek, minDate = _a.minDate, maxDate = _a.maxDate, onClickDay = _a.onClickDay, onClickWeek = _a.onClickWeek, onClickWeekDay = _a.onClickWeekDay, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekNumber = _a.renderWeekNumber, renderWeekDay = _a.renderWeekDay, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
     var showWeekNumber = theme.WeekNumber.show;
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(core.Box, { alignItems: "stretch" },
@@ -500,7 +522,7 @@ function CalendarMonth(_a) {
                             React__namespace.createElement(core.Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
                                 React__namespace.createElement(core.Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
                         month.weeks[0].days.map(function (day) { return (React__namespace.createElement("td", { key: day.name }, renderWeekDay ? (renderWeekDay(day.name, theme, onClickWeekDay)) : (React__namespace.createElement(WeekDayCell, { day: day, onClickWeekDay: onClickWeekDay, theme: theme })))); })),
-                    month.weeks.map(function (week) { return (React__namespace.createElement(CalendarWeek, { key: week.weekNumber, month: month, week: week, dayComponent: dayComponent, statePerWeekDay: statePerWeek && statePerWeek[week.weekNumber], userDataPerWeekDay: userDataPerWeek && userDataPerWeek[week.weekNumber], onClickDay: onClickDay, onClickWeek: onClickWeek, theme: theme, renderWeekNumber: renderWeekNumber, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights })); }))))));
+                    month.weeks.map(function (week) { return (React__namespace.createElement(CalendarWeek, { key: week.weekNumber, month: month, week: week, dayComponent: dayComponent, statePerWeekDay: statePerWeek && statePerWeek[week.weekNumber], userDataPerWeekDay: userDataPerWeek && userDataPerWeek[week.weekNumber], onClickDay: onClickDay, onClickWeek: onClickWeek, theme: theme, renderWeekNumber: renderWeekNumber, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDate, maxDate: maxDate })); }))))));
 }
 
 function styleInject(css, ref) {
@@ -535,11 +557,13 @@ var styles$1 = {"calendar":"Calendar-module_calendar__Ztvgm"};
 styleInject(css_248z$1);
 
 function CalendarPanel(_a) {
-    var monthRows = _a.monthRows, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, userDataPerMonth = _a.userDataPerMonth, statePerMonth = _a.statePerMonth, onClickDay = _a.onClickDay, onClickWeekDay = _a.onClickWeekDay, onClickWeek = _a.onClickWeek, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekDay = _a.renderWeekDay, renderWeekNumber = _a.renderWeekNumber, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c;
+    var monthRows = _a.monthRows, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, userDataPerMonth = _a.userDataPerMonth, statePerMonth = _a.statePerMonth, minDate = _a.minDate, maxDate = _a.maxDate, onClickDay = _a.onClickDay, onClickWeekDay = _a.onClickWeekDay, onClickWeek = _a.onClickWeek, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekDay = _a.renderWeekDay, renderWeekNumber = _a.renderWeekNumber, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c;
+    var minDateObj = React.useMemo(function () { return (minDate ? dateFns.parse(minDate, "yyyy-MM-dd", new Date()) : undefined); }, [minDate]);
+    var maxDateObj = React.useMemo(function () { return (maxDate ? dateFns.parse(maxDate, "yyyy-MM-dd", new Date()) : undefined); }, [maxDate]);
     return (React__namespace.createElement("div", { className: styles$1.calendar }, monthRows.map(function (monthRow, rowIndex) { return (React__namespace.createElement(core.Spacing, { key: rowIndex },
         React__namespace.createElement(core.Row, null, monthRow.map(function (month, index) { return (React__namespace.createElement(React__namespace.Fragment, { key: month.name },
             index > 0 && React__namespace.createElement(core.Space, null),
-            React__namespace.createElement(CalendarMonth, { month: month, dayComponent: dayComponent, userDataPerWeek: userDataPerMonth && userDataPerMonth[month.monthString], statePerWeek: statePerMonth && statePerMonth[month.monthString], onClickDay: onClickDay, onClickWeekDay: onClickWeekDay, onClickWeek: onClickWeek, onClickMonth: onClickMonth, onClickYear: onClickYear, theme: theme, renderWeekNumber: renderWeekNumber, renderWeekDay: renderWeekDay, headerLeftContent: headerLeftContent, headerRightContent: headerRightContent, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights }))); })))); })));
+            React__namespace.createElement(CalendarMonth, { month: month, dayComponent: dayComponent, userDataPerWeek: userDataPerMonth && userDataPerMonth[month.monthString], statePerWeek: statePerMonth && statePerMonth[month.monthString], onClickDay: onClickDay, onClickWeekDay: onClickWeekDay, onClickWeek: onClickWeek, onClickMonth: onClickMonth, onClickYear: onClickYear, theme: theme, renderWeekNumber: renderWeekNumber, renderWeekDay: renderWeekDay, headerLeftContent: headerLeftContent, headerRightContent: headerRightContent, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDateObj, maxDate: maxDateObj }))); })))); })));
 }
 function Calendar(props) {
     var initialDate = getInitialDate(props.year, props.month, props.date);
@@ -796,97 +820,65 @@ var fallbackIfNoPlacement = function (monthSwitcherPlacement, numMonths) {
     return monthSwitcherPlacement || (numMonths || 1) > 1 ? "below" : "header";
 };
 
-var transformDateIntervalToDateStringInterval = function (interval) { return ({
-    startDate: interval.startDate && dateFns.format(interval.startDate, DateFormats.fullDate),
-    endDate: interval.endDate && dateFns.format(interval.endDate, DateFormats.fullDate),
+var dateRangeToStrings = function (dateRange) { return ({
+    startDate: dateRange.startDate
+        ? dateFns.format(dateRange.startDate, "yyyy-MM-dd")
+        : undefined,
+    endDate: dateRange.endDate
+        ? dateFns.format(dateRange.endDate, "yyyy-MM-dd")
+        : undefined,
 }); };
-var transformDateStringIntervalToDateInterval = function (interval) {
+var stringsToDateRange = function (_a) {
+    var startDate = _a.startDate, endDate = _a.endDate;
     var now = new Date();
     return {
-        startDate: (interval.startDate &&
-            dateFns.parse(interval.startDate, DateFormats.fullDate, now)) ||
-            undefined,
-        endDate: (interval.endDate &&
-            dateFns.parse(interval.endDate, DateFormats.fullDate, now)) ||
-            undefined,
+        startDate: startDate ? dateFns.parse(startDate, "yyyy-MM-dd", now) : undefined,
+        endDate: endDate ? dateFns.parse(endDate, "yyyy-MM-dd", now) : undefined,
     };
+};
+
+var isDateRangeInvalid = function (_a) {
+    var startDate = _a.startDate, endDate = _a.endDate;
+    return Boolean(startDate &&
+        endDate &&
+        !dateFns.isSameDay(startDate, endDate) &&
+        dateFns.isAfter(startDate, endDate));
 };
-var ensureStartIsFirst = function (interval) {
-    if (interval.startDate &&
-        interval.endDate &&
-        dateFns.isAfter(interval.startDate, interval.endDate)) {
+var toggleDatesIfEndIsEarlierThanStart = function (dateRange) {
+    if (isDateRangeInvalid(dateRange)) {
         return {
-            startDate: interval.endDate,
-            endDate: interval.startDate,
+            startDate: dateRange.endDate,
+            endDate: dateRange.startDate,
         };
     }
-    return interval;
+    return dateRange;
+};
+var toggleDateStringsIfEndIsEarlierThanStart = function (dateRange) {
+    if (dateRange.startDate && dateRange.endDate) {
+        return dateRangeToStrings(toggleDatesIfEndIsEarlierThanStart(stringsToDateRange(dateRange)));
+    }
+    return dateRange;
 };
 
-var useDateRangeOnClickDayHandler = function (startDate, setStartDate, endDate, setEndDate, focusedInput, setFocusedInput, onChange) {
+var useDateRangeOnClickDayHandler = function (value, onValueChange, focusedInput, setFocusedInput) {
     return React.useCallback(function (day) {
-        if (focusedInput === "startDate") {
-            if (endDate && dateFns.isAfter(day.date, endDate)) {
-                setStartDate(endDate);
-                setEndDate(day.date);
-                if (onChange) {
-                    onChange({ startDate: endDate, endDate: day.date });
-                }
-            }
-            else {
-                setStartDate(day.date);
-                setFocusedInput("endDate");
-                if (onChange) {
-                    onChange(ensureStartIsFirst({
-                        startDate: day.date,
-                        endDate: endDate,
-                    }));
-                }
-            }
-        }
-        else if (focusedInput === "endDate") {
-            if (startDate && dateFns.isAfter(startDate, day.date)) {
-                setStartDate(day.date);
-                setEndDate(startDate);
-                if (onChange) {
-                    onChange({ startDate: day.date, endDate: startDate });
-                }
-            }
-            else {
-                setEndDate(day.date);
-                setFocusedInput("startDate");
-                if (onChange) {
-                    onChange(ensureStartIsFirst({
-                        startDate: startDate,
-                        endDate: day.date,
-                    }));
-                }
-            }
+        var dateRange = {
+            startDate: focusedInput === "startDate" ? day.date : value === null || value === void 0 ? void 0 : value.startDate,
+            endDate: focusedInput === "endDate" ? day.date : value === null || value === void 0 ? void 0 : value.endDate,
+        };
+        if (!isDateRangeInvalid(dateRange)) {
+            setFocusedInput(focusedInput === "startDate" ? "endDate" : "startDate");
         }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(toggleDatesIfEndIsEarlierThanStart(dateRange));
     }, [
         focusedInput,
-        endDate,
-        startDate,
-        setStartDate,
-        setEndDate,
-        onChange,
+        onValueChange,
         setFocusedInput,
+        value === null || value === void 0 ? void 0 : value.endDate,
+        value === null || value === void 0 ? void 0 : value.startDate,
     ]);
 };
 
-var toggleDatesIfEndIsEarlierThanStart = function (startDate, endDate) {
-    if (startDate && endDate && dateFns.isAfter(startDate, endDate)) {
-        return {
-            startDate: endDate,
-            endDate: startDate,
-        };
-    }
-    return {
-        startDate: startDate,
-        endDate: endDate,
-    };
-};
-
 var useInternalPanelState = function (onChangePanel) {
     var _a = React.useState("calendar"), currentPanel = _a[0], _setCurrentPanel = _a[1];
     var setCurrentPanel = React.useCallback(function (currentPanel) {
@@ -900,14 +892,13 @@ var useInternalPanelState = function (onChangePanel) {
 };
 
 var useDateRangeSelection = function (_a) {
-    var focusedInput = _a.focusedInput, endDate = _a.endDate, startDate = _a.startDate, setStartDate = _a.setStartDate, setEndDate = _a.setEndDate, onChange = _a.onChange, setFocusedInput = _a.setFocusedInput, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
+    var focusedInput = _a.focusedInput, value = _a.value, onValueChange = _a.onValueChange, setFocusedInput = _a.setFocusedInput, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
     var _b = useInternalPanelState(onChangePanel), currentPanel = _b.currentPanel, setCurrentPanel = _b.setCurrentPanel;
     var _c = React.useState(function () { return new Date(); }), dateInFocus = _c[0], setDateInFocus = _c[1];
-    var onClickDay = useDateRangeOnClickDayHandler(startDate, setStartDate, endDate, setEndDate, focusedInput, setFocusedInput, onChange);
-    var dates = React.useMemo(function () { return toggleDatesIfEndIsEarlierThanStart(startDate, endDate); }, [startDate, endDate]);
+    var onClickDay = useDateRangeOnClickDayHandler(value, onValueChange, focusedInput, setFocusedInput);
     var statePerMonthWithSelection = React.useMemo(function () {
-        return buildDayStateForDateRange(statePerMonth, dates.startDate, dates.endDate);
-    }, [statePerMonth, dates]);
+        return buildDayStateForDateRange(statePerMonth, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
+    }, [statePerMonth, value === null || value === void 0 ? void 0 : value.endDate, value === null || value === void 0 ? void 0 : value.startDate]);
     return {
         onClickDay: onClickDay,
         statePerMonth: statePerMonthWithSelection,
@@ -1080,46 +1071,46 @@ var listContainsDate = function (list, date) {
 };
 
 var useDateRangeExclusionSelection = function (_a) {
-    var onChange = _a.onChange, value = _a.value, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
-    var _b = React.useState(), startDate = _b[0], setStartDate = _b[1];
-    var _c = React.useState(), endDate = _c[0], setEndDate = _c[1];
-    var _d = React.useState("startDate"), focusedInput = _d[0], setFocusedInput = _d[1];
-    var _e = useInternalPanelState(onChangePanel), currentPanel = _e.currentPanel, setCurrentPanel = _e.setCurrentPanel;
-    var _f = React.useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _f[0], setDateInFocus = _f[1];
+    var value = _a.value, onValueChange = _a.onValueChange, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
+    var _b = React.useState(), dateRange = _b[0], setDateRange = _b[1];
+    var _c = React.useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
+    var _d = useInternalPanelState(onChangePanel), currentPanel = _d.currentPanel, setCurrentPanel = _d.setCurrentPanel;
+    var _e = React.useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _e[0], setDateInFocus = _e[1];
     var onChangeHandler = React.useCallback(function (value) {
+        setDateRange(value);
         var startDate = value.startDate, endDate = value.endDate;
-        if (onChange) {
+        if (onValueChange) {
             if (startDate && endDate) {
                 var dates = dateFns.eachDayOfInterval({ start: startDate, end: endDate });
-                onChange(dates);
+                onValueChange(dates);
             }
             else if (startDate) {
-                onChange([startDate]);
+                onValueChange([startDate]);
             }
             else if (endDate) {
-                onChange([endDate]);
+                onValueChange([endDate]);
             }
         }
-    }, [onChange]);
-    var onClickDayRange = useDateRangeOnClickDayHandler(startDate, setStartDate, endDate, setEndDate, focusedInput, setFocusedInput, onChangeHandler);
+    }, [onValueChange]);
+    var onClickDayRange = useDateRangeOnClickDayHandler(dateRange, onChangeHandler, focusedInput, setFocusedInput);
     var onClickDay = React.useCallback(function (day, userData, ev) {
-        if (onChange) {
+        if (onValueChange) {
             if (ev.ctrlKey || ev.metaKey) {
                 if (!value) {
-                    onChange([day.date]);
+                    onValueChange([day.date]);
                 }
                 else if (listContainsDate(value, day.date)) {
-                    onChange(removeDateIfExist(value, day.date));
+                    onValueChange(removeDateIfExist(value, day.date));
                 }
                 else {
-                    onChange(__spreadArray(__spreadArray([], value, true), [day.date], false));
+                    onValueChange(__spreadArray(__spreadArray([], value, true), [day.date], false));
                 }
             }
             else {
                 onClickDayRange(day, userData, ev);
             }
         }
-    }, [onChange, onClickDayRange, value]);
+    }, [onValueChange, onClickDayRange, value]);
     var statePerMonthWithSelectedDate = React.useMemo(function () {
         return addHighlighting(statePerMonth, value);
     }, [statePerMonth, value]);
@@ -1186,16 +1177,18 @@ var useDateInput = function (onChange, onClose, openOnMount) {
     };
 };
 
+var defaultMaxDate = "2999-12-31";
+
 var DateInput = function (_a) {
-    var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter date" : _c, value = _a.value, _d = _a.zIndex, zIndex = _d === void 0 ? 100 : _d, _e = _a.calendarTheme, calendarTheme = _e === void 0 ? defaultCalendarTheme : _e, calendarProps = _a.calendarProps, openOnMount = _a.openOnMount, onClose = _a.onClose, onChange = _a.onChange, portalTarget = _a.portalTarget, variant = _a.variant, width = _a.width;
-    var _f = useDateInput(onChange, onClose, openOnMount), hideCalendar = _f.hideCalendar, showingCalendar = _f.showingCalendar, onSelectDate = _f.onSelectDate, showCalendar = _f.showCalendar;
-    var _g = useCalendarPopoverUpdater(), tippyRef = _g.tippyRef, onChangePanel = _g.onChangePanel;
+    var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter date" : _c, value = _a.value, _d = _a.zIndex, zIndex = _d === void 0 ? 100 : _d, _e = _a.calendarTheme, calendarTheme = _e === void 0 ? defaultCalendarTheme : _e, calendarProps = _a.calendarProps, openOnMount = _a.openOnMount, onClose = _a.onClose, onChange = _a.onChange, portalTarget = _a.portalTarget, variant = _a.variant, width = _a.width, minDate = _a.minDate, _f = _a.maxDate, maxDate = _f === void 0 ? defaultMaxDate : _f;
+    var _g = useDateInput(onChange, onClose, openOnMount), hideCalendar = _g.hideCalendar, showingCalendar = _g.showingCalendar, onSelectDate = _g.onSelectDate, showCalendar = _g.showCalendar;
+    var _h = useCalendarPopoverUpdater(), tippyRef = _h.tippyRef, onChangePanel = _h.onChangePanel;
     return (React__namespace.createElement(core.Box, { width: width },
-        React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, content: React__namespace.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel })) },
-            React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt.faCalendarAlt, onFocus: showCalendar, onClickLeft: showCalendar, value: value ? dateFns.format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant }))));
+        React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, content: React__namespace.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel, minDate: minDate, maxDate: maxDate })) },
+            React__namespace.createElement(forms.TextInput, { type: "date", iconRight: faCalendarAlt.faCalendarAlt, onFocus: showCalendar, onClickRight: showCalendar, value: value ? dateFns.format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant, min: minDate, max: maxDate }))));
 };
 
-var useDateRangeInput = function (value, onChange) {
+var useDateRangeInput = function (value, onValueChange) {
     var startDateInputRef = React.useRef(null);
     var endDateInputRef = React.useRef(null);
     var _a = React.useState(false), showingCalendar = _a[0], setShowingCalendar = _a[1];
@@ -1215,11 +1208,11 @@ var useDateRangeInput = function (value, onChange) {
     }, [setShowingCalendar]);
     var onClickDay = React.useCallback(function (day) {
         if (focusedInput === "startDate") {
-            onChange({
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
                 startDate: day.date,
-                endDate: value.endDate,
+                endDate: value === null || value === void 0 ? void 0 : value.endDate,
             });
-            if (!value.endDate) {
+            if (!(value === null || value === void 0 ? void 0 : value.endDate)) {
                 setFocusedInput("endDate");
                 endDateInputRef.current && endDateInputRef.current.focus();
             }
@@ -1228,11 +1221,11 @@ var useDateRangeInput = function (value, onChange) {
             }
         }
         else if (focusedInput === "endDate") {
-            onChange({
-                startDate: value.startDate,
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
+                startDate: value === null || value === void 0 ? void 0 : value.startDate,
                 endDate: day.date,
             });
-            if (!value.startDate) {
+            if (!(value === null || value === void 0 ? void 0 : value.startDate)) {
                 setFocusedInput("startDate");
                 startDateInputRef.current && startDateInputRef.current.focus();
             }
@@ -1240,12 +1233,12 @@ var useDateRangeInput = function (value, onChange) {
                 setTimeout(hideCalendar, 150);
             }
         }
-    }, [focusedInput, onChange, setFocusedInput, hideCalendar, value]);
+    }, [focusedInput, onValueChange, setFocusedInput, hideCalendar, value]);
     var startDateIsAfterEnd = React.useMemo(function () {
-        return value.startDate &&
-            value.endDate &&
+        return (value === null || value === void 0 ? void 0 : value.startDate) &&
+            (value === null || value === void 0 ? void 0 : value.endDate) &&
             dateFns.isAfter(value.startDate, value.endDate);
-    }, [value.startDate, value.endDate]);
+    }, [value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate]);
     return {
         showingCalendar: showingCalendar,
         hideCalendar: hideCalendar,
@@ -1264,24 +1257,26 @@ var useDateRangeInput = function (value, onChange) {
  * @deprecated Please use DateRangeDualTextInput instead.
  */
 var DateRangeInput = function (_a) {
-    var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholderStartDate, placeholderStartDate = _c === void 0 ? "Start date" : _c, _d = _a.placeholderEndDate, placeholderEndDate = _d === void 0 ? "End date" : _d, portalTarget = _a.portalTarget, value = _a.value, onChange = _a.onChange, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, width = _a.width, _f = _a.calendarTheme, calendarTheme = _f === void 0 ? defaultCalendarTheme : _f, calendarProps = _a.calendarProps;
-    var _g = React.useState(function () { var _a; return (_a = (focusedInput && value[focusedInput])) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _g[0], setDateInFocus = _g[1];
-    var _h = React.useState("calendar"), currentPanel = _h[0], setCurrentPanel = _h[1];
-    var _j = useDateRangeInput(value, onChange), hideCalendar = _j.hideCalendar, showCalendarEndDate = _j.showCalendarEndDate, showCalendarStartDate = _j.showCalendarStartDate, showingCalendar = _j.showingCalendar, focusedInput = _j.focusedInput, startDateInputRef = _j.startDateInputRef, endDateInputRef = _j.endDateInputRef, onClickDay = _j.onClickDay, startDateIsAfterEnd = _j.startDateIsAfterEnd;
-    var statePerMonth = React.useMemo(function () { return buildDayStateForDateRange(undefined, value.startDate, value.endDate); }, [value]);
-    return (React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) },
+    var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholderStartDate, placeholderStartDate = _c === void 0 ? "Start date" : _c, _d = _a.placeholderEndDate, placeholderEndDate = _d === void 0 ? "End date" : _d, portalTarget = _a.portalTarget, value = _a.value, onValueChange = _a.onValueChange, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, width = _a.width, _f = _a.calendarTheme, calendarTheme = _f === void 0 ? defaultCalendarTheme : _f, calendarProps = _a.calendarProps, minDate = _a.minDate, _g = _a.maxDate, maxDate = _g === void 0 ? defaultMaxDate : _g;
+    var _h = React.useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _h[0], setDateInFocus = _h[1];
+    var _j = React.useState("calendar"), currentPanel = _j[0], setCurrentPanel = _j[1];
+    var _k = useDateRangeInput(value, onValueChange), hideCalendar = _k.hideCalendar, showCalendarEndDate = _k.showCalendarEndDate, showCalendarStartDate = _k.showCalendarStartDate, showingCalendar = _k.showingCalendar, focusedInput = _k.focusedInput, startDateInputRef = _k.startDateInputRef, endDateInputRef = _k.endDateInputRef, onClickDay = _k.onClickDay, startDateIsAfterEnd = _k.startDateIsAfterEnd;
+    var statePerMonth = React.useMemo(function () {
+        return buildDayStateForDateRange(undefined, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
+    }, [value]);
+    return (React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React__namespace.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) },
         React__namespace.createElement(core.Row, { alignItems: "center" },
-            React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt.faCalendarAlt, onFocus: showCalendarStartDate, value: value.startDate ? dateFns.format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
+            React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt$1.faCalendarAlt, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? dateFns.format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
             React__namespace.createElement(core.Space, null),
             React__namespace.createElement(elements.Icon, { icon: faLongArrowAltRight.faLongArrowAltRight, color: theme.cssColor("--lhds-color-ui-500"), size: 14 }),
             React__namespace.createElement(core.Space, null),
-            React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt.faCalendarAlt, onFocus: showCalendarEndDate, value: value.endDate ? dateFns.format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
+            React__namespace.createElement(forms.TextInput, { iconLeft: faCalendarAlt$1.faCalendarAlt, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? dateFns.format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
 };
 
 var DateTextInput = function (_a) {
-    var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c; _a.disableCalender; var onValueChange = _a.onValueChange, _e = _a.placeholder, placeholder = _e === void 0 ? "yyyy-mm-dd" : _e, portalTarget = _a.portalTarget, value = _a.value, _f = _a.width, width = _f === void 0 ? "130px" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.calendarTheme, calendarTheme = _h === void 0 ? defaultCalendarTheme : _h, _j = _a.hideCalenderIcon, hideCalenderIcon = _j === void 0 ? false : _j, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon"]);
-    var _k = React.useState(false), open = _k[0], setOpen = _k[1];
-    var _l = useCalendarPopoverUpdater(), tippyRef = _l.tippyRef, onChangePanel = _l.onChangePanel;
+    var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c; _a.disableCalender; var onValueChange = _a.onValueChange, _e = _a.placeholder, placeholder = _e === void 0 ? "yyyy-mm-dd" : _e, portalTarget = _a.portalTarget, value = _a.value, _f = _a.width, width = _f === void 0 ? "130px" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.calendarTheme, calendarTheme = _h === void 0 ? defaultCalendarTheme : _h, _j = _a.hideCalenderIcon, hideCalenderIcon = _j === void 0 ? false : _j, minDate = _a.minDate, _k = _a.maxDate, maxDate = _k === void 0 ? defaultMaxDate : _k, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon", "minDate", "maxDate"]);
+    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
+    var _m = useCalendarPopoverUpdater(), tippyRef = _m.tippyRef, onChangePanel = _m.onChangePanel;
     var toggleCalendar = React.useCallback(function () {
         setOpen(!open);
     }, [setOpen, open]);
@@ -1308,9 +1303,9 @@ var DateTextInput = function (_a) {
     return (React__namespace.createElement(core.Box, { width: width },
         React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, visible: open, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", placement: defaultPopoverPlacement, onClickOutside: hideCalendar, tippyRef: tippyRef, content: React__namespace.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
                     ? dateFns.parse(value, dateFormat, new Date())
-                    : undefined, theme: calendarTheme })) },
+                    : undefined, minDate: minDate, maxDate: maxDate, theme: calendarTheme })) },
             React__namespace.createElement(forms.TextInput, __assign({}, props, { variant: invalid ? "error" : "standard", disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React__namespace.createElement(core.Row, { alignItems: "center", indent: 0.5 },
-                    React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faCalendarAlt.faCalendarAlt, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", size: 10 })))));
+                    React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: faCalendarAlt$1.faCalendarAlt, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
 };
 
 var formatHours = function (hours) {
@@ -1448,7 +1443,7 @@ var TimeTextInput = function (_a) {
 };
 
 var DualTextInput = function (_a) {
-    var autoFocusLeft = _a.autoFocusLeft, autoFocusRight = _a.autoFocusRight, onEsc = _a.onEsc, onEnter = _a.onEnter, onValueChangeLeft = _a.onValueChangeLeft, onValueChangeRight = _a.onValueChangeRight, separatorIcon = _a.separatorIcon, placeholderLeft = _a.placeholderLeft, placeholderRight = _a.placeholderRight, typeLeft = _a.typeLeft, typeRight = _a.typeRight, onChangeLeft = _a.onChangeLeft, onChangeRight = _a.onChangeRight, valueLeft = _a.valueLeft, valueRight = _a.valueRight, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onClickCalendar = _a.onClickCalendar, onClickArrowDown = _a.onClickArrowDown, onBlurLeft = _a.onBlurLeft, onBlurRight = _a.onBlurRight, onFocusLeft = _a.onFocusLeft, onFocusRight = _a.onFocusRight, inputRefLeft = _a.inputRefLeft, inputRefRight = _a.inputRefRight, variant = _a.variant, variantLeft = _a.variantLeft, variantRight = _a.variantRight, onBlur = _a.onBlur, showPresets = _a.showPresets, widthLeft = _a.widthLeft, widthRight = _a.widthRight;
+    var autoFocusLeft = _a.autoFocusLeft, autoFocusRight = _a.autoFocusRight, onEsc = _a.onEsc, onEnter = _a.onEnter, onValueChangeLeft = _a.onValueChangeLeft, onValueChangeRight = _a.onValueChangeRight, separatorIcon = _a.separatorIcon, placeholderLeft = _a.placeholderLeft, placeholderRight = _a.placeholderRight, typeLeft = _a.typeLeft, typeRight = _a.typeRight, onChangeLeft = _a.onChangeLeft, onChangeRight = _a.onChangeRight, valueLeft = _a.valueLeft, valueRight = _a.valueRight, minLeft = _a.minLeft, maxLeft = _a.maxLeft, minRight = _a.minRight, maxRight = _a.maxRight, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onClickCalendar = _a.onClickCalendar, onClickArrowDown = _a.onClickArrowDown, onBlurLeft = _a.onBlurLeft, onBlurRight = _a.onBlurRight, onFocusLeft = _a.onFocusLeft, onFocusRight = _a.onFocusRight, inputRefLeft = _a.inputRefLeft, inputRefRight = _a.inputRefRight, variant = _a.variant, variantLeft = _a.variantLeft, variantRight = _a.variantRight, onBlur = _a.onBlur, showPresets = _a.showPresets, widthLeft = _a.widthLeft, widthRight = _a.widthRight;
     var focusCounter = React.useRef(0);
     var tryTriggerOnBlur = React.useMemo(function () {
         return lodash.debounce(function (focusCounter) {
@@ -1488,18 +1483,18 @@ var DualTextInput = function (_a) {
     return (React__namespace.createElement(core.Box, null,
         React__namespace.createElement(forms.TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: React__namespace.createElement(core.Row, { alignItems: "center" },
                 React__namespace.createElement(core.Indent, { num: 0.5 },
-                    React__namespace.createElement(elements.FlatButton, { leftIcon: faCalendarAlt$1.faCalendarAlt, onClick: onClickCalendar, size: "small" })),
+                    React__namespace.createElement(elements.FlatButton, { leftIcon: faCalendarAlt.faCalendarAlt, onClick: onClickCalendar, size: "small" })),
                 showPresets ? (React__namespace.createElement(React__namespace.Fragment, null,
                     React__namespace.createElement(core.Row, { height: "22px" },
                         React__namespace.createElement(core.SeparatorLine, { vertical: true })),
                     React__namespace.createElement(core.Indent, { num: 0.5 },
                         React__namespace.createElement(elements.FlatButton, { leftIcon: faAngleDown.faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
             React__namespace.createElement(core.Box, { width: widthLeft },
-                React__namespace.createElement(forms.TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickLeft, hideBorder: true, placeholder: placeholderLeft, value: valueLeft, onValueChange: onValueChangeLeft, onChange: onChangeLeft, onBlur: blurLeftHandler, onFocus: focusLeftHandler, inputRef: inputRefLeft, variant: variantLeft, type: typeLeft, autoFocus: autoFocusLeft })),
+                React__namespace.createElement(forms.TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickLeft, hideBorder: true, placeholder: placeholderLeft, value: valueLeft, onValueChange: onValueChangeLeft, onChange: onChangeLeft, onBlur: blurLeftHandler, onFocus: focusLeftHandler, inputRef: inputRefLeft, variant: variantLeft, type: typeLeft, autoFocus: autoFocusLeft, min: minLeft, max: maxLeft })),
             React__namespace.createElement(core.Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
                 React__namespace.createElement(elements.Icon, { icon: separatorIcon, size: 12, color: theme.cssColor("--lhds-color-ui-500") })),
             React__namespace.createElement(core.Box, { width: widthRight },
-                React__namespace.createElement(forms.TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickRight, hideBorder: true, placeholder: placeholderRight, value: valueRight, onValueChange: onValueChangeRight, onChange: onChangeRight, onBlur: blurRightHandler, onFocus: focusRightHandler, inputRef: inputRefRight, variant: variantRight, type: typeRight, autoFocus: autoFocusRight })))));
+                React__namespace.createElement(forms.TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickRight, hideBorder: true, placeholder: placeholderRight, value: valueRight, onValueChange: onValueChangeRight, onChange: onChangeRight, onBlur: blurRightHandler, onFocus: focusRightHandler, inputRef: inputRefRight, variant: variantRight, type: typeRight, autoFocus: autoFocusRight, min: minRight, max: maxRight })))));
 };
 
 var transformTimeStringToNumber = function (time) {
@@ -1804,13 +1799,13 @@ var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar,
 };
 
 var DateTimeInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus;
+    var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b;
     var dateInputRef = React.useRef(null);
     var timeInputRef = React.useRef(null);
     var states = useInputStates$1(value);
     var setCurrentPanel = states.setCurrentPanel, currentPanel = states.currentPanel, isCalendarVisible = states.isCalendarVisible, dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isTimePickerVisible = states.isTimePickerVisible, hideTimePicker = states.hideTimePicker, localTime = states.localTime, localDate = states.localDate;
-    var _b = useDateRangeHandlers$1(value, onValueChange, states, dateInputRef), showCalendar = _b.showCalendar, hideCalendar = _b.hideCalendar, inputLeftChangeHandler = _b.inputLeftChangeHandler, inputRightChangeHandler = _b.inputRightChangeHandler, onChangeTime = _b.onChangeTime, onChangeDate = _b.onChangeDate;
-    var _c = useUserInputHandlers$1(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _c.onKeyDownHandler, onFocusRight = _c.onFocusRight, onFocusLeft = _c.onFocusLeft, onClickDay = _c.onClickDay, onClickCalendarButton = _c.onClickCalendarButton, onClickArrowButton = _c.onClickArrowButton;
+    var _c = useDateRangeHandlers$1(value, onValueChange, states, dateInputRef), showCalendar = _c.showCalendar, hideCalendar = _c.hideCalendar, inputLeftChangeHandler = _c.inputLeftChangeHandler, inputRightChangeHandler = _c.inputRightChangeHandler, onChangeTime = _c.onChangeTime, onChangeDate = _c.onChangeDate;
+    var _d = useUserInputHandlers$1(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _d.onKeyDownHandler, onFocusRight = _d.onFocusRight, onFocusLeft = _d.onFocusLeft, onClickDay = _d.onClickDay, onClickCalendarButton = _d.onClickCalendarButton, onClickArrowButton = _d.onClickArrowButton;
     useDateRangeEffects$1(value, setDateInFocus, dateInputRef);
     var statePerMonth = React.useMemo(function () {
         var dateToHighlight = value || localDate;
@@ -1830,13 +1825,13 @@ var DateTimeInput = function (_a) {
     var delayedIsCalendarVisible = core.useDelayedFalse(isCalendarVisible, 300);
     var delayedIsTimePickerVisible = core.useDelayedFalse(isTimePickerVisible, 300);
     return (React__namespace.createElement(core.Box, { onKeyDown: onKeyDownHandler },
-        React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React__namespace.createElement(core.Column, null, delayedIsCalendarVisible ? (React__namespace.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) : delayedIsTimePickerVisible ? (React__namespace.createElement(core.Column, null,
+        React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React__namespace.createElement(core.Column, null, delayedIsCalendarVisible ? (React__namespace.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) : delayedIsTimePickerVisible ? (React__namespace.createElement(core.Column, null,
                 React__namespace.createElement(core.Column, { overflow: "hidden", height: "250px" },
                     React__namespace.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
                 React__namespace.createElement(core.Space, null),
                 React__namespace.createElement(core.Row, { justifyContent: "flex-end" },
                     React__namespace.createElement(elements.PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
-            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1.faClock, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: "104px", widthRight: "64px" }))));
+            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1.faClock, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: "104px", widthRight: "64px", minLeft: minDate, maxLeft: maxDate }))));
 };
 
 var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
@@ -2087,14 +2082,14 @@ var useUserInputHandlers = function (startDate, endDate, onValueChange, startDat
 };
 
 var DateRangeDualTextInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, calendarProps = _a.calendarProps;
-    var _b = value || {}, startDate = _b.startDate, endDate = _b.endDate;
+    var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b, calendarProps = _a.calendarProps;
+    var _c = value || {}, startDate = _c.startDate, endDate = _c.endDate;
     var startDateInputRef = React.useRef(null);
     var endDateInputRef = React.useRef(null);
     var states = useInputStates(startDate, endDate);
     var dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isCalendarVisible = states.isCalendarVisible, currentPanel = states.currentPanel, setCurrentPanel = states.setCurrentPanel;
-    var _c = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _c.showCalendar, hideCalendar = _c.hideCalendar, inputLeftChangeHandler = _c.inputLeftChangeHandler, inputRightChangeHandler = _c.inputRightChangeHandler;
-    var _d = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _d.onKeyDownHandler, onFocusRight = _d.onFocusRight, onFocusLeft = _d.onFocusLeft, onClickDay = _d.onClickDay, onClickCalendarButton = _d.onClickCalendarButton, onClickArrowButton = _d.onClickArrowButton;
+    var _d = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _d.showCalendar, hideCalendar = _d.hideCalendar, inputLeftChangeHandler = _d.inputLeftChangeHandler, inputRightChangeHandler = _d.inputRightChangeHandler;
+    var _e = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _e.onKeyDownHandler, onFocusRight = _e.onFocusRight, onFocusLeft = _e.onFocusLeft, onClickDay = _e.onClickDay, onClickCalendarButton = _e.onClickCalendarButton, onClickArrowButton = _e.onClickArrowButton;
     useDateRangeEffects(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
     var startDateIsAfterEnd = React.useMemo(function () { return startDate && endDate && dateFns.isAfter(startDate, endDate); }, [startDate, endDate]);
     var statePerMonth = React.useMemo(function () {
@@ -2102,8 +2097,8 @@ var DateRangeDualTextInput = function (_a) {
     }, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
     var delayedIsCalendarVisible = core.useDelayedFalse(isCalendarVisible, 300);
     return (React__namespace.createElement(core.Box, { onKeyDown: onKeyDownHandler },
-        React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel }, calendarProps, { statePerMonth: statePerMonth }))) },
-            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: elements.stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : undefined, widthLeft: "104px", widthRight: "104px" }))));
+        React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate }, calendarProps, { statePerMonth: statePerMonth }))) },
+            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: elements.stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : undefined, widthLeft: "104px", widthRight: "104px", minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
 };
 
 exports.Calendar = Calendar;
@@ -2125,6 +2120,7 @@ exports.WeekDayCell = WeekDayCell;
 exports.WeekNumberCell = WeekNumberCell;
 exports.YearPicker = YearPicker;
 exports.addDayStateHighlights = addDayStateHighlights;
+exports.addDayStateHighlightsOnSingleDay = addDayStateHighlightsOnSingleDay;
 exports.addWeekRangeHighlights = addWeekRangeHighlights;
 exports.addWeekStateHighlights = addWeekStateHighlights;
 exports.buildDayStateForDateRange = buildDayStateForDateRange;
@@ -2132,12 +2128,12 @@ exports.buildDayStateForRange = buildDayStateForRange;
 exports.buildDayStateForSingleMonth = buildDayStateForSingleMonth;
 exports.calculateOverflowingMonth = calculateOverflowingMonth;
 exports.createDay = createDay;
+exports.dateRangeToStrings = dateRangeToStrings;
 exports.dayHasHighlight = dayHasHighlight;
 exports.dayHighlightSelect = dayHighlightSelect;
 exports.defaultCalendarTheme = defaultCalendarTheme;
 exports.defaultTextPropsProvider = defaultTextPropsProvider;
 exports.defaultWrapperStyleProvider = defaultWrapperStyleProvider;
-exports.ensureStartIsFirst = ensureStartIsFirst;
 exports.extranetCalendarTheme = extranetCalendarTheme;
 exports.getDaysForWeekForDate = getDaysForWeekForDate;
 exports.getMonthInYear = getMonthInYear;
@@ -2145,10 +2141,12 @@ exports.getMonthsInYear = getMonthsInYear;
 exports.getStartDateOfISOWeek = getStartDateOfISOWeek;
 exports.getWeekForDate = getWeekForDate;
 exports.getWeeksForMonth = getWeeksForMonth;
+exports.isDateRangeInvalid = isDateRangeInvalid;
 exports.setDayStateValue = setDayStateValue;
 exports.setDayStateValueFunction = setDayStateValueFunction;
-exports.transformDateIntervalToDateStringInterval = transformDateIntervalToDateStringInterval;
-exports.transformDateStringIntervalToDateInterval = transformDateStringIntervalToDateInterval;
+exports.stringsToDateRange = stringsToDateRange;
+exports.toggleDateStringsIfEndIsEarlierThanStart = toggleDateStringsIfEndIsEarlierThanStart;
+exports.toggleDatesIfEndIsEarlierThanStart = toggleDatesIfEndIsEarlierThanStart;
 exports.useDateRangeCalendarState = useDateRangeCalendarState;
 exports.useDateRangeExclusionSelection = useDateRangeExclusionSelection;
 exports.useDateRangeSelection = useDateRangeSelection;