@stenajs-webui/calendar 15.7.0 → 17.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# v17.0.0 (Fri Jun 17 2022)
+
+#### 💥 Breaking Change
+
+- Upgrade and apply prettier. [#467](https://github.com/StenaIT/stenajs-webui/pull/467) ([@mattias800](https://github.com/mattias800))
+
+#### 🔩 Dependency Updates
+
+- Update Typescript, React, Jest, etc. [#466](https://github.com/StenaIT/stenajs-webui/pull/466) ([@mattias800](https://github.com/mattias800))
+
+#### Authors: 1
+
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
+# v16.0.0 (Wed Jun 15 2022)
+
+#### 💥 Breaking Change
+
+- Add variant to Select and date inputs [#463](https://github.com/StenaIT/stenajs-webui/pull/463) ([@nikteg](https://github.com/nikteg) [@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 2
+
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+- Niklas ([@nikteg](https://github.com/nikteg))
+
+---
+
 # v15.7.0 (Tue Jun 14 2022)
 
 #### 🚀 Enhancement

package/dist/components/input-types/date-input/UseDateInput.d.ts

@@ -1,5 +1,5 @@
-export declare const useDateInput: (onChange?: ((date: Date | undefined) => void) | undefined, onClose?: (() => void) | undefined, openOnMount?: boolean | undefined) => {
-    showCalendar: () => boolean;
+export declare const useDateInput: (onChange?: ((date: Date | undefined) => void) | undefined, onClose?: () => void, openOnMount?: boolean) => {
+    showCalendar: () => true;
     hideCalendar: () => void;
     showingCalendar: boolean;
     onSelectDate: (date: Date | undefined) => void;

package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.d.ts

@@ -4,7 +4,7 @@ import { DualTextInputProps } from "../../../features/dual-text-input/DualTextIn
 import { DateRangeInputCalendarProps } from "../../calendar-types/date-range-calendar/DateRangeCalendar";
 import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
 import { DateRange } from "../../../types/DateRange";
-export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOnValueChangeProps<DateRange>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight"> {
+export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOnValueChangeProps<DateRange>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight" | "variant"> {
     onEsc?: () => void;
     onEnter?: () => void;
     onBlur?: () => void;
@@ -12,4 +12,4 @@ export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOn
     calendarProps?: DateRangeInputCalendarProps<TData>;
     disabled?: boolean;
 }
-export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, disabled, }: DateRangeDualTextInputProps<TData>) => JSX.Element;
+export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, variant, disabled, }: DateRangeDualTextInputProps<TData>) => JSX.Element;

package/dist/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.stories.d.ts

@@ -2,11 +2,12 @@
 import { Story } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, disabled, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
+    component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, variant, disabled, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
     decorators: ((TheStory: Story) => JSX.Element)[];
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;
 export declare const StartSelected: () => JSX.Element;

package/dist/components/input-types/date-range-input/hooks/UseDateRangeInput.d.ts

@@ -5,8 +5,8 @@ import { DateRange } from "../../../../types/DateRange";
 export declare const useDateRangeInput: (value: DateRange | undefined, onValueChange: ((dateRange: DateRange) => void) | undefined) => {
     showingCalendar: boolean;
     hideCalendar: () => void;
-    showCalendarEndDate: () => boolean;
-    showCalendarStartDate: () => boolean;
+    showCalendarEndDate: () => true;
+    showCalendarStartDate: () => true;
     focusedInput: DateRangeFocusedInput;
     setFocusedInput: import("react").Dispatch<import("react").SetStateAction<DateRangeFocusedInput>>;
     startDateInputRef: import("react").RefObject<HTMLInputElement>;

package/dist/components/input-types/date-text-input/DateTextInput.stories.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
 export default _default;
 export declare const Standard: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const EnglishDateFormat: () => JSX.Element;
 export declare const DutchDateFormat: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;

package/dist/components/input-types/date-time-input/DateTimeInput.d.ts

@@ -2,7 +2,7 @@ import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import * as React from "react";
 import { DualTextInputProps } from "../../../features/dual-text-input/DualTextInput";
 import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
-export interface DateTimeInputProps extends ValueAndOnValueChangeProps<Date | null>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight"> {
+export interface DateTimeInputProps extends ValueAndOnValueChangeProps<Date | null>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight" | "variant"> {
     onEsc?: () => void;
     onEnter?: () => void;
     onBlur?: () => void;

package/dist/components/input-types/date-time-input/DateTimeInput.stories.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;
 export declare const PreselectedValue: () => JSX.Element;

package/dist/features/month-switcher/MonthSwitcherBelow.d.ts

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { CalendarTheme } from "../../components/calendar/CalendarTheme";
+import { ReactNode } from "react";
 export interface WithMonthSwitcherBelowProps {
     theme: CalendarTheme;
     nextMonth: () => void;
     prevMonth: () => void;
     nextYear: () => void;
     prevYear: () => void;
+    children?: ReactNode;
 }
 export declare const WithMonthSwitcherBelow: React.FC<WithMonthSwitcherBelowProps>;

package/dist/features/month-switcher/hooks/UseSelectedMonthStepperLogic.d.ts

@@ -1,4 +1,4 @@
-export declare const useSelectedMonthStepperLogic: (dateInFocus: Date, setDateInFocus?: ((dateInFocus: Date) => void) | undefined, monthsPerRow?: number | undefined, numMonths?: number | undefined) => {
+export declare const useSelectedMonthStepperLogic: (dateInFocus: Date, setDateInFocus?: ((dateInFocus: Date) => void) | undefined, monthsPerRow?: number, numMonths?: number) => {
     nextMonth: () => void;
     prevMonth: () => void;
     nextYear: () => void;

package/dist/index.es.js

@@ -143,7 +143,7 @@ var setDayStateValueFunction = function (state, date, setter) {
 var addDayStateHighlights = function (calendarState, date, highlights) {
     var _a, _b, _c;
     var month = date.getMonth() + 1;
-    var monthString = date.getFullYear() + "-" + (month < 10 ? "0" : "") + month;
+    var monthString = "".concat(date.getFullYear(), "-").concat(month < 10 ? "0" : "").concat(month);
     var weekNumber = getISOWeek(date);
     var dayInMonth = getDate(date);
     var dayState = calendarState &&
@@ -162,7 +162,7 @@ var addWeekStateHighlights = function (calendarState, week, highlights) {
     var _a, _b;
     var date = week.days[0].date;
     var month = date.getMonth() + 1;
-    var monthString = date.getFullYear() + "-" + (month < 10 ? "0" : "") + month;
+    var monthString = "".concat(date.getFullYear(), "-").concat(month < 10 ? "0" : "").concat(month);
     var weekNumber = week.weekNumber;
     var state = calendarState;
     week.days.forEach(function (day) {
@@ -1019,7 +1019,7 @@ var getWeekStringFromWeekData = function (week) {
     if (!week) {
         return undefined;
     }
-    return week.endYear + "-" + week.weekNumber;
+    return "".concat(week.endYear, "-").concat(week.weekNumber);
 };
 var getWeekDataFromWeekString = function (week) {
     if (!week) {
@@ -1248,7 +1248,7 @@ var DateRangeInput = function (_a) {
 };
 
 var DateTextInput = function (_a) {
-    var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c; _a.disableCalender; var onValueChange = _a.onValueChange, _e = _a.placeholder, placeholder = _e === void 0 ? "yyyy-mm-dd" : _e, portalTarget = _a.portalTarget, value = _a.value, _f = _a.width, width = _f === void 0 ? "130px" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.calendarTheme, calendarTheme = _h === void 0 ? defaultCalendarTheme : _h, _j = _a.hideCalenderIcon, hideCalenderIcon = _j === void 0 ? false : _j, 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 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, variant = _a.variant, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon", "minDate", "maxDate", "variant"]);
     var _l = useState(false), open = _l[0], setOpen = _l[1];
     var _m = useCalendarPopoverUpdater(), tippyRef = _m.tippyRef, onChangePanel = _m.onChangePanel;
     var toggleCalendar = useCallback(function () {
@@ -1278,7 +1278,7 @@ var DateTextInput = function (_a) {
         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, 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(TextInput, __assign({}, props, { variant: invalid ? "error" : variant, disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React.createElement(Row, { alignItems: "center", indent: 0.5 },
                     React.createElement(FlatButton, { size: "small", disabled: props.disabled, leftIcon: faCalendarAlt$1, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
 };
 
@@ -1295,7 +1295,7 @@ var formatHours = function (hours) {
     }
     switch (hours.length) {
         case 1:
-            return "0" + h;
+            return "0".concat(h);
         case 2:
             return hours;
         default:
@@ -1315,7 +1315,7 @@ var formatMinutes = function (minutes) {
     }
     switch (minutes.length) {
         case 1:
-            return "0" + m;
+            return "0".concat(m);
         case 2:
             return minutes;
         default:
@@ -1331,7 +1331,7 @@ var formatTimeString = function (time) {
         try {
             var hours = formatHours(arr[0]);
             var minutes = formatMinutes(arr[1]);
-            return { time: hours + ":" + minutes, success: true };
+            return { time: "".concat(hours, ":").concat(minutes), success: true };
         }
         catch (_a) {
             return { time: time, success: false };
@@ -1342,21 +1342,21 @@ var formatTimeString = function (time) {
         var minutes = 0;
         switch (time.length) {
             case 1:
-                return { time: "0" + time + ":00", success: true };
+                return { time: "0".concat(time, ":00"), success: true };
             case 2:
                 var timeNumber = parseInt(arr[0], 10);
                 if (timeNumber >= 0 && timeNumber < 24) {
-                    return { time: time + ":00", success: true };
+                    return { time: "".concat(time, ":00"), success: true };
                 }
                 else if (timeNumber >= 24 && timeNumber < 59) {
-                    return { time: "00:" + time, success: true };
+                    return { time: "00:".concat(time), success: true };
                 }
                 return { time: time, success: false };
             case 3:
                 minutes = parseInt(time.substr(1, 2), 10);
                 if (minutes >= 0 && minutes <= 59) {
                     return {
-                        time: "0" + time.substr(0, 1) + ":" + time.substr(1, 2),
+                        time: "0".concat(time.substr(0, 1), ":").concat(time.substr(1, 2)),
                         success: true,
                     };
                 }
@@ -1371,7 +1371,7 @@ var formatTimeString = function (time) {
                     return { time: time, success: false };
                 }
                 return {
-                    time: time.substr(0, 2) + ":" + time.substr(2, 2),
+                    time: "".concat(time.substr(0, 2), ":").concat(time.substr(2, 2)),
                     success: true,
                 };
             default:
@@ -1527,7 +1527,7 @@ var getHoursAndMinutesFromTimeString = function (value) {
     };
 };
 var transformTimeInDateToTimeString = function (date) {
-    return formatHours(String(date.getHours())) + ":" + formatMinutes(String(date.getMinutes()));
+    return "".concat(formatHours(String(date.getHours())), ":").concat(formatMinutes(String(date.getMinutes())));
 };
 
 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  flex: 1;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE:hover {\n    overflow-y: scroll;\n  }\n";
@@ -1572,11 +1572,11 @@ var TimePicker = function (_a) {
     }, [value]);
     var onClickHour = useCallback(function (h) {
         setHour(h);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(formatHours(String(h !== null && h !== void 0 ? h : 0)) + ":" + formatMinutes(String(minute !== null && minute !== void 0 ? minute : 0)));
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("".concat(formatHours(String(h !== null && h !== void 0 ? h : 0)), ":").concat(formatMinutes(String(minute !== null && minute !== void 0 ? minute : 0))));
     }, [minute, onValueChange]);
     var onClickMinutes = useCallback(function (m) {
         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)));
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("".concat(formatHours(String(hour !== null && hour !== void 0 ? hour : 0)), ":").concat(formatMinutes(String(m !== null && m !== void 0 ? m : 0))));
     }, [hour, onValueChange]);
     return (React.createElement(Row, { className: styles.timePicker },
         React.createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
@@ -1773,7 +1773,7 @@ var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar,
 };
 
 var DateTimeInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.widthLeft, widthLeft = _b === void 0 ? 128 : _b, _c = _a.widthRight, widthRight = _c === void 0 ? 80 : _c, _d = _a.maxDate, maxDate = _d === void 0 ? defaultMaxDate : _d, disabled = _a.disabled;
+    var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.widthLeft, widthLeft = _b === void 0 ? 128 : _b, _c = _a.widthRight, widthRight = _c === void 0 ? 80 : _c, _d = _a.maxDate, maxDate = _d === void 0 ? defaultMaxDate : _d, variant = _a.variant, disabled = _a.disabled;
     var dateInputRef = useRef(null);
     var timeInputRef = useRef(null);
     var states = useInputStates$1(value);
@@ -1805,7 +1805,7 @@ var DateTimeInput = function (_a) {
                 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, disabled: disabled, 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: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate }))));
+            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, 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: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, variant: variant }))));
 };
 
 var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
@@ -2056,7 +2056,7 @@ var useUserInputHandlers = function (startDate, endDate, onValueChange, startDat
 };
 
 var DateRangeDualTextInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, 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, disabled = _a.disabled;
+    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, variant = _a.variant, disabled = _a.disabled;
     var _e = value || {}, startDate = _e.startDate, endDate = _e.endDate;
     var startDateInputRef = useRef(null);
     var endDateInputRef = useRef(null);
@@ -2072,7 +2072,7 @@ var DateRangeDualTextInput = function (_a) {
     var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
     return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
         React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, 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, disabled: disabled, 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 }))));
+            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, 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" : variant, 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, 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 };