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

package/dist/index.js

@@ -1799,13 +1799,13 @@ var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar,
 };
 
 var DateTimeInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b;
+    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;
     var dateInputRef = React.useRef(null);
     var timeInputRef = React.useRef(null);
     var states = useInputStates$1(value);
     var setCurrentPanel = states.setCurrentPanel, currentPanel = states.currentPanel, isCalendarVisible = states.isCalendarVisible, dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isTimePickerVisible = states.isTimePickerVisible, hideTimePicker = states.hideTimePicker, localTime = states.localTime, localDate = states.localDate;
-    var _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;
+    var _e = useDateRangeHandlers$1(value, onValueChange, states, dateInputRef), showCalendar = _e.showCalendar, hideCalendar = _e.hideCalendar, inputLeftChangeHandler = _e.inputLeftChangeHandler, inputRightChangeHandler = _e.inputRightChangeHandler, onChangeTime = _e.onChangeTime, onChangeDate = _e.onChangeDate;
+    var _f = useUserInputHandlers$1(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _f.onKeyDownHandler, onFocusRight = _f.onFocusRight, onFocusLeft = _f.onFocusLeft, onClickDay = _f.onClickDay, onClickCalendarButton = _f.onClickCalendarButton, onClickArrowButton = _f.onClickArrowButton;
     useDateRangeEffects$1(value, setDateInFocus, dateInputRef);
     var statePerMonth = React.useMemo(function () {
         var dateToHighlight = value || localDate;
@@ -1831,7 +1831,7 @@ var DateTimeInput = function (_a) {
                 React__namespace.createElement(core.Space, null),
                 React__namespace.createElement(core.Row, { justifyContent: "flex-end" },
                     React__namespace.createElement(elements.PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
-            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1.faClock, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: "104px", widthRight: "64px", minLeft: minDate, maxLeft: maxDate }))));
+            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: faClock$1.faClock, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate }))));
 };
 
 var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
@@ -2082,14 +2082,14 @@ var useUserInputHandlers = function (startDate, endDate, onValueChange, startDat
 };
 
 var DateRangeDualTextInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b, calendarProps = _a.calendarProps;
-    var _c = value || {}, startDate = _c.startDate, endDate = _c.endDate;
+    var 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 = React.useRef(null);
     var endDateInputRef = React.useRef(null);
     var states = useInputStates(startDate, endDate);
     var dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isCalendarVisible = states.isCalendarVisible, currentPanel = states.currentPanel, setCurrentPanel = states.setCurrentPanel;
-    var _d = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _d.showCalendar, hideCalendar = _d.hideCalendar, inputLeftChangeHandler = _d.inputLeftChangeHandler, inputRightChangeHandler = _d.inputRightChangeHandler;
-    var _e = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _e.onKeyDownHandler, onFocusRight = _e.onFocusRight, onFocusLeft = _e.onFocusLeft, onClickDay = _e.onClickDay, onClickCalendarButton = _e.onClickCalendarButton, onClickArrowButton = _e.onClickArrowButton;
+    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 = React.useMemo(function () { return startDate && endDate && dateFns.isAfter(startDate, endDate); }, [startDate, endDate]);
     var statePerMonth = React.useMemo(function () {
@@ -2098,7 +2098,7 @@ var DateRangeDualTextInput = function (_a) {
     var delayedIsCalendarVisible = core.useDelayedFalse(isCalendarVisible, 300);
     return (React__namespace.createElement(core.Box, { onKeyDown: onKeyDownHandler },
         React__namespace.createElement(tooltip.Popover, { arrow: false, lazy: true, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React__namespace.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate }, calendarProps, { statePerMonth: statePerMonth }))) },
-            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: elements.stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : undefined, widthLeft: "104px", widthRight: "104px", minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
+            React__namespace.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, separatorIcon: elements.stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : undefined, widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
 };
 
 exports.Calendar = Calendar;