diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx index 6263e978e..29195bf5e 100644 --- a/src/DayPicker.tsx +++ b/src/DayPicker.tsx @@ -42,7 +42,7 @@ import { isDateRange } from "./utils/typeguards.js"; * @group DayPicker * @see https://daypicker.dev */ -export function DayPicker(props: T) { +export function DayPicker(props: DayPickerProps) { const { components, formatters, labels, dateLib, classNames } = useMemo( () => ({ dateLib: getDateLib(props.dateLib), @@ -116,9 +116,9 @@ export function DayPicker(props: T) { isSelected, select, selected: selectedValue - } = useSelection(props, dateLib) ?? {}; + } = useSelection(props, dateLib) ?? {}; - const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus( + const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus( props, calendar, getModifiers, @@ -221,9 +221,9 @@ export function DayPicker(props: T) { const dataAttributes = getDataAttributes(props); - const contextValue: DayPickerContext = { - selected: selectedValue as SelectedValue, - select: select as SelectHandler, + const contextValue: DayPickerContext = { + selected: selectedValue as SelectedValue, + select: select as SelectHandler, isSelected, months, nextMonth, diff --git a/src/types/props.ts b/src/types/props.ts index 7659a95d8..38f415643 100644 --- a/src/types/props.ts +++ b/src/types/props.ts @@ -464,7 +464,9 @@ export interface PropsBase { export interface PropsSingleRequired { mode: "single"; required: true; + /** The selected date. */ selected: Date; + /** Event handler when a day is selected. */ onSelect?: ( selected: Date, triggerDate: Date, @@ -480,7 +482,9 @@ export interface PropsSingleRequired { export interface PropsSingle { mode: "single"; required?: false | undefined; + /** The selected date. */ selected?: Date | undefined; + /** Event handler when a day is selected. */ onSelect?: ( selected: Date | undefined, triggerDate: Date, @@ -496,14 +500,18 @@ export interface PropsSingle { export interface PropsMultiRequired { mode: "multiple"; required: true; + /** The selected dates. */ selected: Date[]; + /** Event handler when days are selected. */ onSelect?: ( selected: Date[], triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent ) => void; + /** The minimum number of selectable days. */ min?: number; + /** The maximum number of selectable days. */ max?: number; } /** @@ -514,14 +522,18 @@ export interface PropsMultiRequired { export interface PropsMulti { mode: "multiple"; required?: false | undefined; + /** The selected dates. */ selected?: Date[] | undefined; + /** Event handler when days are selected. */ onSelect?: ( selected: Date[] | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent ) => void; + /** The minimum number of selectable days. */ min?: number; + /** The maximum number of selectable days. */ max?: number; } /** @@ -532,14 +544,19 @@ export interface PropsMulti { export interface PropsRangeRequired { mode: "range"; required: true; + disabled?: Matcher | Matcher[] | undefined; + /** The selected range. */ selected: DateRange; + /** Event handler when a range is selected. */ onSelect?: ( selected: DateRange, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent ) => void; + /** The minimum number of days to include in the range. */ min?: number; + /** The maximum number of days to include in the range. */ max?: number; } /** @@ -550,14 +567,18 @@ export interface PropsRangeRequired { export interface PropsRange { mode: "range"; required?: false | undefined; - selected?: DateRange | undefined; disabled?: Matcher | Matcher[] | undefined; + /** The selected range. */ + selected?: DateRange | undefined; + /** Event handler when the selection changes. */ onSelect?: ( selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent ) => void | undefined; + /** The minimum number of days to include in the range. */ min?: number; + /** The maximum number of days to include in the range. */ max?: number; }