@stenajs-webui/calendar 14.1.1 → 15.0.0-alpha.10

package/dist/index.es.js

@@ -1,7 +1,8 @@
-import { useMemo, createElement, Fragment, useCallback, useState, useEffect, useRef } from 'react';
+import * as React from 'react';
+import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { FlatButton, PrimaryButton, Icon, stenaArrowRight } from '@stenajs-webui/elements';
 import { Box, Text, Clickable, Row, Space, Spacing, Indent, Column, SeparatorLine, parseIntElseUndefined, useBoolean, useDelayedFalse } from '@stenajs-webui/core';
-import { isAfter, eachDayOfInterval, isSameDay, endOfMonth, startOfMonth, min, addDays, max, subDays, format, getISOWeek, getDate, startOfISOWeek, addWeeks, getMonth, getYear, getISODay, addHours, addMonths, addYears, subMonths, subYears, parse, isValid } from 'date-fns';
+import { isAfter, eachDayOfInterval, isSameDay, endOfMonth, startOfMonth, min, addDays, max, subDays, format, getISOWeek, getDate, startOfISOWeek, addWeeks, getMonth, getYear, getISODay, addHours, isBefore, parse, addMonths, addYears, subMonths, subYears, isValid } from 'date-fns';
 import { last, chunk, range, debounce } from 'lodash';
 import styled from '@emotion/styled';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
