@stenajs-webui/calendar 15.0.0-alpha.1 → 15.0.0-alpha.10

package/dist/components/calendar/CalendarMonth.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { CalendarDayProps, CalendarOnClicks, CalendarUserMonthData, DayState, DayStateHighlight, ExtraDayContentProps, Renderers } from "../../types/CalendarTypes";
+import { CalendarDayProps, CalendarOnClicks, CalendarUserMonthData, DayState, DayStateHighlight, ExtraDayContentProps, OptionalMinMaxDates, Renderers } from "../../types/CalendarTypes";
 import { MonthData } from "../../util/calendar/CalendarDataFactory";
 import { CalendarTheme } from "./CalendarTheme";
-export interface CalendarMonthProps<T> extends CalendarOnClicks<T>, Renderers {
+export interface CalendarMonthProps<T> extends CalendarOnClicks<T>, Renderers, OptionalMinMaxDates {
     month: MonthData;
     dayComponent?: React.ComponentType<CalendarDayProps<T>>;
     userDataPerWeek?: CalendarUserMonthData<T>;
@@ -13,4 +13,4 @@ export interface CalendarMonthProps<T> extends CalendarOnClicks<T>, Renderers {
     extraDayContent?: React.ComponentType<ExtraDayContentProps<T>>;
     defaultHighlights?: Array<DayStateHighlight>;
 }
-export declare function CalendarMonth<T>({ month, dayComponent, statePerWeek, userDataPerWeek, onClickDay, onClickWeek, onClickWeekDay, onClickMonth, onClickYear, renderWeekNumber, renderWeekDay, headerLeftContent, headerRightContent, theme, extraDayContent, defaultHighlights, }: CalendarMonthProps<T>): JSX.Element;
+export declare function CalendarMonth<T>({ month, dayComponent, statePerWeek, userDataPerWeek, minDate, maxDate, onClickDay, onClickWeek, onClickWeekDay, onClickMonth, onClickYear, renderWeekNumber, renderWeekDay, headerLeftContent, headerRightContent, theme, extraDayContent, defaultHighlights, }: CalendarMonthProps<T>): JSX.Element;

package/dist/components/calendar/CalendarWeek.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { CalendarDayProps, CalendarUserWeekData, DayState, DayStateHighlight, ExtraDayContentProps, OnClickDay, OnClickWeek, RenderWeekNumber } from "../../types/CalendarTypes";
+import { CalendarDayProps, CalendarUserWeekData, DayState, DayStateHighlight, ExtraDayContentProps, OnClickDay, OnClickWeek, OptionalMinMaxDates, RenderWeekNumber } from "../../types/CalendarTypes";
 import { MonthData, WeekData } from "../../util/calendar/CalendarDataFactory";
 import { CalendarTheme } from "./CalendarTheme";
-export interface CalendarWeekProps<T> {
+export interface CalendarWeekProps<T> extends OptionalMinMaxDates {
     dayComponent: React.ComponentType<CalendarDayProps<T>>;
     week: WeekData;
     month: MonthData;
@@ -15,4 +15,4 @@ export interface CalendarWeekProps<T> {
     extraDayContent?: React.ComponentType<ExtraDayContentProps<T>>;
     defaultHighlights?: Array<DayStateHighlight>;
 }
-export declare function CalendarWeek<T>({ week, month, dayComponent: DayComponent, statePerWeekDay, userDataPerWeekDay, onClickWeek, onClickDay, theme, renderWeekNumber, extraDayContent, defaultHighlights, }: CalendarWeekProps<T>): JSX.Element;
+export declare function CalendarWeek<T>({ week, month, dayComponent, statePerWeekDay, userDataPerWeekDay, minDate, maxDate, onClickWeek, onClickDay, theme, renderWeekNumber, extraDayContent, defaultHighlights, }: CalendarWeekProps<T>): JSX.Element;

package/dist/components/calendar/DisabledDayWrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { CalendarDayProps, OptionalMinMaxDates } from "../../types/CalendarTypes";
+interface DisabledDayWrapperProps<T> extends CalendarDayProps<T>, OptionalMinMaxDates {
+    dayComponent: React.ComponentType<CalendarDayProps<T>>;
+}
+export declare const DisabledDayWrapper: <T>({ dayComponent: DayComponent, minDate, maxDate, dayState, day, ...props }: DisabledDayWrapperProps<T>) => JSX.Element;
+export {};

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

@@ -1,19 +1,11 @@
 /// <reference types="react" />
 import { InternalPanelAndFocusStateProps } from "../../../types/InternalPanelAndFocusStateProps";
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+import { DateRange } from "../../../types/DateRange";
 export declare type DateRangeFocusedInput = "startDate" | "endDate" | undefined;
-export interface DateRangeCalendarOnChangeValue {
-    startDate?: Date;
-    endDate?: Date;
-}
-export interface DateRangeCalendarProps<T> extends InternalPanelAndFocusStateProps<T> {
-    startDate: Date | undefined;
-    endDate: Date | undefined;
+export interface DateRangeCalendarProps<T> extends InternalPanelAndFocusStateProps<T>, ValueAndOnValueChangeProps<DateRange> {
     focusedInput?: DateRangeFocusedInput;
-    setStartDate: (startDate: Date) => void;
-    setEndDate: (endDate: Date) => void;
     setFocusedInput: (focusedInput: DateRangeFocusedInput) => void;
-    /** onChange handler for when the user selects a date. */
-    onChange?: (value: DateRangeCalendarOnChangeValue) => void;
 }
 export declare function DateRangeCalendar<T extends {}>(props: DateRangeCalendarProps<T>): JSX.Element;
-export declare type DateRangeInputCalendarProps<T> = Omit<DateRangeCalendarProps<T>, "startDateInFocus" | "onChange" | "startDate" | "endDate" | "setStartDate" | "setEndDate" | "focusedInput" | "setFocusedInput" | "theme" | "currentPanel" | "setCurrentPanel">;
+export declare type DateRangeInputCalendarProps<T> = Omit<DateRangeCalendarProps<T>, "startDateInFocus" | "value" | "onValueChange" | "focusedInput" | "setFocusedInput" | "theme" | "currentPanel" | "setCurrentPanel">;

package/dist/components/calendar-types/date-range-calendar/DateRangeCalendar.stories.d.ts

@@ -13,6 +13,7 @@ export default _default;
 export declare const Standard: () => JSX.Element;
 export declare const WithStateHook: () => JSX.Element;
 export declare const WithTodayHighlighted: () => JSX.Element;
+export declare const WithMinMaxDate: () => JSX.Element;
 export declare const WithDefaultHighlights: () => JSX.Element;
 export declare const WithMultipleMonths: () => JSX.Element;
 export declare const WithMultipleRows: () => JSX.Element;

package/dist/components/calendar-types/date-range-calendar/hooks/UseDateRangeSelection.d.ts

@@ -1,3 +1,3 @@
 import { DateRangeCalendarProps } from "../DateRangeCalendar";
 import { CalendarWithMonthSwitcherProps } from "../../../../features/month-switcher/CalendarWithMonthSwitcher";
-export declare const useDateRangeSelection: <T>({ focusedInput, endDate, startDate, setStartDate, setEndDate, onChange, setFocusedInput, statePerMonth, onChangePanel, }: DateRangeCalendarProps<T>) => CalendarWithMonthSwitcherProps<T>;
+export declare const useDateRangeSelection: <T>({ focusedInput, value, onValueChange, setFocusedInput, statePerMonth, onChangePanel, }: DateRangeCalendarProps<T>) => CalendarWithMonthSwitcherProps<T>;

package/dist/components/calendar-types/date-range-exclusion-calendar/DateRangeExclusionCalendar.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { UseInternalPanelStateProps } from "../../../features/internal-panel-state/UseInternalPanelState";
 import { InternalPanelAndFocusStateProps } from "../../../types/InternalPanelAndFocusStateProps";
-export interface DateRangeExclusionCalendarProps<T> extends InternalPanelAndFocusStateProps<T>, UseInternalPanelStateProps {
-    value?: Array<Date>;
-    onChange?: (value: Array<Date>) => void;
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
+export interface DateRangeExclusionCalendarProps<T> extends InternalPanelAndFocusStateProps<T>, UseInternalPanelStateProps, ValueAndOnValueChangeProps<Array<Date>> {
 }
 export declare function DateRangeExclusionCalendar<T extends {}>(props: DateRangeExclusionCalendarProps<T>): JSX.Element;

package/dist/components/calendar-types/date-range-exclusion-calendar/UseDateRangeExclusionSelection.d.ts

@@ -1,3 +1,3 @@
 import { DateRangeExclusionCalendarProps } from "./DateRangeExclusionCalendar";
 import { CalendarWithMonthSwitcherProps } from "../../../features/month-switcher/CalendarWithMonthSwitcher";
-export declare const useDateRangeExclusionSelection: <T>({ onChange, value, statePerMonth, onChangePanel, }: DateRangeExclusionCalendarProps<T>) => CalendarWithMonthSwitcherProps<T>;
+export declare const useDateRangeExclusionSelection: <T>({ value, onValueChange, statePerMonth, onChangePanel, }: DateRangeExclusionCalendarProps<T>) => CalendarWithMonthSwitcherProps<T>;

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

@@ -2,7 +2,8 @@ import { TextInputProps } from "@stenajs-webui/forms";
 import * as React from "react";
 import { CalendarTheme } from "../../calendar/CalendarTheme";
 import { DateTextInputCalendarProps } from "../date-text-input/DateTextInput";
-export interface DateInputProps<T = {}> {
+import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
+export interface DateInputProps<T = {}> extends OptionalMinMaxDatesAsString {
     /** The current value */
     value?: Date;
     /** onChange handler for when the user selects a date. */

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

@@ -14,3 +14,5 @@ export declare const UsingPortal: () => JSX.Element;
 export declare const CustomDateFormat: () => JSX.Element;
 export declare const WithPreselectedValue: () => JSX.Element;
 export declare const WithVariant: () => JSX.Element;
+export declare const MinMaxDates: () => JSX.Element;
+export declare const MinMaxDatesClose: () => JSX.Element;

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
-import { DateRangeOnChangeValue } from "../../../features/date-range/hooks/UseDateRangeOnClickDayHandler";
+import { DualTextInputProps } from "../../../features/dual-text-input/DualTextInput";
 import { DateRangeInputCalendarProps } from "../../calendar-types/date-range-calendar/DateRangeCalendar";
-export interface DateRangeDualTextInputProps<TData = unknown> extends ValueAndOnValueChangeProps<DateRangeOnChangeValue> {
+import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
+import { DateRange } from "../../../types/DateRange";
+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, 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, 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;
@@ -12,3 +12,5 @@ export declare const StartSelected: () => JSX.Element;
 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/components/input-types/date-range-input/DateRangeInput.d.ts

@@ -1,11 +1,10 @@
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import * as React from "react";
-import { DateRangeCalendarOnChangeValue, DateRangeInputCalendarProps } from "../../calendar-types/date-range-calendar/DateRangeCalendar";
+import { DateRangeInputCalendarProps } from "../../calendar-types/date-range-calendar/DateRangeCalendar";
 import { CalendarTheme } from "../../calendar/CalendarTheme";
-export interface DateRangeInputProps<T> {
-    /** The current date range value */
-    value: DateRangeCalendarOnChangeValue;
-    /** The onChange handler. */
-    onChange: (value: DateRangeCalendarOnChangeValue) => void;
+import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
+import { DateRange } from "../../../types/DateRange";
+export interface DateRangeInputProps<T> extends OptionalMinMaxDatesAsString, ValueAndOnValueChangeProps<DateRange> {
     /**
      * The date format in the input field. See date-fns docs.
      * @default YYYY-MM-dd
@@ -45,4 +44,4 @@ export interface DateRangeInputProps<T> {
 /**
  * @deprecated Please use DateRangeDualTextInput instead.
  */
-export declare const DateRangeInput: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onChange, zIndex, width, calendarTheme, calendarProps, }: DateRangeInputProps<T>) => React.ReactElement<DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;
+export declare const DateRangeInput: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onValueChange, zIndex, width, calendarTheme, calendarProps, minDate, maxDate, }: DateRangeInputProps<T>) => React.ReactElement<DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;

package/dist/components/input-types/date-range-input/DateRangeInput.stories.d.ts

@@ -2,7 +2,7 @@ import { Story } from "@storybook/react";
 import * as React from "react";
 declare const _default: {
     title: string;
-    component: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onChange, zIndex, width, calendarTheme, calendarProps, }: import("./DateRangeInput").DateRangeInputProps<T>) => React.ReactElement<import("./DateRangeInput").DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;
+    component: <T extends {}>({ displayFormat, placeholderStartDate, placeholderEndDate, portalTarget, value, onValueChange, zIndex, width, calendarTheme, calendarProps, minDate, maxDate, }: import("./DateRangeInput").DateRangeInputProps<T>) => React.ReactElement<import("./DateRangeInput").DateRangeInputProps<T>, string | React.JSXElementConstructor<any>>;
     decorators: ((TheStory: Story) => JSX.Element)[];
 };
 export default _default;
@@ -13,3 +13,4 @@ export declare const UsingPortal: () => JSX.Element;
 export declare const WithPreselectedValue: () => JSX.Element;
 export declare const WithTodayHighlighted: () => JSX.Element;
 export declare const WithInvalidRange: () => JSX.Element;
+export declare const MinMaxDates: () => JSX.Element;

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { DateRangeCalendarOnChangeValue, DateRangeFocusedInput } from "../../../calendar-types/date-range-calendar/DateRangeCalendar";
+import { DateRangeFocusedInput } from "../../../calendar-types/date-range-calendar/DateRangeCalendar";
 import { DayData } from "../../../../util/calendar/CalendarDataFactory";
-export declare const useDateRangeInput: (value: DateRangeCalendarOnChangeValue, onChange: (dateRange: DateRangeCalendarOnChangeValue) => void) => {
+import { DateRange } from "../../../../types/DateRange";
+export declare const useDateRangeInput: (value: DateRange | undefined, onValueChange: ((dateRange: DateRange) => void) | undefined) => {
     showingCalendar: boolean;
     hideCalendar: () => void;
     showCalendarEndDate: () => boolean;

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

@@ -3,8 +3,9 @@ import { TextInputProps } from "@stenajs-webui/forms";
 import * as React from "react";
 import { SingleDateCalendarProps } from "../../calendar-types/single-date-calendar/SingleDateCalendar";
 import { CalendarTheme } from "../../calendar/CalendarTheme";
+import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
 export declare type DateTextInputCalendarProps<T> = Omit<SingleDateCalendarProps<T>, "value" | "onChange" | "theme">;
-export interface DateTextInputProps<T> extends Omit<TextInputProps, "onChange" | "theme"> {
+export interface DateTextInputProps<T> extends Omit<TextInputProps, "onChange" | "theme" | "min" | "max">, OptionalMinMaxDatesAsString {
     /** Props to be passed to Calendar, see SingleDateCalendar. */
     calendarProps?: DateTextInputCalendarProps<T>;
     /** Close calendar when date is selected, @default true */

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

@@ -1,6 +1,7 @@
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import * as React from "react";
-export interface DateTimeInputProps extends ValueAndOnValueChangeProps<Date | null> {
+import { OptionalMinMaxDatesAsString } from "../../../types/CalendarTypes";
+export interface DateTimeInputProps extends ValueAndOnValueChangeProps<Date | null>, OptionalMinMaxDatesAsString {
     onEsc?: () => void;
     onEnter?: () => void;
     onBlur?: () => void;

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

@@ -9,3 +9,4 @@ export default _default;
 export declare const Standard: () => JSX.Element;
 export declare const Centered: () => JSX.Element;
 export declare const PreselectedValue: () => JSX.Element;
+export declare const MinMaxDates: () => JSX.Element;

package/dist/config/DefaultMaxDate.d.ts

@@ -0,0 +1 @@
+export declare const defaultMaxDate = "2999-12-31";

package/dist/features/date-range/hooks/UseDateRangeOnClickDayHandler.d.ts

@@ -1,7 +1,4 @@
 import { DateRangeFocusedInput } from "../../../components/calendar-types/date-range-calendar/DateRangeCalendar";
 import { OnClickDay } from "../../../types/CalendarTypes";
-export interface DateRangeOnChangeValue {
-    startDate?: Date;
-    endDate?: Date;
-}
-export declare const useDateRangeOnClickDayHandler: <T>(startDate: Date | undefined, setStartDate: (startDate: Date) => void, endDate: Date | undefined, setEndDate: (endDate: Date) => void, focusedInput: DateRangeFocusedInput, setFocusedInput: (focusedInput: DateRangeFocusedInput) => void, onChange?: ((value: DateRangeOnChangeValue) => void) | undefined) => OnClickDay<T>;
+import { DateRange } from "../../../types/DateRange";
+export declare const useDateRangeOnClickDayHandler: <T>(value: DateRange | undefined, onValueChange: ((dateRange: DateRange) => void) | undefined, focusedInput: DateRangeFocusedInput, setFocusedInput: (focusedInput: DateRangeFocusedInput) => void) => OnClickDay<T>;

package/dist/features/dual-text-input/DualTextInput.d.ts

@@ -9,6 +9,10 @@ export interface DualTextInputProps {
     widthRight?: BoxProps["width"];
     valueLeft?: TextInputProps["value"];
     valueRight?: TextInputProps["value"];
+    minLeft?: string;
+    maxLeft?: string;
+    minRight?: string;
+    maxRight?: string;
     typeLeft?: TextInputProps["type"];
     typeRight?: TextInputProps["type"];
     separatorIcon?: IconDefinition;

package/dist/index.d.ts

@@ -19,11 +19,13 @@ export * from "./components/calendar/CalendarTheme";
 export * from "./components/calendar/renderers/CalendarDay";
 export * from "./components/calendar/renderers/WeekDayCell";
 export * from "./components/calendar/renderers/WeekNumberCell";
-export * from "./util/calendar/CalendarIntervalValidator";
 export * from "./util/calendar/CalendarDataFactory";
 export * from "./util/calendar/StateHelper";
 export * from "./util/calendar/StateModifier";
+export * from "./util/date-range/DateRangeValidator";
+export * from "./util/date-range/DateRangeTransformer";
 export * from "./types/CalendarTypes";
+export * from "./types/DateRange";
 export * from "./features/month-picker/MonthPicker";
 export * from "./features/year-picker/YearPicker";
 export * from "./features/preset-picker/PresetPicker";