@stenajs-webui/calendar 15.0.0-alpha.9 → 15.0.0

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

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+import { DualTextInputProps } from "../../../features/dual-text-input/DualTextInput";
 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 {
+export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOnValueChangeProps<DateRange>, OptionalMinMaxDatesAsString, Pick<DualTextInputProps, "widthLeft" | "widthRight"> {
     onEsc?: () => void;
     onEnter?: () => void;
     onBlur?: () => void;
     autoFocus?: boolean;
     calendarProps?: DateRangeInputCalendarProps<TData>;
 }
-export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, }: DateRangeDualTextInputProps<TData>) => JSX.Element;
+export declare const DateRangeDualTextInput: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, }: DateRangeDualTextInputProps<TData>) => JSX.Element;

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

@@ -2,7 +2,7 @@
 import { Story } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
+    component: <TData extends {}>({ value, onValueChange, autoFocus, onBlur, onEnter, onEsc, minDate, maxDate, calendarProps, widthLeft, widthRight, }: import("./DateRangeDualTextInput").DateRangeDualTextInputProps<TData>) => JSX.Element;
     decorators: ((TheStory: Story) => JSX.Element)[];
 };
 export default _default;
@@ -13,3 +13,4 @@ export declare const EndSelected: () => JSX.Element;
 export declare const RangeSelected: () => JSX.Element;
 export declare const WithHiddenYearPagination: () => JSX.Element;
 export declare const MinMaxDates: () => JSX.Element;
+export declare const FieldWidth: () => JSX.Element;

package/dist/index.es.js

@@ -2056,14 +2056,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 = useRef(null);
     var endDateInputRef = 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 = useMemo(function () { return startDate && endDate && isAfter(startDate, endDate); }, [startDate, endDate]);
     var statePerMonth = useMemo(function () {
@@ -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, 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: "104px", widthRight: "104px", minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
+            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, 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 };