@@ -10,14 +11,14 @@ import { faAngleDoubleLeft } from '@fortawesome/free-solid-svg-icons/faAngleDoub
 import { faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons/faAngleDoubleRight';
 import { faCaretLeft } from '@fortawesome/free-solid-svg-icons/faCaretLeft';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
-import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
+import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt';
 import { TextInput, TextInputBox } from '@stenajs-webui/forms';
 import { useTippyInstance, Popover } from '@stenajs-webui/tooltip';
+import { faCalendarAlt as faCalendarAlt$1 } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
 import { cssColor } from '@stenajs-webui/theme';
 import { faLongArrowAltRight } from '@fortawesome/free-solid-svg-icons/faLongArrowAltRight';
 import { faClock } from '@fortawesome/free-solid-svg-icons/faClock';
 import { faClock as faClock$1 } from '@fortawesome/free-regular-svg-icons/faClock';
-import { faCalendarAlt as faCalendarAlt$1 } from '@fortawesome/free-regular-svg-icons/faCalendarAlt';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 
 /*! *****************************************************************************
@@ -58,12 +59,14 @@ function __rest(s, e) {
     return t;
 }
 
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var DateFormats = {
@@ -75,7 +78,7 @@ var DateFormats = {
     weekDayName: "EEEE",
     weekDayNameShort: "EEE",
     dateAndMonth: "d MMM",
-    monthAndDate: "MMM do",
+    monthAndDate: "MMM do", // Jan 2nd
 };
 
 var buildDayStateForDateRange = function (statePerMonth, start, end) {
@@ -147,11 +150,13 @@ var addDayStateHighlights = function (calendarState, date, highlights) {
         calendarState[monthString] &&
         calendarState[monthString][weekNumber] &&
         calendarState[monthString][weekNumber][dayInMonth];
-    var newHighlights = dayState && dayState.highlights
-        ? __spreadArrays(dayState.highlights, highlights) : 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;
@@ -165,7 +170,7 @@ var addWeekStateHighlights = function (calendarState, week, highlights) {
     });
     var weekState = state && state[monthString] ? state[monthString][weekNumber] : undefined;
     var newHighlights = weekState && weekState.highlights
-        ? __spreadArrays(weekState.highlights, highlights) : highlights;
+        ? __spreadArray(__spreadArray([], weekState.highlights, true), highlights, true) : highlights;
     var newWeekState = __assign(__assign({}, weekState), { highlights: newHighlights });
     return __assign(__assign({}, state), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = newWeekState, _b)), _a));
 };
@@ -399,42 +404,62 @@ var defaultCalendarTheme = {
 };
 var extranetCalendarTheme = __assign(__assign({}, defaultCalendarTheme), { width: "37px", height: "37px" });
 
+var isDateInMinMaxRange = function (date, min, max) {
+    if (min && isBefore(date, min)) {
+        return isSameDay(date, min);
+    }
+    if (max && isAfter(date, max)) {
+        return 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 = useMemo(function () {
+        return !isDateInMinMaxRange(day.date, minDate, maxDate)
+            ? addDayStateHighlightsOnSingleDay(dayState, ["disabled"])
+            : dayState;
+    }, [day.date, dayState, maxDate, minDate]);
+    return React.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 = (createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
-        background && createElement(Box, { position: "absolute" }, background),
-        createElement(Box, { position: "absolute" },
-            createElement(Text, { color: onClickWeek
+    var content = (React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
+        background && React.createElement(Box, { position: "absolute" }, background),
+        React.createElement(Box, { position: "absolute" },
+            React.createElement(Text, { color: onClickWeek
                     ? theme.WeekNumber.clickableTextColor
                     : theme.WeekNumber.textColor },
                 prefix,
                 week.weekNumber))));
-    return (createElement(Box, { background: backgroundColor || theme.WeekNumber.backgroundColor, position: "relative" }, onClickWeek ? (createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeek(week, ev); }, disableFocusHighlight: !onClickWeek }, content)) : (content)));
+    return (React.createElement(Box, { background: backgroundColor || theme.WeekNumber.backgroundColor, position: "relative" }, onClickWeek ? (React.createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeek(week, ev); }, disableFocusHighlight: !onClickWeek }, content)) : (content)));
 };
 
 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;
-    return (createElement("tr", { key: week.weekNumber },
-        theme.WeekNumber.show && (createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
-        week.days.map(function (day) { return (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 })); })));
+    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.createElement("tr", { key: week.weekNumber },
+        theme.WeekNumber.show && (React.createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (React.createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
+        week.days.map(function (day) { return (React.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) {
     var onClickWeekDay = _a.onClickWeekDay, day = _a.day, theme = _a.theme;
-    var content = (createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
-        createElement(Text, { size: "small", color: onClickWeekDay
+    var content = (React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
+        React.createElement(Text, { size: "small", color: onClickWeekDay
                 ? theme.WeekDay.clickableTextColor
                 : theme.WeekDay.textColor }, day.name)));
     if (onClickWeekDay) {
-        return (createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeekDay(day.dayOfWeek, ev); }, disableFocusHighlight: !onClickWeekDay }, content));
+        return (React.createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeekDay(day.dayOfWeek, ev); }, disableFocusHighlight: !onClickWeekDay }, content));
     }
     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 = (createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
-        createElement(Text, __assign({}, (theme.CalendarDay.textProps &&
+    var content = (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
+        React.createElement(Text, __assign({}, (theme.CalendarDay.textProps &&
             theme.CalendarDay.textProps(defaultHighlights, dayState, day, week, month, userData))), day.dayOfMonth)));
     var WrapperTd = styled.td(__assign({}, (theme.CalendarDay.tdStyle &&
         theme.CalendarDay.tdStyle(defaultHighlights, dayState, day, week, month, userData))));
@@ -442,36 +467,36 @@ var CalendarDay = function (_a) {
         theme.CalendarDay.innerWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%" }));
     var CellWrapperDiv = styled.div(__assign(__assign({}, (theme.CalendarDay.cellWrapperStyle &&
         theme.CalendarDay.cellWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%", position: "relative" }));
-    return (createElement(WrapperTd, null,
-        createElement(InnerWrapperDiv, null,
-            createElement(CellWrapperDiv, null, day.month === month.monthInYear && (createElement(Fragment, null,
-                ExtraDayContent && (createElement(ExtraDayContent, { week: week, month: month, day: day, dayState: dayState, theme: theme, userData: userData })),
-                onClickDay && isClickable(defaultHighlights, dayState) ? (createElement(Clickable, { onClick: function (ev) { return onClickDay(day, userData, ev); }, style: { width: "100%", height: "100%" }, borderRadius: "var(--swui-calendar-day-border-radius)" }, content)) : (createElement(Fragment, null, content))))))));
+    return (React.createElement(WrapperTd, null,
+        React.createElement(InnerWrapperDiv, null,
+            React.createElement(CellWrapperDiv, null, day.month === month.monthInYear && (React.createElement(React.Fragment, null,
+                ExtraDayContent && (React.createElement(ExtraDayContent, { week: week, month: month, day: day, dayState: dayState, theme: theme, userData: userData })),
+                onClickDay && isClickable(defaultHighlights, dayState) ? (React.createElement(Clickable, { onClick: function (ev) { return onClickDay(day, userData, ev); }, style: { width: "100%", height: "100%" }, borderRadius: "var(--swui-calendar-day-border-radius)" }, content)) : (React.createElement(React.Fragment, null, content))))))));
 };
 var isClickable = function (defaultHighlights, dayState) {
     return !!dayHighlightSelect(dayState, defaultHighlights, ["enabled", "disabled"], [true, false], true);
 };
 
 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 (createElement(Fragment, null,
-        createElement(Box, { alignItems: "stretch" },
-            createElement(Row, { justifyContent: "space-between", alignItems: "center", height: "32px" },
-                createElement(Box, { alignItems: "center" }, headerLeftContent),
-                createElement(Row, { alignItems: "center" },
-                    createElement(Row, { width: "104px", justifyContent: "center" }, onClickMonth ? (createElement(FlatButton, { onClick: function () { return onClickMonth(month); }, label: month.name })) : (createElement(Text, null, month.name))),
-                    createElement(Space, null),
-                    createElement(Row, { width: "64px", justifyContent: "center" }, onClickYear ? (createElement(FlatButton, { onClick: function () { return onClickYear(month.year); }, label: String(month.year) })) : (createElement(Text, null, month.year)))),
-                createElement(Box, { alignItems: "center" }, headerRightContent)),
-            createElement("table", null,
-                createElement("tbody", null,
-                    createElement("tr", null,
-                        showWeekNumber && (createElement("td", null,
-                            createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
-                                createElement(Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
-                        month.weeks[0].days.map(function (day) { return (createElement("td", { key: day.name }, renderWeekDay ? (renderWeekDay(day.name, theme, onClickWeekDay)) : (createElement(WeekDayCell, { day: day, onClickWeekDay: onClickWeekDay, theme: theme })))); })),
-                    month.weeks.map(function (week) { return (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 })); }))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { alignItems: "stretch" },
+            React.createElement(Row, { justifyContent: "space-between", alignItems: "center", height: "32px" },
+                React.createElement(Box, { alignItems: "center" }, headerLeftContent),
+                React.createElement(Row, { alignItems: "center" },
+                    React.createElement(Row, { width: "104px", justifyContent: "center" }, onClickMonth ? (React.createElement(FlatButton, { onClick: function () { return onClickMonth(month); }, label: month.name })) : (React.createElement(Text, null, month.name))),
+                    React.createElement(Space, null),
+                    React.createElement(Row, { width: "64px", justifyContent: "center" }, onClickYear ? (React.createElement(FlatButton, { onClick: function () { return onClickYear(month.year); }, label: String(month.year) })) : (React.createElement(Text, null, month.year)))),
+                React.createElement(Box, { alignItems: "center" }, headerRightContent)),
+            React.createElement("table", null,
+                React.createElement("tbody", null,
+                    React.createElement("tr", null,
+                        showWeekNumber && (React.createElement("td", null,
+                            React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
+                                React.createElement(Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
+                        month.weeks[0].days.map(function (day) { return (React.createElement("td", { key: day.name }, renderWeekDay ? (renderWeekDay(day.name, theme, onClickWeekDay)) : (React.createElement(WeekDayCell, { day: day, onClickWeekDay: onClickWeekDay, theme: theme })))); })),
+                    month.weeks.map(function (week) { return (React.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) {
@@ -501,23 +526,25 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".Calendar-module_calendar__Ztvgm {\n  --swui-calendar-day-width: 40px;\n  --swui-calendar-day-height: 38px;\n  --swui-calendar-day-border-radius: 4px;\n\n  /* Week number */\n\n  --swui-calendar-week-number-bg-color: transparent;\n  --swui-calendar-week-number-text-color: var(--lhds-color-ui-500);\n  --swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);\n\n  /* Week day */\n\n  --swui-calendar-week-day-text-color: var(--lhds-color-ui-500);\n  --swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);\n\n  /* Wrapper */\n\n  --swui-calendar-wrapper-selected-border: var(--swui-primary-action-color);\n  --swui-calendar-wrapper-selected-background: var(--swui-primary-action-color);\n  --swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);\n  --swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);\n  --swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);\n  --swui-calendar-wrapper-today-background: var(--lhds-color-ui-200);\n\n  /* Text */\n\n  --swui-calendar-text-selected-color: #fff;\n  --swui-calendar-text-disabled-color: var(--swui-text-disabled-color);\n  --swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color);\n}\n\n  .Calendar-module_calendar__Ztvgm table {\n    border-spacing: 0 4px;\n  }\n\n  .Calendar-module_calendar__Ztvgm span {\n    line-height: 100%;\n  }\n\n  .Calendar-module_calendar__Ztvgm tr td:last-child {\n    border-top-right-radius: var(--swui-calendar-day-border-radius);\n    border-bottom-right-radius: var(--swui-calendar-day-border-radius);\n  }\n\n  .Calendar-module_calendar__Ztvgm tr td:nth-child(2) {\n    border-top-left-radius: var(--swui-calendar-day-border-radius);\n    border-bottom-left-radius: var(--swui-calendar-day-border-radius);\n  }\n\n  .Calendar-module_calendar__Ztvgm td {\n    padding: 0;\n    width: var(--swui-calendar-day-width);\n    height: var(--swui-calendar-day-height);\n  }\n";
-var styles = {"calendar":"Calendar-module_calendar__Ztvgm"};
-styleInject(css_248z);
+var css_248z$1 = ".Calendar-module_calendar__Ztvgm {\n  --swui-calendar-day-width: 40px;\n  --swui-calendar-day-height: 38px;\n  --swui-calendar-day-border-radius: 4px;\n\n  /* Week number */\n\n  --swui-calendar-week-number-bg-color: transparent;\n  --swui-calendar-week-number-text-color: var(--lhds-color-ui-500);\n  --swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);\n\n  /* Week day */\n\n  --swui-calendar-week-day-text-color: var(--lhds-color-ui-500);\n  --swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);\n\n  /* Wrapper */\n\n  --swui-calendar-wrapper-selected-border: var(--swui-primary-action-color);\n  --swui-calendar-wrapper-selected-background: var(--swui-primary-action-color);\n  --swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);\n  --swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);\n  --swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);\n  --swui-calendar-wrapper-today-background: var(--lhds-color-ui-200);\n\n  /* Text */\n\n  --swui-calendar-text-selected-color: #fff;\n  --swui-calendar-text-disabled-color: var(--swui-text-disabled-color);\n  --swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color);\n}\n\n  .Calendar-module_calendar__Ztvgm table {\n    border-spacing: 0 4px;\n  }\n\n  .Calendar-module_calendar__Ztvgm span {\n    line-height: 100%;\n  }\n\n  .Calendar-module_calendar__Ztvgm tr td:last-child {\n    border-top-right-radius: var(--swui-calendar-day-border-radius);\n    border-bottom-right-radius: var(--swui-calendar-day-border-radius);\n  }\n\n  .Calendar-module_calendar__Ztvgm tr td:nth-child(2) {\n    border-top-left-radius: var(--swui-calendar-day-border-radius);\n    border-bottom-left-radius: var(--swui-calendar-day-border-radius);\n  }\n\n  .Calendar-module_calendar__Ztvgm td {\n    padding: 0;\n    width: var(--swui-calendar-day-width);\n    height: var(--swui-calendar-day-height);\n  }\n";
+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;
-    return (createElement("div", { className: styles.calendar }, monthRows.map(function (monthRow, rowIndex) { return (createElement(Spacing, { key: rowIndex },
-        createElement(Row, null, monthRow.map(function (month, index) { return (createElement(Fragment, { key: month.name },
-            index > 0 && createElement(Space, null),
-            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 }))); })))); })));
+    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 = useMemo(function () { return (minDate ? parse(minDate, "yyyy-MM-dd", new Date()) : undefined); }, [minDate]);
+    var maxDateObj = useMemo(function () { return (maxDate ? parse(maxDate, "yyyy-MM-dd", new Date()) : undefined); }, [maxDate]);
+    return (React.createElement("div", { className: styles$1.calendar }, monthRows.map(function (monthRow, rowIndex) { return (React.createElement(Spacing, { key: rowIndex },
+        React.createElement(Row, null, monthRow.map(function (month, index) { return (React.createElement(React.Fragment, { key: month.name },
+            index > 0 && React.createElement(Space, null),
+            React.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);
     var _a = calculateOverflowingMonth(initialDate.year, initialDate.month), year = _a.year, month = _a.month;
     var monthRows = getMonthRows(year, month, props.numMonths, props.monthsPerRow);
     var statePerMonth = useHighlightToday(props.highlightToday, props.statePerMonth);
-    return (createElement(CalendarPanel, __assign({ year: year, month: month, monthRows: monthRows }, props, { statePerMonth: statePerMonth })));
+    return (React.createElement(CalendarPanel, __assign({ year: year, month: month, monthRows: monthRows }, props, { statePerMonth: statePerMonth })));
 }
 var getInitialDate = function (year, month, date) {
     if (month && year) {
@@ -577,18 +604,18 @@ var useSelectedMonthStepperLogic = function (dateInFocus, setDateInFocus, months
 
 var WithMonthSwitcherBelow = function (_a) {
     var children = _a.children, prevMonth = _a.prevMonth, nextMonth = _a.nextMonth, prevYear = _a.prevYear, nextYear = _a.nextYear;
-    return (createElement("div", null,
+    return (React.createElement("div", null,
         children,
-        createElement(Indent, null,
-            createElement(Row, null,
-                createElement(FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft }),
-                createElement(Space, null),
-                createElement(FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft }),
-                createElement(Indent, { num: 2 }),
-                createElement(FlatButton, { onClick: nextMonth, leftIcon: faAngleRight }),
-                createElement(Space, null),
-                createElement(FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight }))),
-        createElement(Space, null)));
+        React.createElement(Indent, null,
+            React.createElement(Row, null,
+                React.createElement(FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft }),
+                React.createElement(Space, null),
+                React.createElement(FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft }),
+                React.createElement(Indent, { num: 2 }),
+                React.createElement(FlatButton, { onClick: nextMonth, leftIcon: faAngleRight }),
+                React.createElement(Space, null),
+                React.createElement(FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight }))),
+        React.createElement(Space, null)));
 };
 
 var MonthPickerCell = function (_a) {
@@ -598,7 +625,7 @@ var MonthPickerCell = function (_a) {
         now.setMonth(month);
         return format(now, "MMM");
     }, [month]);
-    return (createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === month ? (createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } })) : (createElement(FlatButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } }))));
+    return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === month ? (React.createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } })) : (React.createElement(FlatButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } }))));
 };
 
 var monthMatrix = [
@@ -609,7 +636,7 @@ var monthMatrix = [
 ];
 var MonthPicker = function (_a) {
     var value = _a.value, onValueChange = _a.onValueChange;
-    return (createElement(Column, null, monthMatrix.map(function (monthRow) { return (createElement(Row, { key: monthRow[0] }, monthRow.map(function (month) { return (createElement(MonthPickerCell, { key: month, month: month, onValueChange: onValueChange, value: value })); }))); })));
+    return (React.createElement(Column, null, monthMatrix.map(function (monthRow) { return (React.createElement(Row, { key: monthRow[0] }, monthRow.map(function (month) { return (React.createElement(MonthPickerCell, { key: month, month: month, onValueChange: onValueChange, value: value })); }))); })));
 };
 
 var createStandardDateRangePresets = function (now) { return [
@@ -639,21 +666,21 @@ var PresetPicker = function (_a) {
     var _c = useState(0), pageIndex = _c[0], setPageIndex = _c[1];
     var pages = useMemo(function () { return createStandardDateRangePresets(new Date()); }, []);
     var currentPage = (_b = pages[pageIndex]) !== null && _b !== void 0 ? _b : pages[0];
-    return (createElement(Column, null,
-        createElement(Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
-            createElement(FlatButton, { size: "small", leftIcon: faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
-            createElement(Text, null, currentPage.label),
-            createElement(FlatButton, { size: "small", leftIcon: faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
-        createElement(Space, null),
-        createElement(Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (createElement(Fragment, { key: preset.label },
-            createElement(PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
-            createElement(Space, null))); }))));
+    return (React.createElement(Column, null,
+        React.createElement(Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
+            React.createElement(FlatButton, { size: "small", leftIcon: faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
+            React.createElement(Text, null, currentPage.label),
+            React.createElement(FlatButton, { size: "small", leftIcon: faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
+        React.createElement(Space, null),
+        React.createElement(Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (React.createElement(React.Fragment, { key: preset.label },
+            React.createElement(PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
+            React.createElement(Space, null))); }))));
 };
 
 var YearPickerCell = function (_a) {
     var value = _a.value, onValueChange = _a.onValueChange, year = _a.year;
     var label = String(year);
-    return (createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === year ? (createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } })) : (createElement(FlatButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } }))));
+    return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === year ? (React.createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } })) : (React.createElement(FlatButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } }))));
 };
 
 var YearPicker = function (_a) {
@@ -671,12 +698,12 @@ var YearPicker = function (_a) {
     useEffect(function () {
         setLastYear(function (prev) { return calculateLastYearInFocus(value, prev); });
     }, [value]);
-    return (createElement(Row, null,
-        createElement(Column, { justifyContent: "center" },
-            createElement(FlatButton, { leftIcon: faCaretLeft, onClick: function () { return setLastYear(lastYear - 3); } })),
-        createElement(Column, null, yearRows.map(function (yearRow) { return (createElement(Row, { key: yearRow[0] }, yearRow.map(function (year) { return (createElement(YearPickerCell, { key: year, year: year, onValueChange: onValueChange, value: value })); }))); })),
-        createElement(Column, { justifyContent: "center" },
-            createElement(FlatButton, { leftIcon: faCaretRight, onClick: function () { return setLastYear(lastYear + 3); } }))));
+    return (React.createElement(Row, null,
+        React.createElement(Column, { justifyContent: "center" },
+            React.createElement(FlatButton, { leftIcon: faCaretLeft, onClick: function () { return setLastYear(lastYear - 3); } })),
+        React.createElement(Column, null, yearRows.map(function (yearRow) { return (React.createElement(Row, { key: yearRow[0] }, yearRow.map(function (year) { return (React.createElement(YearPickerCell, { key: year, year: year, onValueChange: onValueChange, value: value })); }))); })),
+        React.createElement(Column, { justifyContent: "center" },
+            React.createElement(FlatButton, { leftIcon: faCaretRight, onClick: function () { return setLastYear(lastYear + 3); } }))));
 };
 var calculateLastYearInFocus = function (value, lastYear) {
     if (value == null) {
@@ -724,42 +751,42 @@ var CalendarWithMonthYearPickers = function CalendarWithMonthYearPickers(_a) {
     }, [setCurrentPanel]);
     switch (currentPanel) {
         case "calendar":
-            return (createElement(Fragment, null,
-                createElement(Calendar, __assign({}, props, { date: dateInFocus, onClickYear: onClickYear, onClickMonth: onClickMonth }))));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Calendar, __assign({}, props, { date: dateInFocus, onClickYear: onClickYear, onClickMonth: onClickMonth }))));
         case "month":
