@stenajs-webui/calendar 20.11.6 → 20.13.0

package/dist/components/calendar-types/travel-date-calendar/TravelDateCalendar.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { HeadingVariant } from "@stenajs-webui/core";
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+export interface TravelDateCalendarProps extends ValueAndOnValueChangeProps<string> {
+    localeCode?: string;
+    initialMonthInFocus?: Date;
+    label?: string;
+    previousMonthButtonAriaLabel?: string;
+    nextMonthButtonAriaLabel?: string;
+    heading?: string;
+    headingLevel?: HeadingVariant;
+    firstMonthInMonthPicker?: Date;
+    numMonthsInMonthPicker?: number;
+}
+export declare const TravelDateCalendar: React.FC<TravelDateCalendarProps>;

package/dist/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { HeadingVariant } from "@stenajs-webui/core";
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+import { TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
+export interface TravelDateRangeCalendarProps extends ValueAndOnValueChangeProps<TravelDateRangeInputValue> {
+    localeCode?: string;
+    initialMonthInFocus?: Date;
+    startDateLabel?: string;
+    endDateLabel?: string;
+    previousMonthButtonAriaLabel?: string;
+    nextMonthButtonAriaLabel?: string;
+    heading?: string;
+    headingLevel?: HeadingVariant;
+    firstMonthInMonthPicker?: Date;
+    numMonthsInMonthPicker?: number;
+}
+export declare const TravelDateRangeCalendar: React.FC<TravelDateRangeCalendarProps>;

package/dist/components/input-types/travel-date-input/TravelDateInput.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import { HeadingVariant } from "@stenajs-webui/core";
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+export interface RenderBelowSingleDateCalendarArgs {
+    hideCalendar: () => void;
+}
+export interface TravelDateInputProps extends ValueAndOnValueChangeProps<string> {
+    localeCode?: string;
+    initialMonthInFocus?: Date;
+    label?: string;
+    previousMonthButtonAriaLabel?: string;
+    nextMonthButtonAriaLabel?: string;
+    heading?: string;
+    headingLevel?: HeadingVariant;
+    firstMonthInMonthPicker?: Date;
+    numMonthsInMonthPicker?: number;
+    zIndex?: number;
+    zIndexWhenClosed?: number;
+    onHideCalendar?: () => void;
+    renderBelowCalendar?: (args: RenderBelowSingleDateCalendarArgs) => ReactNode;
+}
+export declare const TravelDateInput: React.FC<TravelDateInputProps>;

package/dist/components/input-types/travel-date-range-input/TravelDateRangeInput.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import { HeadingVariant } from "@stenajs-webui/core";
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+import { TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
+export interface RenderBelowCalendarArgs {
+    hideCalendar: () => void;
+}
+export interface TravelDateRangeInputProps extends ValueAndOnValueChangeProps<TravelDateRangeInputValue> {
+    localeCode?: string;
+    initialMonthInFocus?: Date;
+    startDateLabel?: string;
+    endDateLabel?: string;
+    previousMonthButtonAriaLabel?: string;
+    nextMonthButtonAriaLabel?: string;
+    heading?: string;
+    headingLevel?: HeadingVariant;
+    firstMonthInMonthPicker?: Date;
+    numMonthsInMonthPicker?: number;
+    zIndex?: number;
+    zIndexWhenClosed?: number;
+    onHideCalendar?: () => void;
+    renderBelowCalendar?: (args: RenderBelowCalendarArgs) => ReactNode;
+}
+export declare const TravelDateRangeInput: React.FC<TravelDateRangeInputProps>;

package/dist/features/localize-date-format/InputMaskProvider.d.ts

@@ -0,0 +1,4 @@
+export declare const yearMask: RegExp[];
+export declare const monthMask: RegExp[];
+export declare const dayMask: RegExp[];
+export declare const createInputMaskForDateFormat: (dateFormat: string) => Array<string | RegExp>;

package/dist/features/localize-date-format/LocaleMapper.d.ts

@@ -1,2 +1,3 @@
 import { Locale } from "date-fns";
 export declare const getLocaleForLocaleCode: (localeCode: string) => Locale | undefined;
+export declare const getDefaultLocaleForFormatting: () => Locale;

package/dist/features/localize-date-format/LocalizedDateParser.d.ts

@@ -1 +1 @@
-export declare const parseLocalizedDateString: (dateString: string, localeCode: string, referenceDate?: Date) => Date;
+export declare const parseLocalizedDateString: (dateString: string, localeCode: string, referenceDate?: Date) => Date | undefined;

package/dist/features/localize-date-format/LocalizedDateReformatter.d.ts

@@ -0,0 +1 @@
+export declare const reformatLocalizedDateString: (dateString: string, locale: string) => string | undefined;

package/dist/features/month-picker/MonthPicker.d.ts

@@ -1,15 +1,10 @@
 import * as React from "react";
-import { Month } from "../../util/calendar/CalendarDataFactory";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { Locale } from "date-fns";
-export interface MonthPickerValue {
-    month: Month;
-    year: number;
-}
-export interface MonthPickerProps extends ValueAndOnValueChangeProps<MonthPickerValue> {
+export interface MonthPickerProps extends ValueAndOnValueChangeProps<Date> {
     locale?: Locale;
     firstMonth: Date;
     numMonths: number;
+    onCancel?: () => void;
 }
 export declare const MonthPicker: React.FC<MonthPickerProps>;
-export declare const createFirstDate: (date: Date) => MonthPickerValue;

package/dist/features/month-picker/MonthPickerCell.d.ts

@@ -1,12 +1,16 @@
 import * as React from "react";
 import { Locale } from "date-fns";
-import { Month } from "../../util/calendar/CalendarDataFactory";
+import { Position } from "./Position";
 interface MonthPickerCellProps {
-    year: number;
-    month: Month;
+    month: Date;
     onClick: () => void;
     selected: boolean;
     locale: Locale;
+    autoFocus: boolean;
+    monthPickerId: string;
+    firstAvailableMonth: Date;
+    lastAvailableMonth: Date;
+    position: Position;
 }
 export declare const MonthPickerCell: React.FC<MonthPickerCellProps>;
 export {};

package/dist/features/month-picker/MonthPickerDataFactory.d.ts

@@ -0,0 +1,21 @@
+import { Position } from "./Position";
+export interface MonthInput {
+    yearOrder: Array<number>;
+    years: Record<number, YearInput>;
+    rows: Array<RowInput>;
+    lastMonthRow: number;
+    lastMonthColumn: number;
+}
+export interface YearInput {
+    year: number;
+    rows: Array<number>;
+}
+export interface RowInput {
+    rowIndex: number;
+    columns: Array<Columns>;
+}
+export interface Columns {
+    position: Position;
+    month: Date;
+}
+export declare const createMonths: (firstMonth: Date, numMonths: number, numColumnsPerRow: number) => MonthInput;

package/dist/features/month-picker/MonthPickerKeyboardNavigation.d.ts

@@ -0,0 +1,4 @@
+import { Position } from "./Position";
+export declare const getDomIdForMonth: (position: Position, monthPickerId: string) => string;
+export declare const getDomIdForKeyboardKey: (key: string, currentPosition: Position, monthPickerId: string, numColumnsPerRow: number) => string | undefined;
+export declare const movePositionByKey: (currentPosition: Position, key: string, numColumnsPerRow: number) => Position;

package/dist/features/month-picker/Position.d.ts

@@ -0,0 +1,8 @@
+export interface Position {
+    row: number;
+    column: number;
+}
+export declare const moveLeft: (position: Position, numColumnsPerRow: number) => Position;
+export declare const moveRight: (position: Position, numColumnsPerRow: number) => Position;
+export declare const moveUp: (position: Position) => Position;
+export declare const moveDown: (position: Position) => Position;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Ref } from "react";
+import { VisiblePanel } from "../types";
+export interface MonthHeaderProps {
+    monthPickerButtonLabel: string;
+    nextMonthButtonAriaLabel: string;
+    previousMonthButtonAriaLabel: string;
+    visiblePanel: VisiblePanel;
+    setVisiblePanel: (panel: VisiblePanel) => void;
+    monthPickerButtonRef: Ref<HTMLButtonElement>;
+    visibleMonth: Date;
+    setVisibleMonth: (date: Date) => void;
+    prevMonthDisabled: boolean;
+}
+export declare const MonthHeader: React.FC<MonthHeaderProps>;

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { MonthData } from "../../../util/calendar/CalendarDataFactory";
+import { Dispatch, SetStateAction } from "react";
+export interface TravelCalendarProps {
+    visibleMonthData: MonthData;
+    onClickDate: (date: Date) => void;
+    visibleMonth: Date;
+    setVisibleMonth: (visibleMonth: Date) => void;
+    isValidDateRange: boolean;
+    setHoverDate: Dispatch<SetStateAction<Date | undefined>>;
+    selectedStartDate: Date | undefined;
+    selectedEndDate: Date | undefined;
+    hoverDate: Date | undefined;
+    today: Date;
+    isDateDisabled: (date: Date) => boolean;
+    calendarId: string;
+    todayIsInVisibleMonth: boolean;
+}
+export declare const TravelCalendar: React.FC<TravelCalendarProps>;

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { DayData } from "../../../util/calendar/CalendarDataFactory";
+export interface TravelDateCellProps {
+    onClick: (date: Date) => void;
+    day: DayData;
+    visibleMonth: Date;
+    selectedStartDate: Date | undefined;
+    selectedEndDate: Date | undefined;
+    isValidDateRange: boolean;
+    onChangeVisibleMonth: (visibleMonth: Date) => void;
+    onStartHover: (date: Date) => void;
+    onEndHover: (date: Date) => void;
+    hoverDate: Date | undefined;
+    today: Date;
+    todayIsInVisibleMonth: boolean;
+    calendarId: string;
+    isDateDisabled: (date: Date) => boolean;
+}
+export declare const TravelDateCell: React.FC<TravelDateCellProps>;

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface TravelDateSingleTextInputFieldProps {
+    value: string | undefined;
+    onValueChange: ((value: string) => void) | undefined;
+    localeCode: string;
+    label?: string;
+    onFocus?: () => void;
+}
+export declare const TravelDateSingleTextInputField: React.FC<TravelDateSingleTextInputFieldProps>;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { LabelledTextInputProps } from "@stenajs-webui/forms";
+import { InputMask, InputMaskPipe, InputMaskProvider } from "@stenajs-webui/input-mask";
+export interface TravelDateTextInputProps extends LabelledTextInputProps {
+    mask: InputMask | InputMaskProvider;
+    pipe?: InputMaskPipe;
+    guide?: boolean;
+    keepCharPositions?: boolean;
+    placeholderChar?: string;
+    showMask?: boolean;
+}
+export declare const TravelDateTextInput: React.FC<TravelDateTextInputProps>;

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { TravelDateRangeInputValue } from "../types";
+export interface TravelDateTextInputFieldsProps {
+    value: TravelDateRangeInputValue | undefined;
+    onValueChange: ((value: Partial<TravelDateRangeInputValue>) => void) | undefined;
+    localeCode: string;
+    startDateLabel?: string;
+    endDateLabel?: string;
+    onFocus?: () => void;
+}
+export declare const TravelDateTextInputFields: React.FC<TravelDateTextInputFieldsProps>;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { VisiblePanel } from "../types";
+export declare const useTravelDateInput: (value: string | undefined, onValueChange: ((value: string) => void) | undefined, localeCode: string, initialMonthInFocus: Date | undefined) => {
+    isDateDisabled: (date: Date) => boolean;
+    onClickDate: (date: Date) => void;
+    onValueChangeByInputs: (value: string) => void;
+    prevMonthDisabled: boolean;
+    monthPickerButtonRef: import("react").RefObject<HTMLButtonElement>;
+    calendarId: string;
+    monthPickerButtonLabel: string;
+    visiblePanel: VisiblePanel;
+    setVisiblePanel: import("react").Dispatch<import("react").SetStateAction<VisiblePanel>>;
+    setVisibleMonth: import("react").Dispatch<import("react").SetStateAction<Date>>;
+    visibleMonthData: import("../../../util/calendar/CalendarDataFactory").MonthData;
+    todayIsInVisibleMonth: boolean;
+    hoverDate: Date | undefined;
+    setHoverDate: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
+    selectedDate: Date | undefined;
+    today: Date;
+    visibleMonth: Date;
+};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { TravelDateRangeInputValue, VisiblePanel } from "../types";
+export declare const useTravelDateRangeInput: (value: TravelDateRangeInputValue | undefined, onValueChange: ((value: TravelDateRangeInputValue) => void) | undefined, localeCode: string, initialMonthInFocus: Date | undefined) => {
+    isDateDisabled: (date: Date) => boolean;
+    onClickDate: (date: Date) => void;
+    onValueChangeByInputs: (value: TravelDateRangeInputValue) => void;
+    isValidDateRange: boolean;
+    prevMonthDisabled: boolean;
+    monthPickerButtonRef: import("react").RefObject<HTMLButtonElement>;
+    calendarId: string;
+    monthPickerButtonLabel: string;
+    visiblePanel: VisiblePanel;
+    setVisiblePanel: import("react").Dispatch<import("react").SetStateAction<VisiblePanel>>;
+    setVisibleMonth: import("react").Dispatch<import("react").SetStateAction<Date>>;
+    visibleMonthData: import("../../../util/calendar/CalendarDataFactory").MonthData;
+    todayIsInVisibleMonth: boolean;
+    hoverDate: Date | undefined;
+    setHoverDate: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
+    selectedStartDate: Date | undefined;
+    selectedEndDate: Date | undefined;
+    today: Date;
+    visibleMonth: Date;
+};

package/dist/features/travel-calendar/types.d.ts

@@ -0,0 +1,5 @@
+export interface TravelDateRangeInputValue {
+    startDate?: string;
+    endDate?: string;
+}
+export type VisiblePanel = "calendar" | "month-picker";

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

@@ -0,0 +1,4 @@
+export declare const getCellBackgroundColors: (date: Date, selectedStartDate: Date | undefined, selectedEndDate: Date | undefined, hoverDate: Date | undefined, dayIsInMonth: boolean, isValidDateRange: boolean) => {
+    left: string;
+    right: string;
+};

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

@@ -0,0 +1 @@
+export declare const createDayId: (date: Date, calendarId: string) => string;

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

@@ -0,0 +1 @@
+export declare const getDateToFocusOn: (currentDate: Date, key: string) => Date | undefined;

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

@@ -0,0 +1 @@
+export declare const useToday: () => Date;

package/dist/index.d.ts

@@ -28,7 +28,13 @@ export * from "./features/month-picker/MonthPicker";
 export * from "./features/year-picker/YearPicker";
 export * from "./features/preset-picker/PresetPicker";
 export * from "./components/input-types/date-range-dual-text-input/DateRangeDualTextInput";
+export * from "./components/input-types/travel-date-range-input/TravelDateRangeInput";
+export * from "./components/input-types/travel-date-input/TravelDateInput";
+export * from "./components/calendar-types/travel-date-calendar/TravelDateCalendar";
+export * from "./components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar";
+export * from "./features/travel-calendar/types";
 export * from "./features/localize-date-format/LocalizedDateFormatter";
 export * from "./features/localize-date-format/LocalizedDateParser";
+export * from "./features/localize-date-format/LocalizedDateReformatter";
 export * from "./features/localize-date-format/DateFormatProvider";
 export * from "./features/localize-date-format/LocaleMapper";