@stenajs-webui/calendar 23.8.0 → 23.9.0

package/dist/features/travel-calendar/components/TravelCalendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { MonthData } from "../../../util/calendar/CalendarDataFactory";
 import { Dispatch, SetStateAction } from "react";
+import { MonthData } from "../../../util/calendar/CalendarDataFactory";
 export type TravelCalendarSizeVariant = "smaller" | "small" | "medium" | "large";
 export interface TravelCalendarProps {
     visibleMonthData: MonthData;
@@ -11,7 +11,13 @@ export interface TravelCalendarProps {
     setHoverDate: Dispatch<SetStateAction<Date | undefined>>;
     selectedStartDate: Date | undefined;
     selectedEndDate: Date | undefined;
+    /** The date that the mouse is hovering over. */
     hoverDate: Date | undefined;
+    /**
+     * The other date to show range highlight between, when the user hovers the mouse.
+     * If not set, only hovered date will be highlighted, not range.
+     * */
+    hoverAnchor: Date | undefined;
     today: Date;
     isDateDisabled?: (date: Date) => boolean;
     dateTestId?: (date: Date) => string | undefined;
@@ -19,5 +25,9 @@ export interface TravelCalendarProps {
     todayIsInVisibleMonth: boolean;
     size?: TravelCalendarSizeVariant;
     multiSelectable: boolean;
+    /**
+     * If "left", only hovering on earlier dates will create a highlight. If undefined, no range will be highlighted.
+     */
+    hoverHighlightDirection: "left" | "right" | undefined;
 }
 export declare const TravelCalendar: React.FC<TravelCalendarProps>;

package/dist/features/travel-calendar/components/TravelDateCell.d.ts

@@ -11,12 +11,19 @@ export interface TravelDateCellProps {
     onChangeVisibleMonth: (visibleMonth: Date) => void;
     onStartHover: (date: Date) => void;
     onEndHover: (date: Date) => void;
+    /** Current date that the mouse is hovering over. */
     hoverDate: Date | undefined;
+    /** The other date to show range highlight between, when user hovers the mouse. */
+    hoverAnchor: Date | undefined;
     today: Date;
     todayIsInVisibleMonth: boolean;
     calendarId: string;
     isDateDisabled?: (date: Date) => boolean;
     dateTestId?: (date: Date) => string | undefined;
     size: TravelCalendarSizeVariant;
+    /**
+     * If "left", only hovering on earlier dates will create a highlight. If undefined, no range will be highlighted.
+     */
+    hoverHighlightDirection: "left" | "right" | undefined;
 }
 export declare const TravelDateCell: React.FC<TravelDateCellProps>;

package/dist/features/travel-calendar/components/TravelDateRangeTextInputFields.d.ts

@@ -1,19 +1,25 @@
 import * as React from "react";
+import { RefObject } from "react";
 import { DateTextInputVariant, TravelDateRangeInputValue } from "../types";
 import { TravelCalendarSizeVariant } from "./TravelCalendar";
 import { SupportedLocaleCode } from "../../localize-date-format/LocaleMapper";
+export type TravelDateRangeTextInputField = "startDate" | "endDate";
 export interface TravelDateRangeTextInputFieldsProps {
     value: TravelDateRangeInputValue | undefined;
     onValueChange: ((value: Partial<TravelDateRangeInputValue>) => void) | undefined;
     localeCode: SupportedLocaleCode;
     startDateLabel?: string;
     endDateLabel?: string;
-    onFocus?: () => void;
+    onFocus?: (field: TravelDateRangeTextInputField) => void;
+    onBlur?: () => void;
+    startDateRef?: RefObject<HTMLInputElement | null>;
+    endDateRef?: RefObject<HTMLInputElement | null>;
     calendarSize: TravelCalendarSizeVariant;
     placeholderWhenBlurredStartDate: string | undefined;
     placeholderWhenBlurredEndDate: string | undefined;
     valueWhenBlurredStartDate: string | undefined;
     valueWhenBlurredEndDate: string | undefined;
     variant: DateTextInputVariant;
+    readOnlyOnMobile: boolean;
 }
 export declare const TravelDateRangeTextInputFields: React.FC<TravelDateRangeTextInputFieldsProps>;

package/dist/features/travel-calendar/components/TravelDateTextInput.d.ts

@@ -1,9 +1,11 @@
 import * as React from "react";
+import { RefObject } from "react";
 import { LabelledTextInputProps } from "@stenajs-webui/forms";
 import { InputMask, InputMaskPipe, InputMaskProvider } from "@stenajs-webui/input-mask";
 import { TravelCalendarSizeVariant } from "./TravelCalendar";
 import { DateTextInputVariant } from "../types";
-export interface TravelDateTextInputProps extends Pick<LabelledTextInputProps, "onChange" | "onValueChange" | "value" | "onFocus" | "onBlur" | "placeholder" | "label" | "borderRadiusVariant"> {
+export interface TravelDateTextInputProps extends Pick<LabelledTextInputProps, "readOnly" | "onChange" | "onValueChange" | "value" | "onFocus" | "onBlur" | "placeholder" | "label" | "borderRadiusVariant"> {
+    ref?: RefObject<HTMLInputElement | null>;
     mask: InputMask | InputMaskProvider;
     pipe?: InputMaskPipe;
     guide?: boolean;

package/dist/features/travel-calendar/components/TravelDateTextInputField.d.ts

@@ -12,5 +12,6 @@ export interface TravelDateTextInputFieldProps {
     placeholderWhenBlurred: string | undefined;
     valueWhenBlurred: string | undefined;
     variant: DateTextInputVariant;
+    readOnlyOnMobile: boolean;
 }
 export declare const TravelDateTextInputField: React.FC<TravelDateTextInputFieldProps>;

package/dist/features/travel-calendar/hooks/UseTravelDateInput.d.ts

@@ -12,6 +12,7 @@ export declare const useTravelDateInput: (value: string | undefined, onValueChan
     visibleMonthData: import("../../../util/calendar/CalendarDataFactory").MonthData;
     todayIsInVisibleMonth: boolean;
     hoverDate: Date | undefined;
+    hoverAnchor: undefined;
     setHoverDate: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
     selectedDate: Date | undefined;
     today: Date;

package/dist/features/travel-calendar/hooks/UseTravelDateRangeInput.d.ts

@@ -1,6 +1,6 @@
 import { SupportedLocaleCode } from "../../localize-date-format/LocaleMapper";
 import { TravelDateRangeInputValue, VisiblePanel } from "../types";
-export declare const useTravelDateRangeInput: (value: TravelDateRangeInputValue | undefined, onValueChange: ((value: TravelDateRangeInputValue) => void) | undefined, localeCode: SupportedLocaleCode, languageLocaleCode: SupportedLocaleCode, initialMonthInFocus: Date | undefined) => {
+export declare const useTravelDateRangeInput: (value: TravelDateRangeInputValue | undefined, onValueChange: ((value: TravelDateRangeInputValue) => void) | undefined, localeCode: SupportedLocaleCode, languageLocaleCode: SupportedLocaleCode, initialMonthInFocus: Date | undefined, fieldLastInFocus: "startDate" | "endDate" | undefined, setFieldLastInFocus: (field: "startDate" | "endDate" | undefined) => void, moveFocusToField: (field: "startDate" | "endDate") => void, hideCalendar: undefined | (() => void)) => {
     onClickDate: (date: Date) => void;
     onValueChangeByInputs: (value: TravelDateRangeInputValue) => void;
     isValidDateRange: boolean;
@@ -14,6 +14,8 @@ export declare const useTravelDateRangeInput: (value: TravelDateRangeInputValue
     todayIsInVisibleMonth: boolean;
     hoverDate: Date | undefined;
     setHoverDate: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
+    hoverAnchor: Date | undefined;
+    hoverHighlightDirection: "left" | "right" | undefined;
     selectedStartDate: Date | undefined;
     selectedEndDate: Date | undefined;
     today: Date;

package/dist/features/travel-calendar/util/CellBgColors.d.ts

@@ -1,4 +1,12 @@
-export declare const getCellBackgroundColors: (date: Date, selectedStartDate: Date | undefined, selectedEndDate: Date | undefined, hoverDate: Date | undefined, dayIsInMonth: boolean, isValidDateRange: boolean) => {
+export declare const getCellBackgroundColors: (date: Date, selectedStartDate: Date | undefined, selectedEndDate: Date | undefined, hoverHighlightDirection: "left" | "right" | undefined, hoverDate: Date | undefined, hoverAnchor: Date | undefined, dayIsInMonth: boolean, isValidDateRange: boolean) => {
+    left: string;
+    right: string;
+};
+export declare const getCellBackgroundHighlight: (date: Date, highlightStartDate: Date | undefined, highlightEndDate: Date | undefined, hoverDate: Date | undefined) => {
+    left: string;
+    right: string;
+};
+export declare const getCellBackgroundHoverRangeHighlight: (date: Date, hoverHighlightDirection: "left" | "right", hoverDate: Date, hoverAnchor: Date) => {
     left: string;
     right: string;
 };

package/dist/features/travel-calendar/util/DateRangeNormalizer.d.ts

@@ -0,0 +1,18 @@
+type DateParser = (value: string) => Date | null | undefined;
+/**
+ * Flip `startDate` and `endDate` string fields of an object,
+ * based on parsed `Date` values using `parse`.
+ */
+export declare function flipStringDateRange<T extends {
+    startDate?: string;
+    endDate?: string;
+}>(obj: T, parse: DateParser): T;
+/**
+ * If the date range is invalid, it resets startDate or endDate to the same value.
+ * based on parsed `Date` values using `parse`.
+ */
+export declare function resetDateRangeIfInvalid<T extends {
+    startDate?: string;
+    endDate?: string;
+}>(obj: T, parse: DateParser, master: "startDate" | "endDate"): T;
+export {};