-            return (createElement(MonthPicker, { value: dateInFocus.getMonth(), onValueChange: onChangeSelectedMonth }));
+            return (React.createElement(MonthPicker, { value: dateInFocus.getMonth(), onValueChange: onChangeSelectedMonth }));
         case "year":
-            return (createElement(YearPicker, { value: dateInFocus.getFullYear(), onValueChange: onChangeSelectedYear }));
+            return (React.createElement(YearPicker, { value: dateInFocus.getFullYear(), onValueChange: onChangeSelectedYear }));
         case "presets":
-            return createElement(PresetPicker, { onClickPreset: function () { } });
+            return React.createElement(PresetPicker, { onClickPreset: function () { } });
         default:
-            return (createElement(Box, null,
-                createElement(PrimaryButton, { label: "Show calendar", onClick: function () { return setCurrentPanel("calendar"); } })));
+            return (React.createElement(Box, null,
+                React.createElement(PrimaryButton, { label: "Show calendar", onClick: function () { return setCurrentPanel("calendar"); } })));
     }
 };
 
 var noop = function () { };
 function CalendarWithMonthSwitcher(_a) {
-    var monthSwitcherPlacement = _a.monthSwitcherPlacement, _b = _a.theme, theme = _b === void 0 ? defaultCalendarTheme : _b, dateInFocus = _a.dateInFocus, setDateInFocus = _a.setDateInFocus, currentPanel = _a.currentPanel, setCurrentPanel = _a.setCurrentPanel, _c = _a.onSelectPreset, onSelectPreset = _c === void 0 ? noop : _c, calendarProps = __rest(_a, ["monthSwitcherPlacement", "theme", "dateInFocus", "setDateInFocus", "currentPanel", "setCurrentPanel", "onSelectPreset"]);
-    var _d = useSelectedMonthStepperLogic(dateInFocus, setDateInFocus, calendarProps.monthsPerRow, calendarProps.numMonths), nextMonth = _d.nextMonth, prevMonth = _d.prevMonth, nextYear = _d.nextYear, prevYear = _d.prevYear;
+    var monthSwitcherPlacement = _a.monthSwitcherPlacement, _b = _a.theme, theme = _b === void 0 ? defaultCalendarTheme : _b, dateInFocus = _a.dateInFocus, setDateInFocus = _a.setDateInFocus, currentPanel = _a.currentPanel, setCurrentPanel = _a.setCurrentPanel, _c = _a.onSelectPreset, onSelectPreset = _c === void 0 ? noop : _c, _d = _a.hideYearPagination, hideYearPagination = _d === void 0 ? false : _d, calendarProps = __rest(_a, ["monthSwitcherPlacement", "theme", "dateInFocus", "setDateInFocus", "currentPanel", "setCurrentPanel", "onSelectPreset", "hideYearPagination"]);
+    var _e = useSelectedMonthStepperLogic(dateInFocus, setDateInFocus, calendarProps.monthsPerRow, calendarProps.numMonths), nextMonth = _e.nextMonth, prevMonth = _e.prevMonth, nextYear = _e.nextYear, prevYear = _e.prevYear;
     var placement = fallbackIfNoPlacement(monthSwitcherPlacement, calendarProps.numMonths);
     switch (placement) {
         case "below": {
-            return (createElement(WithMonthSwitcherBelow, { theme: theme, nextMonth: nextMonth, prevMonth: prevMonth, nextYear: nextYear, prevYear: prevYear },
-                createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus }))));
+            return (React.createElement(WithMonthSwitcherBelow, { theme: theme, nextMonth: nextMonth, prevMonth: prevMonth, nextYear: nextYear, prevYear: prevYear },
+                React.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus }))));
         }
         case "header": {
-            return (createElement(Column, null,
-                createElement(CalendarWithMonthYearPickers, __assign({}, calendarProps, { theme: theme, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, onSelectPreset: onSelectPreset, headerLeftContent: createElement(Row, { alignItems: "center" },
-                        createElement(FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft }),
-                        createElement(Space, null),
-                        createElement(FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft })), headerRightContent: createElement(Row, { alignItems: "center" },
-                        createElement(FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight }),
-                        createElement(Space, null),
-                        createElement(FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight })) }))));
+            return (React.createElement(Column, null,
+                React.createElement(CalendarWithMonthYearPickers, __assign({}, calendarProps, { theme: theme, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, onSelectPreset: onSelectPreset, headerLeftContent: React.createElement(Row, { alignItems: "center" },
+                        !hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft })),
+                        React.createElement(Space, null),
+                        React.createElement(FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft })), headerRightContent: React.createElement(Row, { alignItems: "center" },
+                        React.createElement(FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight }),
+                        React.createElement(Space, null),
+                        !hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight }))) }))));
         }
         default: {
-            return (createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus })));
+            return (React.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus })));
         }
     }
 }
@@ -767,97 +794,65 @@ var fallbackIfNoPlacement = function (monthSwitcherPlacement, numMonths) {
     return monthSwitcherPlacement || (numMonths || 1) > 1 ? "below" : "header";
 };
 
-var transformDateIntervalToDateStringInterval = function (interval) { return ({
-    startDate: interval.startDate && format(interval.startDate, DateFormats.fullDate),
-    endDate: interval.endDate && format(interval.endDate, DateFormats.fullDate),
+var dateRangeToStrings = function (dateRange) { return ({
+    startDate: dateRange.startDate
+        ? format(dateRange.startDate, "yyyy-MM-dd")
+        : undefined,
+    endDate: dateRange.endDate
+        ? 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 &&
-            parse(interval.startDate, DateFormats.fullDate, now)) ||
-            undefined,
-        endDate: (interval.endDate &&
-            parse(interval.endDate, DateFormats.fullDate, now)) ||
-            undefined,
+        startDate: startDate ? parse(startDate, "yyyy-MM-dd", now) : undefined,
+        endDate: endDate ? parse(endDate, "yyyy-MM-dd", now) : undefined,
     };
+};
+
+var isDateRangeInvalid = function (_a) {
+    var startDate = _a.startDate, endDate = _a.endDate;
+    return Boolean(startDate &&
+        endDate &&
+        !isSameDay(startDate, endDate) &&
+        isAfter(startDate, endDate));
 };
-var ensureStartIsFirst = function (interval) {
-    if (interval.startDate &&
-        interval.endDate &&
-        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 useCallback(function (day) {
-        if (focusedInput === "startDate") {
-            if (endDate && 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 && 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 && isAfter(startDate, endDate)) {
-        return {
-            startDate: endDate,
-            endDate: startDate,
-        };
-    }
-    return {
-        startDate: startDate,
-        endDate: endDate,
-    };
-};
-
 var useInternalPanelState = function (onChangePanel) {
     var _a = useState("calendar"), currentPanel = _a[0], _setCurrentPanel = _a[1];
     var setCurrentPanel = useCallback(function (currentPanel) {
@@ -871,14 +866,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 = useState(function () { return new Date(); }), dateInFocus = _c[0], setDateInFocus = _c[1];
-    var onClickDay = useDateRangeOnClickDayHandler(startDate, setStartDate, endDate, setEndDate, focusedInput, setFocusedInput, onChange);
-    var dates = useMemo(function () { return toggleDatesIfEndIsEarlierThanStart(startDate, endDate); }, [startDate, endDate]);
+    var onClickDay = useDateRangeOnClickDayHandler(value, onValueChange, focusedInput, setFocusedInput);
     var statePerMonthWithSelection = 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,
@@ -891,7 +885,7 @@ var useDateRangeSelection = function (_a) {
 
 function DateRangeCalendar(props) {
     var dateRangeSelectionProps = useDateRangeSelection(props);
-    return (createElement(CalendarWithMonthSwitcher, __assign({}, props, dateRangeSelectionProps)));
+    return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, dateRangeSelectionProps)));
 }
 
 var useDateRangeCalendarState = function () {
@@ -938,7 +932,7 @@ var useSingleDateSelection = function (_a) {
 
 function SingleDateCalendar(props) {
     var singleDateSelectionProps = useSingleDateSelection(props);
-    return (createElement(CalendarWithMonthSwitcher, __assign({}, props, singleDateSelectionProps)));
+    return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleDateSelectionProps)));
 }
 
 var useMultiDateSelection = function (_a) {
@@ -954,7 +948,7 @@ var useMultiDateSelection = function (_a) {
             onChange(value.filter(function (v) { return !isSameDay(v, day.date); }));
         }
         else {
-            onChange(__spreadArrays((value || []), [day.date]));
+            onChange(__spreadArray(__spreadArray([], (value || []), true), [day.date], false));
         }
     }, [onChange, value]);
     var statePerMonthWithSelectedDate = useMemo(function () {
@@ -975,7 +969,7 @@ var useMultiDateSelection = function (_a) {
 
 function MultiDateCalendar(props) {
     var selectionProps = useMultiDateSelection(props);
-    return createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
+    return React.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
 }
 
 var useSingleWeekSelection = function (_a) {
@@ -1040,7 +1034,7 @@ var getWeekDataFromWeekString = function (week) {
 
 function SingleWeekCalendar(props) {
     var singleWeekSelectionProps = useSingleWeekSelection(props);
-    return (createElement(CalendarWithMonthSwitcher, __assign({}, props, singleWeekSelectionProps)));
+    return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleWeekSelectionProps)));
 }
 
 var removeDateIfExist = function (list, date) {
@@ -1051,46 +1045,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 = useState(), startDate = _b[0], setStartDate = _b[1];
-    var _c = useState(), endDate = _c[0], setEndDate = _c[1];
-    var _d = useState("startDate"), focusedInput = _d[0], setFocusedInput = _d[1];
-    var _e = useInternalPanelState(onChangePanel), currentPanel = _e.currentPanel, setCurrentPanel = _e.setCurrentPanel;
-    var _f = 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 = useState(), dateRange = _b[0], setDateRange = _b[1];
+    var _c = useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
+    var _d = useInternalPanelState(onChangePanel), currentPanel = _d.currentPanel, setCurrentPanel = _d.setCurrentPanel;
+    var _e = 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 = useCallback(function (value) {
+        setDateRange(value);
         var startDate = value.startDate, endDate = value.endDate;
-        if (onChange) {
+        if (onValueChange) {
             if (startDate && endDate) {
                 var dates = 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 = 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(__spreadArrays(value, [day.date]));
+                    onValueChange(__spreadArray(__spreadArray([], value, true), [day.date], false));
                 }
             }
             else {
                 onClickDayRange(day, userData, ev);
             }
         }
-    }, [onChange, onClickDayRange, value]);
+    }, [onValueChange, onClickDayRange, value]);
     var statePerMonthWithSelectedDate = useMemo(function () {
         return addHighlighting(statePerMonth, value);
     }, [statePerMonth, value]);
@@ -1114,7 +1108,7 @@ var addHighlighting = function (statePerMonth, dateList) {
 
 function DateRangeExclusionCalendar(props) {
     var selectionProps = useDateRangeExclusionSelection(props);
-    return createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
+    return React.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
 }
 
 var defaultPopoverPlacement = "bottom";
@@ -1157,16 +1151,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;
-    return (createElement(Box, { width: width },
-        createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, content: createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel })) },
-            createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendar, onClickLeft: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, autoFocus: openOnMount, variant: variant }))));
+    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.createElement(Box, { width: width },
+        React.createElement(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.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel, minDate: minDate, maxDate: maxDate })) },
+            React.createElement(TextInput, { type: "date", iconRight: faCalendarAlt, onFocus: showCalendar, onClickRight: showCalendar, value: value ? 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 = useRef(null);
     var endDateInputRef = useRef(null);
     var _a = useState(false), showingCalendar = _a[0], setShowingCalendar = _a[1];
@@ -1186,11 +1182,11 @@ var useDateRangeInput = function (value, onChange) {
     }, [setShowingCalendar]);
     var onClickDay = 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();
             }
@@ -1199,11 +1195,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();
             }
@@ -1211,12 +1207,12 @@ var useDateRangeInput = function (value, onChange) {
                 setTimeout(hideCalendar, 150);
             }
         }
-    }, [focusedInput, onChange, setFocusedInput, hideCalendar, value]);
+    }, [focusedInput, onValueChange, setFocusedInput, hideCalendar, value]);
     var startDateIsAfterEnd = 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) &&
             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,
@@ -1235,24 +1231,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 = useState(function () { var _a; return (_a = (focusedInput && value[focusedInput])) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _g[0], setDateInFocus = _g[1];
-    var _h = 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 = useMemo(function () { return buildDayStateForDateRange(undefined, value.startDate, value.endDate); }, [value]);
-    return (createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) },
-        createElement(Row, { alignItems: "center" },
-            createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendarStartDate, value: value.startDate ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
-            createElement(Space, null),
-            createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
-            createElement(Space, null),
-            createElement(TextInput, { iconLeft: faCalendarAlt, onFocus: showCalendarEndDate, value: value.endDate ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
+    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 = 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 = 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 = 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.createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) },
+        React.createElement(Row, { alignItems: "center" },
+            React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
+            React.createElement(Space, null),
+            React.createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
+            React.createElement(Space, null),
+            React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? 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, _d = _a.disableCalender, 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 = 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 = useState(false), open = _l[0], setOpen = _l[1];
+    var _m = useCalendarPopoverUpdater(), tippyRef = _m.tippyRef, onChangePanel = _m.onChangePanel;
     var toggleCalendar = useCallback(function () {
         setOpen(!open);
     }, [setOpen, open]);
@@ -1276,12 +1274,12 @@ var DateTextInput = function (_a) {
     var dateIsValid = !!value && isValid(parse(value, dateFormat, new Date()));
     var userInputCorrectLength = !!value && value.length >= dateFormat.length;
     var invalid = (userInputCorrectLength && !dateIsValid) || inValidInput;
-    return (createElement(Box, { width: width },
-        createElement(Popover, { arrow: false, lazy: true, visible: open, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", placement: defaultPopoverPlacement, onClickOutside: hideCalendar, tippyRef: tippyRef, content: createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
+    return (React.createElement(Box, { width: width },
+        React.createElement(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.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
                     ? parse(value, dateFormat, new Date())
-                    : undefined, theme: calendarTheme })) },
-            createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : "standard", disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (createElement(Row, { alignItems: "center", indent: 0.5 },
-                    createElement(FlatButton, { size: "small", leftIcon: faCalendarAlt, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", size: 10 })))));
+                    : undefined, minDate: minDate, maxDate: maxDate, theme: calendarTheme })) },
+            React.createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : "standard", disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React.createElement(Row, { alignItems: "center", indent: 0.5 },
+                    React.createElement(FlatButton, { size: "small", leftIcon: faCalendarAlt$1, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
 };
 
 var formatHours = function (hours) {
@@ -1415,11 +1413,11 @@ var TimeTextInput = function (_a) {
             onValueChange(time);
         }
     }, [onValueChange, setValid]);
-    return (createElement(TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? faClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
+    return (React.createElement(TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? faClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
 };
 
 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 = useRef(0);
     var tryTriggerOnBlur = useMemo(function () {
         return debounce(function (focusCounter) {
@@ -1456,21 +1454,21 @@ var DualTextInput = function (_a) {
             onBlurRight(ev);
         }
     }, [onBlurRight, focusCounter, tryTriggerOnBlur]);
-    return (createElement(Box, null,
-        createElement(TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: createElement(Row, { alignItems: "center" },
-                createElement(Indent, { num: 0.5 },
-                    createElement(FlatButton, { leftIcon: faCalendarAlt$1, onClick: onClickCalendar, size: "small" })),
-                showPresets ? (createElement(Fragment, null,
-                    createElement(Row, { height: "22px" },
-                        createElement(SeparatorLine, { vertical: true })),
-                    createElement(Indent, { num: 0.5 },
-                        createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
-            createElement(Box, { width: widthLeft },
-                createElement(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 })),
-            createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
-                createElement(Icon, { icon: separatorIcon, size: 12, color: cssColor("--lhds-color-ui-500") })),
-            createElement(Box, { width: widthRight },
-                createElement(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 })))));
+    return (React.createElement(Box, null,
+        React.createElement(TextInputBox, { disableContentPaddingRight: true, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
+                React.createElement(Indent, { num: 0.5 },
+                    React.createElement(FlatButton, { leftIcon: faCalendarAlt, onClick: onClickCalendar, size: "small" })),
+                showPresets ? (React.createElement(React.Fragment, null,
+                    React.createElement(Row, { height: "22px" },
+                        React.createElement(SeparatorLine, { vertical: true })),
+                    React.createElement(Indent, { num: 0.5 },
+                        React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, size: "small" })))) : null) },
+            React.createElement(Box, { width: widthLeft },
+                React.createElement(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.createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
+                React.createElement(Icon, { icon: separatorIcon, size: 12, color: cssColor("--lhds-color-ui-500") })),
+            React.createElement(Box, { width: widthRight },
+                React.createElement(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) {
@@ -1532,9 +1530,9 @@ var transformTimeInDateToTimeString = function (date) {
     return formatHours(String(date.getHours())) + ":" + formatMinutes(String(date.getMinutes()));
 };
 
-var css_248z$1 = ".TimePicker-module_timePicker__1ElGu {\n  overflow: hidden;\n  width: 180px;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE {\n  overflow-y: hidden;\n  -webkit-flex: 1;\n          flex: 1;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE:hover {\n    overflow-y: scroll;\n  }\n";
-var styles$1 = {"timePicker":"TimePicker-module_timePicker__1ElGu","timePickerColumn":"TimePicker-module_timePickerColumn__2vfuE"};
-styleInject(css_248z$1);
+var css_248z = ".TimePicker-module_timePicker__1ElGu {\n  overflow: hidden;\n  width: 180px;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE {\n  overflow-y: hidden;\n  -webkit-flex: 1;\n          flex: 1;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE:hover {\n    overflow-y: scroll;\n  }\n";
+var styles = {"timePicker":"TimePicker-module_timePicker__1ElGu","timePickerColumn":"TimePicker-module_timePickerColumn__2vfuE"};
+styleInject(css_248z);
 
 var TimePickerCell = function (_a) {
     var onClick = _a.onClick, item = _a.item, selected = _a.selected, columnRef = _a.columnRef, canScrollRef = _a.canScrollRef;
@@ -1549,13 +1547,13 @@ var TimePickerCell = function (_a) {
             canScrollRef.current = false;
         }
     }, [columnRef, item, selected, canScrollRef]);
-    return (createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5, ref: ref }, selected ? (createElement(PrimaryButton, { label: String(item), onClick: function () { return onClick && onClick(item); } })) : (createElement(FlatButton, { label: String(item), onClick: function () { return onClick && onClick(item); } }))));
+    return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5, ref: ref }, selected ? (React.createElement(PrimaryButton, { label: String(item), onClick: function () { return onClick && onClick(item); } })) : (React.createElement(FlatButton, { label: String(item), onClick: function () { return onClick && onClick(item); } }))));
 };
 
 var TimePickerColumn = function (_a) {
     var onClick = _a.onClick, items = _a.items, selectedItem = _a.selectedItem, canScrollRef = _a.canScrollRef;
     var columnRef = useRef(null);
-    return (createElement(Column, { className: styles$1.timePickerColumn, ref: columnRef }, items.map(function (item) { return (createElement(TimePickerCell, { key: item, item: item, onClick: onClick, selected: item === selectedItem, columnRef: columnRef, canScrollRef: canScrollRef })); })));
+    return (React.createElement(Column, { className: styles.timePickerColumn, ref: columnRef }, items.map(function (item) { return (React.createElement(TimePickerCell, { key: item, item: item, onClick: onClick, selected: item === selectedItem, columnRef: columnRef, canScrollRef: canScrollRef })); })));
 };
 
 var hours = range(0, 24);
@@ -1580,13 +1578,13 @@ var TimePicker = function (_a) {
         setMinute(m);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(formatHours(String(hour !== null && hour !== void 0 ? hour : 0)) + ":" + formatMinutes(String(m !== null && m !== void 0 ? m : 0)));
     }, [hour, onValueChange]);
-    return (createElement(Row, { className: styles$1.timePicker },
-        createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
-        createElement(Indent, null),
-        createElement(TimePickerColumn, { items: minutes, onClick: onClickMinutes, selectedItem: minute, canScrollRef: canScrollRef })));
+    return (React.createElement(Row, { className: styles.timePicker },
+        React.createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
+        React.createElement(Indent, null),
+        React.createElement(TimePickerColumn, { items: minutes, onClick: onClickMinutes, selectedItem: minute, canScrollRef: canScrollRef })));
 };
 
-var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
+var useDateRangeEffects$1 = function (date, setDateInFocus, dateInputRef) {
     useEffect(function moveFocusedDateWhenDateChanges() {
         if (date) {
             setDateInFocus(date);
@@ -1604,7 +1602,7 @@ var useDateRangeEffects = function (date, setDateInFocus, dateInputRef) {
     }, [date, dateInputRef]);
 };
 
-var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
+var useDateRangeHandlers$1 = function (date, onValueChange, _a, dateInputRef) {
     var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel, localTime = _a.localTime, setLocalTime = _a.setLocalTime, localDate = _a.localDate, setLocalDate = _a.setLocalDate;
     var onChangeDate = useCallback(function (incomingDate) {
         if (!incomingDate) {
@@ -1692,7 +1690,7 @@ var useDateRangeHandlers = function (date, onValueChange, _a, dateInputRef) {
     };
 };
 
-var useInputStates = function (date) {
+var useInputStates$1 = function (date) {
     var _a = useState(undefined), localDate = _a[0], setLocalDate = _a[1];
     var _b = useState(undefined), localTime = _b[0], setLocalTime = _b[1];
     var _c = useBoolean(false), isCalendarVisible = _c[0], showCalendarInternal = _c[1], hideCalendarInternal = _c[2];
@@ -1720,7 +1718,7 @@ var useInputStates = function (date) {
     };
 };
 
-var useUserInputHandlers = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
+var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
     var isCalendarVisible = _a.isCalendarVisible, setCurrentPanel = _a.setCurrentPanel, showTimePicker = _a.showTimePicker, hideTimePicker = _a.hideTimePicker;
     var onFocusLeft = useCallback(function () {
         if (!isCalendarVisible) {
@@ -1775,14 +1773,14 @@ var useUserInputHandlers = function (onChangeDate, dateInputRef, showCalendar, h
 };
 
 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 = useRef(null);
     var timeInputRef = useRef(null);
-    var states = useInputStates(value);
+    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(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(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _c.onKeyDownHandler, onFocusRight = _c.onFocusRight, onFocusLeft = _c.onFocusLeft, onClickDay = _c.onClickDay, onClickCalendarButton = _c.onClickCalendarButton, onClickArrowButton = _c.onClickArrowButton;
-    useDateRangeEffects(value, setDateInFocus, dateInputRef);
+    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 = useMemo(function () {
         var dateToHighlight = value || localDate;
         if (!dateToHighlight) {
@@ -1800,17 +1798,17 @@ var DateTimeInput = function (_a) {
     var timeValue = useMemo(function () { return (value ? transformTimeInDateToTimeString(value) : localTime); }, [value, localTime]);
     var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
     var delayedIsTimePickerVisible = useDelayedFalse(isTimePickerVisible, 300);
-    return (createElement(Box, { onKeyDown: onKeyDownHandler },
-        createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (createElement(Column, null, delayedIsCalendarVisible ? (createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) : delayedIsTimePickerVisible ? (createElement(Column, null,
-                createElement(Column, { overflow: "hidden", height: "250px" },
-                    createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
-                createElement(Space, null),
-                createElement(Row, { justifyContent: "flex-end" },
-                    createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
-            createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1, 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" }))));
+    return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
+        React.createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React.createElement(Column, null, delayedIsCalendarVisible ? (React.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) : delayedIsTimePickerVisible ? (React.createElement(Column, null,
+                React.createElement(Column, { overflow: "hidden", height: "250px" },
+                    React.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
+                React.createElement(Space, null),
+                React.createElement(Row, { justifyContent: "flex-end" },
+                    React.createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
+            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1, 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$1 = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
+var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
     useEffect(function moveFocusedDateWhenStartDateChanges() {
         if (startDate) {
             setDateInFocus(startDate);
@@ -1843,7 +1841,7 @@ var useDateRangeEffects$1 = function (startDate, endDate, setDateInFocus, startD
     }, [endDate, endDateInputRef]);
 };
 
-var useDateRangeHandlers$1 = function (startDate, endDate, onValueChange, _a) {
+var useDateRangeHandlers = function (startDate, endDate, onValueChange, _a) {
     var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel;
     var inputLeftChangeHandler = useCallback(function (ev) {
         var _a;
@@ -1896,7 +1894,7 @@ var useDateRangeHandlers$1 = function (startDate, endDate, onValueChange, _a) {
     };
 };
 
-var useInputStates$1 = function (startDate, endDate) {
+var useInputStates = function (startDate, endDate) {
     var _a = useBoolean(false), isCalendarVisible = _a[0], showCalendarInternal = _a[1], hideCalendarInternal = _a[2];
     var _b = useState(undefined), firstFocusedInput = _b[0], setFirstFocusedInput = _b[1];
     var _c = useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
@@ -1924,7 +1922,7 @@ var useInputStates$1 = function (startDate, endDate) {
     };
 };
 
-var useUserInputHandlers$1 = function (startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, _a) {
+var useUserInputHandlers = function (startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, _a) {
     var firstFocusedInput = _a.firstFocusedInput, setFirstFocusedInput = _a.setFirstFocusedInput, isCalendarVisible = _a.isCalendarVisible, setFocusedInput = _a.setFocusedInput, focusedInput = _a.focusedInput, setCurrentPanel = _a.setCurrentPanel;
     var onFocusLeft = useCallback(function () {
         if (firstFocusedInput == null) {
@@ -1957,30 +1955,52 @@ var useUserInputHandlers$1 = function (startDate, endDate, onValueChange, startD
         firstFocusedInput,
     ]);
     var onClickDay = useCallback(function (day) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (focusedInput === "startDate") {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                startDate: day.date,
-                endDate: endDate,
-            });
-            if (firstFocusedInput === "startDate") {
+            if (endDate != null && isAfter(day.date, endDate)) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
+                    startDate: day.date,
+                    endDate: undefined,
+                });
                 setFocusedInput("endDate");
                 (_a = endDateInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                setTimeout(hideCalendar, 50);
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
+                    startDate: day.date,
+                    endDate: endDate,
+                });
+                if (firstFocusedInput === "startDate") {
+                    setFocusedInput("endDate");
+                    (_b = endDateInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                else {
+                    setTimeout(hideCalendar, 50);
+                }
             }
         }
         else if (focusedInput === "endDate") {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                startDate: startDate,
-                endDate: day.date,
-            });
-            if (!startDate || isAfter(startDate, day.date)) {
+            if (!startDate) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
+                    startDate: startDate,
+                    endDate: day.date,
+                });
                 setFocusedInput("startDate");
-                (_b = startDateInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                (_c = startDateInputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+            else if (isAfter(startDate, day.date)) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
+                    startDate: day.date,
+                    endDate: undefined,
+                });
+                setFocusedInput("endDate");
+                (_d = endDateInputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
             }
             else {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
+                    startDate: startDate,
+                    endDate: day.date,
+                });
                 setTimeout(hideCalendar, 50);
             }
         }
@@ -2036,24 +2056,24 @@ var useUserInputHandlers$1 = function (startDate, endDate, onValueChange, startD
 };
 
 var DateRangeDualTextInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc;
-    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, _c = _a.widthLeft, widthLeft = _c === void 0 ? 128 : _c, _d = _a.widthRight, widthRight = _d === void 0 ? 128 : _d;
+    var _e = value || {}, startDate = _e.startDate, endDate = _e.endDate;
     var startDateInputRef = useRef(null);
     var endDateInputRef = useRef(null);
-    var states = useInputStates$1(startDate, endDate);
+    var states = useInputStates(startDate, endDate);
     var dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isCalendarVisible = states.isCalendarVisible, currentPanel = states.currentPanel, setCurrentPanel = states.setCurrentPanel;
-    var _c = useDateRangeHandlers$1(startDate, endDate, onValueChange, states), showCalendar = _c.showCalendar, hideCalendar = _c.hideCalendar, inputLeftChangeHandler = _c.inputLeftChangeHandler, inputRightChangeHandler = _c.inputRightChangeHandler;
-    var _d = useUserInputHandlers$1(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;
-    useDateRangeEffects$1(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
+    var _f = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _f.showCalendar, hideCalendar = _f.hideCalendar, inputLeftChangeHandler = _f.inputLeftChangeHandler, inputRightChangeHandler = _f.inputRightChangeHandler;
+    var _g = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _g.onKeyDownHandler, onFocusRight = _g.onFocusRight, onFocusLeft = _g.onFocusLeft, onClickDay = _g.onClickDay, onClickCalendarButton = _g.onClickCalendarButton, onClickArrowButton = _g.onClickArrowButton;
+    useDateRangeEffects(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
     var startDateIsAfterEnd = useMemo(function () { return startDate && endDate && isAfter(startDate, endDate); }, [startDate, endDate]);
     var statePerMonth = useMemo(function () {
-        return buildDayStateForSingleMonth(undefined, startDate, endDate, dateInFocus);
-    }, [startDate, endDate, dateInFocus]);
+        return buildDayStateForSingleMonth(calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus);
+    }, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
     var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
-    return (createElement(Box, { onKeyDown: onKeyDownHandler },
-        createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel })) },
-            createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: 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" }))));
+    return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
+        React.createElement(Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate }, calendarProps, { statePerMonth: statePerMonth }))) },
+            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: 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: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
 };
 
-export { Calendar, CalendarDay, DateInput, DateRangeCalendar, DateRangeDualTextInput, DateRangeExclusionCalendar, DateRangeInput, DateTextInput, DateTimeInput, Month, MonthPicker, MultiDateCalendar, PresetPicker, SingleDateCalendar, SingleWeekCalendar, TimeTextInput, WeekDay, WeekDayCell, WeekNumberCell, YearPicker, addDayStateHighlights, addWeekRangeHighlights, addWeekStateHighlights, buildDayStateForDateRange, buildDayStateForRange, buildDayStateForSingleMonth, calculateOverflowingMonth, createDay, dayHasHighlight, dayHighlightSelect, defaultCalendarTheme, defaultTextPropsProvider, defaultWrapperStyleProvider, ensureStartIsFirst, extranetCalendarTheme, getDaysForWeekForDate, getMonthInYear, getMonthsInYear, getStartDateOfISOWeek, getWeekForDate, getWeeksForMonth, setDayStateValue, setDayStateValueFunction, transformDateIntervalToDateStringInterval, transformDateStringIntervalToDateInterval, useDateRangeCalendarState, useDateRangeExclusionSelection, useDateRangeSelection, useMultiDateSelection, useSingleDateSelection, useSingleWeekSelection };
+export { Calendar, CalendarDay, DateInput, DateRangeCalendar, DateRangeDualTextInput, DateRangeExclusionCalendar, DateRangeInput, DateTextInput, DateTimeInput, Month, MonthPicker, MultiDateCalendar, PresetPicker, SingleDateCalendar, SingleWeekCalendar, TimeTextInput, WeekDay, WeekDayCell, WeekNumberCell, YearPicker, addDayStateHighlights, addDayStateHighlightsOnSingleDay, addWeekRangeHighlights, addWeekStateHighlights, buildDayStateForDateRange, buildDayStateForRange, buildDayStateForSingleMonth, calculateOverflowingMonth, createDay, dateRangeToStrings, dayHasHighlight, dayHighlightSelect, defaultCalendarTheme, defaultTextPropsProvider, defaultWrapperStyleProvider, extranetCalendarTheme, getDaysForWeekForDate, getMonthInYear, getMonthsInYear, getStartDateOfISOWeek, getWeekForDate, getWeeksForMonth, isDateRangeInvalid, setDayStateValue, setDayStateValueFunction, stringsToDateRange, toggleDateStringsIfEndIsEarlierThanStart, toggleDatesIfEndIsEarlierThanStart, useDateRangeCalendarState, useDateRangeExclusionSelection, useDateRangeSelection, useMultiDateSelection, useSingleDateSelection, useSingleWeekSelection };
 //# sourceMappingURL=index.es.js.map