react-day-picker
Advanced tools
Comparing version 9.0.0-rc.6 to 9.0.0
@@ -36,4 +36,2 @@ import type { DateLib } from "../types/index.js"; | ||
readonly date: Date; | ||
/** A unique identifier for the day. */ | ||
readonly uid: string; | ||
/** | ||
@@ -40,0 +38,0 @@ * Check if the day is the same as the given day: considering if it is in the |
@@ -20,6 +20,2 @@ "use strict"; | ||
this.dateLib = dateLib; | ||
const { format } = dateLib; | ||
this.uid = | ||
format(date, "yyyyMMdd") + | ||
(this.outside ? `-` + format(displayMonth, "yyyyMMdd") : ""); | ||
} | ||
@@ -26,0 +22,0 @@ /** |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Button(props: JSX.IntrinsicElements["button"]): React.JSX.Element; | ||
export type ButtonProps = Parameters<typeof Button>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Button(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function CaptionLabel(props: JSX.IntrinsicElements["span"]): React.JSX.Element; | ||
export type CaptionLabelProps = Parameters<typeof CaptionLabel>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function CaptionLabel(props) { |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export declare function Chevron(props: { |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Chevron(props) { |
@@ -8,13 +8,14 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. If you | ||
* need to just change the content of the day cell, consider swapping the | ||
* If you need to just change the content of the day cell, consider swapping the | ||
* `DayDate` component instead. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Day(props: { | ||
/** The day to render. */ | ||
day: CalendarDay; | ||
/** The modifiers to apply to the day. */ | ||
modifiers: Modifiers; | ||
} & JSX.IntrinsicElements["td"]): React.JSX.Element; | ||
export type DayProps = Parameters<typeof Day>[0]; |
@@ -12,8 +12,7 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. If you | ||
* need to just change the content of the day cell, consider swapping the | ||
* If you need to just change the content of the day cell, consider swapping the | ||
* `DayDate` component instead. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -20,0 +19,0 @@ function Day(props) { |
@@ -10,6 +10,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -16,0 +14,0 @@ export declare function DayButton(props: { |
@@ -14,6 +14,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -20,0 +18,0 @@ function DayButton(props) { |
@@ -19,9 +19,7 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Dropdown(props: { | ||
components: Pick<Required<CustomComponents>, "Select" | "Option" | "Chevron">; | ||
components: Pick<CustomComponents, "Select" | "Option" | "Chevron">; | ||
classNames: Pick<ClassNames, UI.DropdownRoot | UI.Dropdown | UI.CaptionLabel | UI.Chevron>; | ||
@@ -28,0 +26,0 @@ options?: DropdownOption[] | undefined; |
@@ -12,6 +12,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -18,0 +16,0 @@ function Dropdown(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function DropdownNav(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type DropdownNavProps = Parameters<typeof DropdownNav>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function DropdownNav(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Footer(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type FooterProps = Parameters<typeof Footer>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Footer(props) { |
@@ -7,6 +7,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -13,0 +11,0 @@ export declare function Month(props: { |
@@ -12,6 +12,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -18,0 +16,0 @@ function Month(props) { |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export declare function MonthCaption(props: { |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function MonthCaption(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function MonthGrid(props: JSX.IntrinsicElements["table"]): React.JSX.Element; | ||
export type MonthGridProps = Parameters<typeof MonthGrid>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function MonthGrid(props) { |
@@ -6,5 +6,5 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Months(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthsProps = Parameters<typeof Months>[0]; |
@@ -12,3 +12,3 @@ "use strict"; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -15,0 +15,0 @@ function Months(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Nav(props: JSX.IntrinsicElements["nav"]): React.JSX.Element; | ||
export type NavProps = Parameters<typeof Nav>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Nav(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Option(props: JSX.IntrinsicElements["option"]): React.JSX.Element; | ||
export type OptionProps = Parameters<typeof Option>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Option(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Root(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type RootProps = Parameters<typeof Root>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Root(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Select(props: JSX.IntrinsicElements["select"]): React.JSX.Element; | ||
export type SelectProps = Parameters<typeof Select>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Select(props) { |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export declare function Week(props: { |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Week(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Weekday(props: JSX.IntrinsicElements["th"]): React.JSX.Element; | ||
export type WeekdayProps = Parameters<typeof Weekday>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Weekday(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Weekdays(props: JSX.IntrinsicElements["tr"]): React.JSX.Element; | ||
export type WeekdaysProps = Parameters<typeof Weekdays>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Weekdays(props) { |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export declare function WeekNumber(props: { |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function WeekNumber(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function WeekNumberHeader(props: JSX.IntrinsicElements["th"]): React.JSX.Element; | ||
export type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0]; |
@@ -11,6 +11,4 @@ "use strict"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function WeekNumberHeader(props) { |
import React from "react"; | ||
/** | ||
* Render the label in the month caption. | ||
* Render the weeks in the month grid. | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Weeks(props: JSX.IntrinsicElements["tbody"]): React.JSX.Element; | ||
export type WeeksProps = Parameters<typeof Weeks>[0]; |
@@ -9,8 +9,6 @@ "use strict"; | ||
/** | ||
* Render the label in the month caption. | ||
* Render the weeks in the month grid. | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,0 +15,0 @@ function Weeks(props) { |
@@ -7,4 +7,4 @@ import React from "react"; | ||
* @group DayPicker | ||
* @see http://daypicker.dev | ||
* @see https://daypicker.dev | ||
*/ | ||
export declare function DayPicker(props: DayPickerProps): React.JSX.Element; | ||
export declare function DayPicker<T extends DayPickerProps>(props: T): React.JSX.Element; |
@@ -34,7 +34,7 @@ "use strict"; | ||
const getDefaultClassNames_js_1 = require("./helpers/getDefaultClassNames.js"); | ||
const getDropdownMonths_js_1 = require("./helpers/getDropdownMonths.js"); | ||
const getDropdownYears_js_1 = require("./helpers/getDropdownYears.js"); | ||
const getFormatters_js_1 = require("./helpers/getFormatters.js"); | ||
const getMonthOptions_js_1 = require("./helpers/getMonthOptions.js"); | ||
const getStyleForModifiers_js_1 = require("./helpers/getStyleForModifiers.js"); | ||
const getWeekdays_js_1 = require("./helpers/getWeekdays.js"); | ||
const getYearOptions_js_1 = require("./helpers/getYearOptions.js"); | ||
const defaultLabels = __importStar(require("./labels/index.js")); | ||
@@ -44,4 +44,6 @@ const useCalendar_js_1 = require("./useCalendar.js"); | ||
const useFocus_js_1 = require("./useFocus.js"); | ||
const useModifiers_js_1 = require("./useModifiers.js"); | ||
const useGetModifiers_js_1 = require("./useGetModifiers.js"); | ||
const useSelection_js_1 = require("./useSelection.js"); | ||
const rangeIncludesDate_js_1 = require("./utils/rangeIncludesDate.js"); | ||
const typeguards_js_1 = require("./utils/typeguards.js"); | ||
/** | ||
@@ -51,14 +53,5 @@ * Render the date picker calendar. | ||
* @group DayPicker | ||
* @see http://daypicker.dev | ||
* @see https://daypicker.dev | ||
*/ | ||
function DayPicker(props) { | ||
const { captionLayout, locale, mode, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles } = props; | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate, | ||
useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
const { components, formatters, labels, dateLib, classNames } = (0, react_1.useMemo)(() => ({ | ||
@@ -77,10 +70,17 @@ dateLib: (0, getDateLib_js_1.getDateLib)(props.dateLib), | ||
]); | ||
const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props; | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn, | ||
firstWeekContainsDate, | ||
useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters; | ||
const calendar = (0, useCalendar_js_1.useCalendar)(props, dateLib); | ||
const { months, navigationStartMonth, navigationEndMonth, previousMonth, nextMonth, goToPreviousMonth, goToNextMonth, goToMonth } = calendar; | ||
const modifiers = (0, useModifiers_js_1.useModifiers)(props, calendar, dateLib); | ||
const selection = (0, useSelection_js_1.useSelection)(props, dateLib); | ||
const { isSelected, handleSelect } = selection; | ||
const focus = (0, useFocus_js_1.useFocus)(props, calendar, modifiers, selection, dateLib); | ||
const { isFocusTarget, focused: focusedDay, setFocused, moveFocus, blur } = focus; | ||
const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar; | ||
const getModifiers = (0, useGetModifiers_js_1.useGetModifiers)(days, props, dateLib); | ||
const { isSelected, select, selected: selectedValue } = (0, useSelection_js_1.useSelection)(props, dateLib) ?? {}; | ||
const { blur, focused, isFocusTarget, moveFocus, setFocused } = (0, useFocus_js_1.useFocus)(props, calendar, getModifiers, isSelected ?? (() => false), dateLib); | ||
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels; | ||
@@ -92,18 +92,18 @@ const weekdays = (0, react_1.useMemo)(() => (0, getWeekdays_js_1.getWeekdays)(locale, props.weekStartsOn, props.ISOWeek, dateLib), [dateLib, locale, props.ISOWeek, props.weekStartsOn]); | ||
return; | ||
goToPreviousMonth(); | ||
goToMonth(previousMonth); | ||
onPrevClick?.(previousMonth); | ||
}, [goToPreviousMonth, onPrevClick, previousMonth]); | ||
}, [previousMonth, goToMonth, onPrevClick]); | ||
const handleNextClick = (0, react_1.useCallback)(() => { | ||
if (!nextMonth) | ||
return; | ||
goToNextMonth(); | ||
goToMonth(nextMonth); | ||
onNextClick?.(nextMonth); | ||
}, [goToNextMonth, nextMonth, onNextClick]); | ||
}, [goToMonth, nextMonth, onNextClick]); | ||
const handleDayClick = (0, react_1.useCallback)((day, m) => (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
handleSelect(day.date, m, e); | ||
setFocused(day); | ||
select?.(day.date, m, e); | ||
onDayClick?.(day.date, m, e); | ||
}, [handleSelect, onDayClick, setFocused]); | ||
}, [select, onDayClick, setFocused]); | ||
const handleDayFocus = (0, react_1.useCallback)((day, m) => (e) => { | ||
@@ -142,9 +142,18 @@ setFocused(day); | ||
}), [classNames, props.className, props.style, styles]); | ||
const dataAttributes = (0, react_1.useMemo)(() => (0, getDataAttributes_js_1.getDataAttributes)(props), [props]); | ||
const contextValue = (0, react_1.useMemo)(() => ({ ...calendar, ...selection, ...modifiers }), [calendar, modifiers, selection]); | ||
const dataAttributes = (0, getDataAttributes_js_1.getDataAttributes)(props); | ||
const contextValue = { | ||
selected: selectedValue, | ||
select: select, | ||
isSelected, | ||
months, | ||
nextMonth, | ||
previousMonth, | ||
goToMonth, | ||
getModifiers | ||
}; | ||
return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: contextValue }, | ||
react_1.default.createElement(components.Root, { className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, "data-interactive": isInteractive || undefined, "data-multiple-months": numberOfMonths > 1 || undefined, "data-week-numbers": showWeekNumber || undefined, ...dataAttributes }, | ||
react_1.default.createElement(components.Root, { className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, ...dataAttributes }, | ||
react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] }, | ||
!props.hideNavigation && (react_1.default.createElement(components.Nav, { role: "navigation", className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav() }, | ||
react_1.default.createElement(components.Button, { type: "button", className: classNames[UI_js_1.UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth, labelOptions), onClick: handlePreviousClick }, | ||
react_1.default.createElement(components.Button, { type: "button", className: classNames[UI_js_1.UI.ButtonPrevious], tabIndex: previousMonth ? undefined : -1, disabled: previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth, labelOptions), onClick: handlePreviousClick }, | ||
react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: "left" })), | ||
@@ -163,4 +172,4 @@ react_1.default.createElement(components.Button, { type: "button", className: classNames[UI_js_1.UI.ButtonNext], tabIndex: nextMonth ? undefined : -1, disabled: nextMonth ? undefined : true, "aria-label": labelNext(nextMonth, labelOptions), onClick: handleNextClick }, | ||
}; | ||
const dropdownMonths = (0, getDropdownMonths_js_1.getDropdownMonths)(calendarMonth.date, navigationStartMonth, navigationEndMonth, formatters, locale, dateLib); | ||
const dropdownYears = (0, getDropdownYears_js_1.getDropdownYears)(months[0].date, navigationStartMonth, navigationEndMonth, formatters, dateLib); | ||
const dropdownMonths = (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, locale, dateLib); | ||
const dropdownYears = (0, getYearOptions_js_1.getYearOptions)(months[0].date, navStart, navEnd, formatters, dateLib); | ||
return (react_1.default.createElement(components.Month, { className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth }, | ||
@@ -184,28 +193,21 @@ react_1.default.createElement(components.MonthCaption, { className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] }, | ||
const { date } = day; | ||
const dayModifiers = modifiers.getModifiers(day); | ||
const focused = focusedDay?.isEqualTo(day); | ||
if (!dayModifiers.hidden && focused) | ||
dayModifiers[UI_js_1.DayFlag.focused] = true; | ||
const selected = isSelected(date) || dayModifiers.selected; | ||
dayModifiers[UI_js_1.SelectionState.selected] = | ||
!dayModifiers.disabled && selected; | ||
if (!dayModifiers.disabled && mode === "range") { | ||
const range = selection; | ||
dayModifiers[UI_js_1.SelectionState.range_start] = | ||
range.isRangeStart(date); | ||
dayModifiers[UI_js_1.SelectionState.range_end] = | ||
range.isRangeEnd(date); | ||
dayModifiers[UI_js_1.SelectionState.range_middle] = | ||
range.isRangeMiddle(date); | ||
const modifiers = getModifiers(day); | ||
modifiers[UI_js_1.DayFlag.focused] = | ||
!modifiers.hidden && | ||
Boolean(focused?.isEqualTo(day)); | ||
modifiers[UI_js_1.SelectionState.selected] = | ||
!modifiers.disabled && | ||
(isSelected?.(date) || modifiers.selected); | ||
if ((0, typeguards_js_1.isDateRange)(selectedValue)) { | ||
// add range modifiers | ||
const { from, to } = selectedValue; | ||
modifiers[UI_js_1.SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from)); | ||
modifiers[UI_js_1.SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to)); | ||
modifiers[UI_js_1.SelectionState.range_middle] = | ||
(0, rangeIncludesDate_js_1.rangeIncludesDate)(selectedValue, date, true, dateLib); | ||
} | ||
const style = { | ||
...(0, getStyleForModifiers_js_1.getStyleForModifiers)(dayModifiers, props.modifiersStyles), | ||
...styles?.[UI_js_1.UI.Day] | ||
}; | ||
const className = [ | ||
classNames[UI_js_1.UI.Day], | ||
...(0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(dayModifiers, classNames, props.modifiersClassNames) | ||
]; | ||
const style = (0, getStyleForModifiers_js_1.getStyleForModifiers)(modifiers, styles, props.modifiersStyles); | ||
const className = (0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(modifiers, classNames, props.modifiersClassNames); | ||
const ariaLabel = !isInteractive | ||
? labelGridcell(date, dayModifiers, labelOptions, dateLib) | ||
? labelGridcell(date, modifiers, labelOptions, dateLib) | ||
: undefined; | ||
@@ -218,3 +220,3 @@ const dataAttributes = { | ||
}; | ||
return (react_1.default.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: dayModifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": dayModifiers.hidden || undefined, "aria-selected": dayModifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], day: day, modifiers: dayModifiers, disabled: dayModifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, dayModifiers, labelOptions, dateLib), onClick: handleDayClick(day, dayModifiers), onBlur: handleDayBlur(day, dayModifiers), onFocus: handleDayFocus(day, dayModifiers), onKeyDown: handleDayKeyDown(day, dayModifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib)))); | ||
return (react_1.default.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": modifiers.hidden || undefined, "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, labelOptions, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib)))); | ||
}))); | ||
@@ -221,0 +223,0 @@ }))))); |
@@ -8,3 +8,3 @@ import { FormatOptions } from "../lib/index.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function formatCaption(month: Date, options?: FormatOptions, |
@@ -11,3 +11,3 @@ "use strict"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -14,0 +14,0 @@ function formatCaption(month, options, |
@@ -8,3 +8,3 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function formatDay(date: Date, options?: FormatOptions, |
@@ -10,3 +10,3 @@ "use strict"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -13,0 +13,0 @@ function formatDay(date, options, |
/** | ||
* Format the month number for the dropdown option label. | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @defaultValue The localized month name | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -8,0 +8,0 @@ export declare function formatMonthDropdown( |
@@ -8,5 +8,5 @@ "use strict"; | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @defaultValue The localized month name | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -18,5 +18,4 @@ function formatMonthDropdown( | ||
locale = locales_js_1.enUS) { | ||
return (locale.localize?.month(monthNumber) ?? | ||
monthNumber.toString()); | ||
return locale.localize?.month(monthNumber); | ||
} | ||
//# sourceMappingURL=formatMonthDropdown.js.map |
@@ -8,3 +8,3 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function formatWeekdayName(weekday: Date, options?: FormatOptions, |
@@ -10,3 +10,3 @@ "use strict"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -13,0 +13,0 @@ function formatWeekdayName(weekday, options, |
@@ -6,4 +6,4 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
export declare function formatWeekNumber(weekNumber: number): string; |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -12,0 +12,0 @@ function formatWeekNumber(weekNumber) { |
@@ -6,4 +6,4 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
export declare function formatWeekNumberHeader(): string; |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -12,0 +12,0 @@ function formatWeekNumberHeader() { |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export declare function formatYearDropdown(year: number): string; |
@@ -10,3 +10,3 @@ "use strict"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -13,0 +13,0 @@ function formatYearDropdown(year) { |
import type { CalendarDay } from "../classes/index.js"; | ||
import type { Modifiers } from "../types/index.js"; | ||
import { UseCalendar } from "../useCalendar.js"; | ||
export declare function calculateFocusTarget(calendar: UseCalendar, getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, lastFocused: CalendarDay | undefined): CalendarDay | undefined; | ||
export declare function calculateFocusTarget(days: CalendarDay[], getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, lastFocused: CalendarDay | undefined): CalendarDay | undefined; |
@@ -5,11 +5,13 @@ "use strict"; | ||
const UI_js_1 = require("../UI.js"); | ||
function calculateFocusTarget(calendar, getModifiers, isSelected, lastFocused) { | ||
function calculateFocusTarget(days, getModifiers, isSelected, lastFocused) { | ||
let focusTarget; | ||
let index = 0; | ||
let found = false; | ||
while (index < calendar.days.length && !found) { | ||
const day = calendar.days[index]; | ||
const m = getModifiers(day); | ||
if (!m[UI_js_1.DayFlag.disabled] && !m[UI_js_1.DayFlag.hidden] && !m[UI_js_1.DayFlag.outside]) { | ||
if (m[UI_js_1.DayFlag.focused]) { | ||
while (index < days.length && !found) { | ||
const day = days[index]; | ||
const modifiers = getModifiers(day); | ||
if (!modifiers[UI_js_1.DayFlag.disabled] && | ||
!modifiers[UI_js_1.DayFlag.hidden] && | ||
!modifiers[UI_js_1.DayFlag.outside]) { | ||
if (modifiers[UI_js_1.DayFlag.focused]) { | ||
focusTarget = day; | ||
@@ -26,3 +28,3 @@ found = true; | ||
} | ||
else if (m[UI_js_1.DayFlag.today]) { | ||
else if (modifiers[UI_js_1.DayFlag.today]) { | ||
focusTarget = day; | ||
@@ -36,3 +38,3 @@ found = true; | ||
// return the first day that is focusable | ||
focusTarget = calendar.days.find((day) => { | ||
focusTarget = days.find((day) => { | ||
const m = getModifiers(day); | ||
@@ -39,0 +41,0 @@ return !m[UI_js_1.DayFlag.disabled] && !m[UI_js_1.DayFlag.hidden] && !m[UI_js_1.DayFlag.outside]; |
@@ -19,5 +19,5 @@ "use strict"; | ||
return previousValue; | ||
}, []); | ||
}, [classNames[UI_js_1.UI.Day]]); | ||
return modifierClassNames; | ||
} | ||
//# sourceMappingURL=getClassNamesForModifiers.js.map |
import type { CustomComponents, DayPickerProps } from "../types/index.js"; | ||
export declare function getComponents(customComponents: DayPickerProps["components"]): Required<CustomComponents>; | ||
export declare function getComponents(customComponents: DayPickerProps["components"]): CustomComponents; |
@@ -8,3 +8,5 @@ "use strict"; | ||
"data-mode": props.mode ?? undefined, | ||
"data-required": "required" in props ? props.required : undefined | ||
"data-required": "required" in props ? props.required : undefined, | ||
"data-multiple-months": (props.numberOfMonths && props.numberOfMonths > 1) || undefined, | ||
"data-week-numbers": props.showWeekNumber || undefined | ||
}; | ||
@@ -11,0 +13,0 @@ Object.entries(props).forEach(([key, val]) => { |
@@ -7,2 +7,2 @@ import type { ClassNames } from "../types/index.js"; | ||
*/ | ||
export declare function getDefaultClassNames(): Required<ClassNames>; | ||
export declare function getDefaultClassNames(): ClassNames; |
@@ -10,2 +10,2 @@ import { CalendarMonth } from "../classes/index.js"; | ||
/** Options from the props context. */ | ||
options: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[]; | ||
props: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[]; |
@@ -12,16 +12,16 @@ "use strict"; | ||
/** Options from the props context. */ | ||
options, dateLib) { | ||
props, dateLib) { | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = dateLib; | ||
const dayPickerMonths = displayMonths.reduce((months, month) => { | ||
const firstDateOfFirstWeek = options.ISOWeek | ||
const firstDateOfFirstWeek = props.ISOWeek | ||
? startOfISOWeek(month) | ||
: startOfWeek(month, { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
}); | ||
const lastDateOfLastWeek = options.ISOWeek | ||
const lastDateOfLastWeek = props.ISOWeek | ||
? endOfISOWeek(endOfMonth(month)) | ||
: endOfWeek(endOfMonth(month), { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
}); | ||
@@ -32,3 +32,3 @@ /** The dates to display in the month. */ | ||
}); | ||
if (options.fixedWeeks && monthDates.length < 42) { | ||
if (props.fixedWeeks && monthDates.length < 42) { | ||
const extraDates = dates.filter((date) => { | ||
@@ -40,8 +40,8 @@ return (date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7)); | ||
const weeks = monthDates.reduce((weeks, date) => { | ||
const weekNumber = options.ISOWeek | ||
const weekNumber = props.ISOWeek | ||
? getISOWeek(date) | ||
: getWeek(date, { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn, | ||
firstWeekContainsDate: options.firstWeekContainsDate | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate | ||
}); | ||
@@ -62,3 +62,3 @@ const week = weeks.find((week) => week.weekNumber === weekNumber); | ||
}, []); | ||
if (!options.reverseMonths) { | ||
if (!props.reverseMonths) { | ||
return dayPickerMonths; | ||
@@ -65,0 +65,0 @@ } |
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** Return the start and end months for the calendar navigation. */ | ||
export declare function getNavMonths(props: Pick<DayPickerProps, "startMonth" | "endMonth" | "today" | "captionLayout" | "fromYear" | "toYear" | "fromMonth" | "toMonth">, dateLib: DateLib): [navStartMonth: Date | undefined, navEndMonth: Date | undefined]; | ||
export declare function getNavMonths(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): [start: Date | undefined, end: Date | undefined]; |
import type { CSSProperties } from "react"; | ||
import type { Modifiers, ModifiersStyles } from "../types/index.js"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties; | ||
import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, styles?: Partial<Styles>, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getStyleForModifiers = getStyleForModifiers; | ||
function getStyleForModifiers(dayModifiers, modifiersStyles = {}) { | ||
let style = {}; | ||
const UI_js_1 = require("../UI.js"); | ||
function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) { | ||
let style = { ...styles?.[UI_js_1.UI.Day] }; | ||
Object.entries(dayModifiers) | ||
@@ -7,0 +8,0 @@ .filter(([, active]) => active === true) |
@@ -11,3 +11,3 @@ import type { DateLib, LabelOptions } from "../index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -14,0 +14,0 @@ export declare function labelDayButton(date: Date, |
@@ -14,3 +14,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -17,0 +17,0 @@ function labelDayButton(date, |
@@ -9,3 +9,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ export declare function labelGrid(date: Date, options?: LabelOptions, |
@@ -12,3 +12,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -15,0 +15,0 @@ function labelGrid(date, options, |
@@ -8,3 +8,3 @@ import type { DateLib } from "../index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function labelGridcell(date: Date, |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelGridcell(date, |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelMonthDropdown(options?: LabelOptions): string; |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelMonthDropdown(options) { |
@@ -6,4 +6,4 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelNav(): string; |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelNav() { |
@@ -7,3 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -10,0 +10,0 @@ export declare function labelNext( |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelNext( |
@@ -7,3 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -10,0 +10,0 @@ export declare function labelPrevious( |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelPrevious( |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function labelWeekday(date: Date, options?: LabelOptions, |
@@ -10,3 +10,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -13,0 +13,0 @@ function labelWeekday(date, options, |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelWeekNumber(weekNumber: number, options?: LabelOptions): string; |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelWeekNumber(weekNumber, options) { |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelWeekNumberHeader(options?: LabelOptions): string; |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelWeekNumberHeader(options) { |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelYearDropdown(options?: LabelOptions): string; |
@@ -9,3 +9,3 @@ "use strict"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ function labelYearDropdown(options) { |
@@ -1,15 +0,2 @@ | ||
import React from "react"; | ||
import type { DateLib, DayPickerProps, Modifiers, PropsMulti, PropsMultiRequired } from "../types/index.js"; | ||
export type UseMulti<T> = { | ||
handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined; | ||
isSelected: (date: Date) => boolean; | ||
} & (T extends { | ||
required: true; | ||
} ? { | ||
selected: Date[]; | ||
} : { | ||
selected: Date[] | undefined; | ||
}); | ||
export declare function useMulti<T extends DayPickerProps>(props: T extends { | ||
mode: "multiple"; | ||
} ? PropsMulti | PropsMultiRequired : object, dateLib: DateLib): UseMulti<T>; | ||
import type { DateLib, DayPickerProps, Selection } from "../types/index.js"; | ||
export declare function useMulti<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>; |
@@ -9,38 +9,34 @@ "use strict"; | ||
function useMulti(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [dates, setDates] = react_1.default.useState(mode !== "multiple" ? undefined : selected); | ||
const { selected: initiallySelected, required, onSelect, mode } = props; | ||
const [selected, setSelected] = react_1.default.useState(initiallySelected); | ||
const { isSameDay, Date } = dateLib; | ||
// Update the selected date if the required flag is set. | ||
react_1.default.useEffect(() => { | ||
if (mode !== "multiple") | ||
return; | ||
if (required && dates === undefined) { | ||
setDates([new Date()]); | ||
if (required && selected === undefined) { | ||
setSelected([new Date()]); | ||
} | ||
}, [required, dates, Date, mode]); | ||
}, [required, selected, Date, mode]); | ||
// Update the selected date if the selected value from props changes. | ||
react_1.default.useEffect(() => { | ||
if (mode !== "multiple") | ||
return; | ||
setDates(selected); | ||
}, [mode, selected]); | ||
setSelected(initiallySelected); | ||
}, [mode, initiallySelected]); | ||
const isSelected = (date) => { | ||
return dates?.some((d) => isSameDay(d, date)) ?? false; | ||
return selected?.some((d) => isSameDay(d, date)) ?? false; | ||
}; | ||
const { min, max } = props; | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
let newDates = [...(dates ?? [])]; | ||
const select = (triggerDate, modifiers, e) => { | ||
let newDates = [...(selected ?? [])]; | ||
if (isSelected(triggerDate)) { | ||
if (dates?.length === min) { | ||
if (selected?.length === min) { | ||
// Min value reached, do nothing | ||
return; | ||
} | ||
if (required && dates?.length === 1) { | ||
if (required && selected?.length === 1) { | ||
// Required value already selected do nothing | ||
return; | ||
} | ||
newDates = dates?.filter((d) => !isSameDay(d, triggerDate)); | ||
newDates = selected?.filter((d) => !isSameDay(d, triggerDate)); | ||
} | ||
else { | ||
if (dates?.length === max) { | ||
if (selected?.length === max) { | ||
// Max value reached, reset the selection to date | ||
@@ -55,8 +51,8 @@ newDates = [triggerDate]; | ||
onSelect?.(newDates, triggerDate, modifiers, e); | ||
setDates(newDates); | ||
setSelected(newDates); | ||
return newDates; | ||
}; | ||
return { | ||
selected: dates, | ||
handleSelect: setSelected, | ||
selected, | ||
select, | ||
isSelected | ||
@@ -63,0 +59,0 @@ }; |
@@ -1,18 +0,2 @@ | ||
import React from "react"; | ||
import { DateLib, DateRange, DayPickerProps, Modifiers, PropsRange, PropsRangeRequired } from "../types/index.js"; | ||
export type UseRange<T> = { | ||
handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined; | ||
isSelected: (date: Date) => boolean; | ||
isRangeStart: (date: Date) => boolean; | ||
isRangeEnd: (date: Date) => boolean; | ||
isRangeMiddle: (date: Date) => boolean; | ||
} & (T extends { | ||
required: true; | ||
} ? { | ||
selected: DateRange; | ||
} : { | ||
selected: DateRange | undefined; | ||
}); | ||
export declare function useRange<T extends DayPickerProps>(props: T extends { | ||
mode: "range"; | ||
} ? PropsRange | PropsRangeRequired : object, dateLib: DateLib): UseRange<T>; | ||
import type { DateLib, DayPickerProps, Selection } from "../types/index.js"; | ||
export declare function useRange<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>; |
@@ -9,29 +9,17 @@ "use strict"; | ||
const index_js_1 = require("../utils/index.js"); | ||
const isDateInRange_js_1 = require("../utils/isDateInRange.js"); | ||
const rangeIncludesDate_js_1 = require("../utils/rangeIncludesDate.js"); | ||
function useRange(props, dateLib) { | ||
const { mode, disabled, selected, required, onSelect } = props; | ||
const { mode, disabled, selected: initiallySelected, required, onSelect } = props; | ||
const { differenceInCalendarDays } = dateLib; | ||
const [range, setRange] = react_1.default.useState(mode === "range" ? selected : undefined); | ||
const [selected, setSelected] = react_1.default.useState(initiallySelected); | ||
// Update the selected date if the required flag is set. | ||
react_1.default.useEffect(() => { | ||
if (mode !== "range") | ||
return; | ||
if (required && range === undefined) { | ||
setRange({ from: undefined, to: undefined }); | ||
if (required && selected === undefined) { | ||
setSelected({ from: undefined, to: undefined }); | ||
} | ||
}, [required, range, mode]); | ||
// Update the selected date if the selected changes. | ||
react_1.default.useEffect(() => { | ||
if (mode !== "range") | ||
return; | ||
if (range === selected) | ||
return; | ||
setRange(selected); | ||
}, [mode, range, selected]); | ||
const isSelected = (date) => range && (0, isDateInRange_js_1.isDateInRange)(date, range, dateLib); | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "range") | ||
return; | ||
}, [required, selected, mode]); | ||
const isSelected = (date) => selected && (0, rangeIncludesDate_js_1.rangeIncludesDate)(selected, date, false, dateLib); | ||
const select = (triggerDate, modifiers, e) => { | ||
const newRange = triggerDate | ||
? (0, index_js_1.addToRange)(triggerDate, range, dateLib) | ||
? (0, index_js_1.addToRange)(triggerDate, selected, dateLib) | ||
: undefined; | ||
@@ -66,29 +54,12 @@ const { min, max } = props; | ||
} | ||
setRange(newRange); | ||
setSelected(newRange); | ||
onSelect?.(newRange, triggerDate, modifiers, e); | ||
return newRange; | ||
}; | ||
const isRangeStart = (date) => { | ||
return (range && range.from && range.to && dateLib.isSameDay(date, range.from)); | ||
}; | ||
const isRangeEnd = (date) => { | ||
return range && range.to && dateLib.isSameDay(date, range.to); | ||
}; | ||
const isRangeMiddle = (date) => { | ||
return (range && | ||
range.from && | ||
range.to && | ||
isSelected(date) && | ||
!isRangeStart(date) && | ||
!isRangeEnd(date)); | ||
}; | ||
return { | ||
selected: range, | ||
handleSelect: setSelected, | ||
isSelected, | ||
isRangeStart, | ||
isRangeEnd, | ||
isRangeMiddle | ||
selected, | ||
select, | ||
isSelected | ||
}; | ||
} | ||
//# sourceMappingURL=useRange.js.map |
@@ -1,15 +0,7 @@ | ||
import React from "react"; | ||
import type { DateLib, DayPickerProps, Modifiers, PropsSingle, PropsSingleRequired } from "../types/index.js"; | ||
export type UseSingle<T> = { | ||
handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
import type { DateLib, DayPickerProps, SelectHandler, SelectedValue, Selection } from "../types/index.js"; | ||
export type UseSingle<T extends DayPickerProps> = { | ||
select: SelectHandler<T>; | ||
isSelected: (date: Date) => boolean; | ||
} & (T extends { | ||
required: true; | ||
} ? { | ||
selected: Date; | ||
} : { | ||
selected: Date | undefined; | ||
}); | ||
export declare function useSingle<T extends DayPickerProps>(props: T extends { | ||
mode: "single"; | ||
} ? PropsSingle | PropsSingleRequired : object, dateLib: DateLib): UseSingle<T>; | ||
selected: SelectedValue<T>; | ||
}; | ||
export declare function useSingle<T extends DayPickerProps>(props: DayPickerProps, dateLib: DateLib): Selection<T>; |
@@ -9,31 +9,25 @@ "use strict"; | ||
function useSingle(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [date, setDate] = react_1.default.useState(mode !== "single" ? undefined : selected); | ||
const { selected: initiallySelected, required, onSelect, mode } = props; | ||
const [selected, setSelected] = react_1.default.useState(initiallySelected); | ||
const { isSameDay, Date, startOfDay } = dateLib; | ||
// Update the selected date if the required flag is set. | ||
react_1.default.useEffect(() => { | ||
if (mode !== "single") | ||
return; | ||
if (required && date === undefined) { | ||
setDate(startOfDay(new Date())); | ||
if (required && selected === undefined) { | ||
setSelected(startOfDay(new Date())); | ||
} | ||
}, [required, date, Date, startOfDay, mode]); | ||
}, [required, selected, Date, startOfDay, mode]); | ||
// Update the selected date if the `selected` value changes. | ||
react_1.default.useEffect(() => { | ||
if (mode !== "single") | ||
return; | ||
setDate(selected); | ||
}, [mode, selected]); | ||
setSelected(initiallySelected); | ||
}, [initiallySelected]); | ||
const isSelected = (compareDate) => { | ||
return date ? isSameDay(date, compareDate) : false; | ||
return selected ? isSameDay(selected, compareDate) : false; | ||
}; | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "single") | ||
return; | ||
const select = (triggerDate, modifiers, e) => { | ||
let newDate = triggerDate; | ||
if (!required && date && date && isSameDay(triggerDate, date)) { | ||
if (!required && selected && selected && isSameDay(triggerDate, selected)) { | ||
// If the date is the same, clear the selection. | ||
newDate = undefined; | ||
} | ||
setDate(newDate); | ||
setSelected(newDate); | ||
if (required) { | ||
@@ -48,4 +42,4 @@ onSelect?.(newDate, triggerDate, modifiers, e); | ||
return { | ||
selected: date, | ||
handleSelect: setSelected, | ||
selected, | ||
select, | ||
isSelected | ||
@@ -52,0 +46,0 @@ }; |
@@ -21,3 +21,3 @@ import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption.js"; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -34,3 +34,3 @@ export declare const Caption: typeof MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -42,3 +42,3 @@ export type HeadRow = any; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -112,3 +112,3 @@ export declare const Row: typeof Week; | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -115,0 +115,0 @@ export type useDayRender = any; |
@@ -12,3 +12,3 @@ "use strict"; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -20,3 +20,3 @@ exports.Caption = MonthCaption_js_1.MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -23,0 +23,0 @@ exports.Row = Week_js_1.Week; |
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; | ||
export * from "./selection.js"; |
@@ -20,2 +20,3 @@ "use strict"; | ||
__exportStar(require("./props.js"), exports); | ||
__exportStar(require("./selection.js"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -11,2 +11,3 @@ import React from "react"; | ||
mode?: undefined; | ||
required?: undefined; | ||
}); | ||
@@ -16,17 +17,16 @@ /** | ||
* handling. | ||
* | ||
* @group Props | ||
*/ | ||
export interface PropsBase { | ||
/** | ||
* The selection mode. Use this prop to enable the selection of multiple days | ||
* or a range of days. | ||
* Enable the selection of single day, multiple days or a range of days. | ||
* | ||
* - `single`: a single day | ||
* - `multiple`: multiple days | ||
* - `range`: a range of days | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
mode?: Mode | undefined; | ||
/** | ||
* Whether the selection is required. | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
mode?: Mode | undefined; | ||
required?: boolean | undefined; | ||
/** Class name to add to the root element */ | ||
@@ -40,3 +40,3 @@ className?: string; | ||
* | ||
* @see https://daypicker.dev/next/docs/styling | ||
* @see https://daypicker.dev/docs/styling | ||
*/ | ||
@@ -47,3 +47,3 @@ classNames?: Partial<ClassNames>; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -56,3 +56,3 @@ modifiersClassNames?: ModifiersClassNames; | ||
* | ||
* @see https://daypicker.dev/next/docs/styling | ||
* @see https://daypicker.dev/docs/styling | ||
*/ | ||
@@ -63,3 +63,3 @@ styles?: Partial<Styles>; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -76,3 +76,3 @@ modifiersStyles?: ModifiersStyles; | ||
* @defaultValue The current month | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -86,3 +86,3 @@ defaultMonth?: Date; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -94,3 +94,3 @@ month?: Date; | ||
* @defaultValue 1 | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -102,3 +102,3 @@ numberOfMonths?: number; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -110,3 +110,3 @@ startMonth?: Date | undefined; | ||
* instead. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -117,3 +117,3 @@ fromDate?: Date | undefined; | ||
* @deprecated This prop has been renamed to `startMonth`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -125,3 +125,3 @@ fromMonth?: Date | undefined; | ||
* 0)}`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -133,3 +133,3 @@ fromYear?: number | undefined; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -141,3 +141,3 @@ endMonth?: Date; | ||
* instead. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -148,3 +148,3 @@ toDate?: Date; | ||
* @deprecated This prop has been renamed to `endMonth`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -155,3 +155,3 @@ toMonth?: Date; | ||
* @deprecated Use `endMonth` instead. E.g. `endMonth={new Date(year, 0)}`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -162,3 +162,3 @@ toYear?: number; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -170,3 +170,3 @@ pagedNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -179,3 +179,3 @@ reverseMonths?: boolean; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#hidenavigation | ||
* @see https://daypicker.dev/docs/navigation#hidenavigation | ||
*/ | ||
@@ -187,3 +187,3 @@ hideNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation#disablenavigation | ||
* @see https://daypicker.dev/docs/navigation#disablenavigation | ||
*/ | ||
@@ -204,3 +204,3 @@ disableNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#caption-layouts | ||
* @see https://daypicker.dev/docs/customization#caption-layouts | ||
*/ | ||
@@ -212,3 +212,3 @@ captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years"; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#fixed-weeks | ||
* @see https://daypicker.dev/docs/customization#fixed-weeks | ||
*/ | ||
@@ -225,3 +225,3 @@ fixedWeeks?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#outside-days | ||
* @see https://daypicker.dev/docs/customization#outside-days | ||
*/ | ||
@@ -236,3 +236,3 @@ showOutsideDays?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#showweeknumber | ||
* @see https://daypicker.dev/docs/customization#showweeknumber | ||
*/ | ||
@@ -245,6 +245,6 @@ showWeekNumber?: boolean; | ||
* Use the | ||
* [react-day-picker/utc](https://daypicker.dev/next/docs/localization#utc-dates) | ||
* [react-day-picker/utc](https://daypicker.dev/docs/localization#utc-dates) | ||
* to set the calendar to UTC. | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#iso-week-dates | ||
* @see https://daypicker.dev/docs/localization#iso-week-dates | ||
* @see https://en.wikipedia.org/wiki/ISO_week_date | ||
@@ -256,3 +256,3 @@ */ | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -266,3 +266,3 @@ components?: Partial<CustomComponents>; | ||
* | ||
* @see https://daypicker.dev/next/docs/accessibility#footer | ||
* @see https://daypicker.dev/docs/accessibility#footer | ||
*/ | ||
@@ -277,3 +277,3 @@ footer?: React.ReactNode | string; | ||
* | ||
* @see https://daypicker.dev/next/docs/accessibility#autofocus | ||
* @see https://daypicker.dev/docs/accessibility#autofocus | ||
*/ | ||
@@ -284,3 +284,3 @@ autoFocus?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes#disabling-dates | ||
* @see https://daypicker.dev/docs/selection-modes#disabling-dates | ||
*/ | ||
@@ -292,3 +292,3 @@ disabled?: Matcher | Matcher[] | undefined; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers#hidden-modifier | ||
* @see https://daypicker.dev/guides/custom-modifiers#hidden-modifier | ||
*/ | ||
@@ -300,3 +300,3 @@ hidden?: Matcher | Matcher[] | undefined; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers#today-modifier | ||
* @see https://daypicker.dev/guides/custom-modifiers#today-modifier | ||
*/ | ||
@@ -307,3 +307,3 @@ today?: Date; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -315,3 +315,3 @@ modifiers?: Record<string, Matcher | Matcher[] | undefined> | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -323,3 +323,3 @@ labels?: Partial<Labels>; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -331,3 +331,3 @@ formatters?: Partial<Formatters>; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#rtl-text-direction | ||
* @see https://daypicker.dev/docs/translation#rtl-text-direction | ||
*/ | ||
@@ -348,3 +348,3 @@ dir?: HTMLDivElement["dir"]; | ||
* @defaultValue en-US | ||
* @see https://daypicker.dev/next/docs/localization | ||
* @see https://daypicker.dev/docs/localization | ||
*/ | ||
@@ -356,3 +356,3 @@ locale?: Locale | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#first-date-of-the-week | ||
* @see https://daypicker.dev/docs/localization#first-date-of-the-week | ||
*/ | ||
@@ -363,3 +363,3 @@ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#first-week-contains-date | ||
* @see https://daypicker.dev/docs/localization#first-week-contains-date | ||
*/ | ||
@@ -384,3 +384,3 @@ firstWeekContainsDate?: 1 | 4; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation#onmonthchange | ||
* @see https://daypicker.dev/docs/navigation#onmonthchange | ||
*/ | ||
@@ -391,3 +391,3 @@ onMonthChange?: MonthChangeEventHandler; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -398,3 +398,3 @@ onNextClick?: MonthChangeEventHandler; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -405,4 +405,5 @@ onPrevClick?: MonthChangeEventHandler; | ||
* | ||
* @private | ||
* @deprecated Use a custom `WeekNumber` component instead. | ||
* @see http://daypicker.dev/next/docs/customization#showweeknumber | ||
* @see https://daypicker.dev/docs/customization#showweeknumber | ||
*/ | ||
@@ -470,4 +471,3 @@ onWeekNumberClick?: any; | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#single-mode | ||
* @see https://daypicker.dev/docs/selection-modes#single-mode | ||
*/ | ||
@@ -483,4 +483,3 @@ export interface PropsSingleRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#single-mode | ||
* @see https://daypicker.dev/docs/selection-modes#single-mode | ||
*/ | ||
@@ -496,4 +495,3 @@ export interface PropsSingle { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#multiple-mode | ||
* @see https://daypicker.dev/docs/selection-modes#multiple-mode | ||
*/ | ||
@@ -511,4 +509,3 @@ export interface PropsMultiRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#multiple-mode | ||
* @see https://daypicker.dev/docs/selection-modes#multiple-mode | ||
*/ | ||
@@ -526,4 +523,3 @@ export interface PropsMulti { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#range-mode | ||
* @see https://daypicker.dev/docs/selection-modes#range-mode | ||
*/ | ||
@@ -541,4 +537,3 @@ export interface PropsRangeRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#range-mode | ||
* @see https://daypicker.dev/docs/selection-modes#range-mode | ||
*/ | ||
@@ -545,0 +540,0 @@ export interface PropsRange { |
@@ -14,3 +14,3 @@ import type { CSSProperties } from "react"; | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
@@ -21,3 +21,3 @@ export type Mode = "single" | "multiple" | "range"; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -70,2 +70,3 @@ export type CustomComponents = { | ||
}; | ||
/** @private */ | ||
export type DateLib = typeof dateLib; | ||
@@ -125,49 +126,50 @@ /** Represent a map of formatters used to render localized content. */ | ||
* | ||
* Matchers can be of different types: | ||
* @example | ||
* // will always match the day | ||
* const booleanMatcher: Matcher = true; | ||
* | ||
* ```tsx | ||
* // will always match the day | ||
* const booleanMatcher: Matcher = true; | ||
* // will match the today's date | ||
* const dateMatcher: Matcher = new Date(); | ||
* | ||
* // will match the today's date | ||
* const dateMatcher: Matcher = new Date(); | ||
* // will match the days in the array | ||
* const arrayMatcher: Matcher = [ | ||
* new Date(2019, 1, 2), | ||
* new Date(2019, 1, 4) | ||
* ]; | ||
* | ||
* // will match the days in the array | ||
* const arrayMatcher: Matcher = [ | ||
* new Date(2019, 1, 2), | ||
* new Date(2019, 1, 4) | ||
* ]; | ||
* // will match days after the 2nd of February 2019 | ||
* const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
* | ||
* // will match days after the 2nd of February 2019 | ||
* const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
* // will match days before the 2nd of February 2019 } | ||
* const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
* // will match days before the 2nd of February 2019 } | ||
* const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
* | ||
* // will match Sundays | ||
* const dayOfWeekMatcher: DayOfWeek = { | ||
* dayOfWeek: 0 | ||
* }; | ||
* // will match Sundays | ||
* const dayOfWeekMatcher: DayOfWeek = { | ||
* dayOfWeek: 0 | ||
* }; | ||
* | ||
* // will match the included days, except the two dates | ||
* const intervalMatcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
* // will match the included days, except the two dates | ||
* const intervalMatcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
* | ||
* // will match the included days, including the two dates | ||
* const rangeMatcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
* // will match the included days, including the two dates | ||
* const rangeMatcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
* | ||
* // will match when the function return true | ||
* const functionMatcher: Matcher = (day: Date) => { | ||
* return day.getMonth() === 2; // match when month is March | ||
* }; | ||
* ``` | ||
* // will match when the function return true | ||
* const functionMatcher: Matcher = (day: Date) => { | ||
* return day.getMonth() === 2; // match when month is March | ||
* }; | ||
*/ | ||
export type Matcher = boolean | ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek; | ||
/** | ||
* A matcher to match a day falling after the specified date, with the date not | ||
* included. | ||
* Match a day falling after the specified date, with the date not included. | ||
* | ||
* @example | ||
* // Match days after the 2nd of February 2019 | ||
* const matcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
*/ | ||
@@ -178,4 +180,7 @@ export type DateAfter = { | ||
/** | ||
* A matcher to match a day falling before the specified date, with the date not | ||
* included. | ||
* Match a day falling before the specified date, with the date not included. | ||
* | ||
* @example | ||
* // Match days before the 2nd of February 2019 | ||
* const matcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
*/ | ||
@@ -186,4 +191,11 @@ export type DateBefore = { | ||
/** | ||
* A matcher to match a day falling before and/or after two dates, where the | ||
* dates are not included. | ||
* An interval of dates. Differently from {@link DateRange}, the range ends here | ||
* are not included. | ||
* | ||
* @example | ||
* // Match the days between the 2nd and the 5th of February 2019 | ||
* const matcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
*/ | ||
@@ -195,4 +207,11 @@ export type DateInterval = { | ||
/** | ||
* A matcher to match a range of dates. The range can be open. Differently from | ||
* {@link DateInterval}, the dates here are included. | ||
* A range of dates. The range can be open. Differently from | ||
* {@link DateInterval}, the range ends here are included. | ||
* | ||
* @example | ||
* // Match the days between the 2nd and the 5th of February 2019 | ||
* const matcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
*/ | ||
@@ -204,49 +223,96 @@ export type DateRange = { | ||
/** | ||
* A matcher to match a date being one of the specified days of the week (`0-6`, | ||
* where `0` is Sunday). | ||
* Match dates being one of the specified days of the week (`0-6`, where `0` is | ||
* Sunday). | ||
* | ||
* @example | ||
* // Match Sundays | ||
* const matcher: DayOfWeek = { dayOfWeek: 0 }; | ||
* // Match weekends | ||
* const matcher: DayOfWeek = { dayOfWeek: [0, 6] }; | ||
*/ | ||
export type DayOfWeek = { | ||
dayOfWeek: number[]; | ||
dayOfWeek: number | number[]; | ||
}; | ||
/** A record with `data-*` attributes passed to `<DayPicker />`. */ | ||
export type DataAttributes = Record<`data-${string}`, unknown>; | ||
/** | ||
* The event handler triggered when interacting with a day. | ||
* The event handler triggered when clicking or interacting with a day. | ||
* | ||
* @template EventType - The event type that triggered the day event. | ||
* @template EventType - The event type that triggered the event (e.g. | ||
* `React.MouseEvent`, `React.KeyboardEvent`, etc.). | ||
* @param date - The date that has triggered the event. | ||
* @param modifiers - The modifiers belonging to the date. | ||
* @param e - The DOM event that triggered the event. | ||
*/ | ||
export type DayEventHandler<EventType> = ( | ||
/** The date that has triggered the event. */ | ||
date: Date, | ||
/** The modifiers belonging to the date. */ | ||
modifiers: Modifiers, | ||
/** The DOM event that triggered this event. */ | ||
e: EventType) => void; | ||
/** The event handler when a month is changed in the calendar. */ | ||
export type DayEventHandler<EventType> = (date: Date, modifiers: Modifiers, e: EventType) => void; | ||
/** | ||
* The event handler when a month is changed in the calendar. | ||
* | ||
* ```tsx | ||
* <DayPicker onMonthChange={(month) => console.log(month)} /> | ||
* ``` | ||
* | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
export type MonthChangeEventHandler = (month: Date) => void; | ||
/** Maps user interface elements, selection states, and flags to a CSS style. */ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** Defines the class names for various UI components and states. */ | ||
/** | ||
* The CSS classnames to use for the {@link UI} elements, the | ||
* {@link SelectionState} and the {@link DayFlag}. | ||
* | ||
* @example | ||
* const classNames: ClassNames = { | ||
* [UI.Root]: "root", | ||
* [UI.Outside]: "outside", | ||
* [UI.Nav]: "nav" | ||
* // etc. | ||
* }; | ||
*/ | ||
export type ClassNames = { | ||
[key in UI | SelectionState | DayFlag]: string; | ||
}; | ||
/** The flags that are matching a day in the calendar. */ | ||
export type DayFlags = Record<DayFlag, boolean>; | ||
/** The selection state that are matching a day in the calendar. */ | ||
export type SelectionStates = Record<SelectionState, boolean>; | ||
/** The modifiers that are matching a day in the calendar. */ | ||
export type Modifiers = DayFlags & SelectionStates & CustomModifiers; | ||
/** The custom modifiers matching a day, passed to the `modifiers` prop. */ | ||
export type CustomModifiers = Record<string, boolean>; | ||
/** The style to apply to each day element matching a modifier. */ | ||
export type ModifiersStyles = Record<string, CSSProperties> & Partial<Record<DayFlag, CSSProperties>>; | ||
/** The classnames to assign to each day element matching a modifier. */ | ||
export type ModifiersClassNames = Record<string, string> & Partial<Record<DayFlag & SelectionState, string>>; | ||
/** | ||
* The CSS styles to use for the {@link UI} elements, the {@link SelectionState} | ||
* and the {@link DayFlag}. | ||
*/ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** | ||
* The modifiers that are matching a day in the calendar. | ||
* | ||
* @example | ||
* const modifiers: Modifiers = { | ||
* today: false, // the day is not today | ||
* selected: true, // the day is selected | ||
* weekend: false // the day is not in the weekend | ||
* // etc | ||
* }; | ||
*/ | ||
export type Modifiers = Record<string, boolean>; | ||
/** | ||
* The style to apply to each day element matching a modifier. | ||
* | ||
* @example | ||
* const modifiersStyles: ModifiersStyles = { | ||
* today: { color: "red" }, | ||
* selected: { backgroundColor: "blue" }, | ||
* weekend: { color: "green" } | ||
* }; | ||
*/ | ||
export type ModifiersStyles = Record<string, CSSProperties>; | ||
/** | ||
* The classnames to assign to each day element matching a modifier. | ||
* | ||
* @example | ||
* const modifiersClassNames: ModifiersClassNames = { | ||
* today: "today", // Use the "today" class for the today's day | ||
* selected: "highlight", // Use the "highlight" class for the selected day | ||
* weekend: "weekend" // Use the "weekend" class for the weekend days | ||
* }; | ||
*/ | ||
export type ModifiersClassNames = Record<string, string>; | ||
/** | ||
* The props that have been deprecated since version 9.0.0. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/upgrading | ||
* @see https://daypicker.dev/upgrading | ||
*/ | ||
@@ -266,3 +332,5 @@ export type V9DeprecatedProps = | ||
| "toYear"; | ||
/** The direction to move the focus relative to the current focused date. */ | ||
export type MoveFocusDir = "after" | "before"; | ||
/** The temporal unit to move the focus by. */ | ||
export type MoveFocusBy = "day" | "week" | "startOfWeek" | "endOfWeek" | "month" | "year"; |
@@ -5,10 +5,7 @@ import type { CalendarWeek, CalendarDay, CalendarMonth } from "./classes/index.js"; | ||
/** | ||
* The hook to get and handle the calendar state. | ||
* Return the calendar object to work with the calendar in custom components. | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export interface UseCalendar { | ||
today: Date; | ||
/** All the unique dates displayed to the calendar. */ | ||
dates: Date[]; | ||
export interface Calendar { | ||
/** | ||
@@ -24,12 +21,2 @@ * All the days displayed in the calendar. As opposite from | ||
months: CalendarMonth[]; | ||
/** | ||
* The month displayed as first the calendar. When `numberOfMonths` is greater | ||
* than `1`, it is the first of the displayed months. | ||
*/ | ||
firstMonth: Date; | ||
/** | ||
* The month displayed as last the calendar. When `numberOfMonths` is greater | ||
* than `1`, it is the last of the displayed months. | ||
*/ | ||
lastMonth: Date; | ||
/** The next month to display. */ | ||
@@ -43,3 +30,3 @@ nextMonth: Date | undefined; | ||
*/ | ||
navigationStartMonth: Date | undefined; | ||
navStart: Date | undefined; | ||
/** | ||
@@ -49,11 +36,5 @@ * The month where the navigation ends. `undefined` if the calendar can be | ||
*/ | ||
navigationEndMonth: Date | undefined; | ||
/** Set the first month displayed in the calendar. */ | ||
setFirstMonth: (date: Date) => void; | ||
navEnd: Date | undefined; | ||
/** Navigate to the specified month. Will fire the `onMonthChange` callback. */ | ||
goToMonth: (month: Date) => void; | ||
/** Navigate to the next month. */ | ||
goToNextMonth: () => void; | ||
/** Navigate to the previous month. */ | ||
goToPreviousMonth: () => void; | ||
/** | ||
@@ -69,6 +50,4 @@ * Navigate to the specified date. If the second parameter (refDate) is | ||
goToDay: (day: CalendarDay) => void; | ||
/** Whether the given date is included in the displayed months. */ | ||
isDayDisplayed: (day: CalendarDay) => boolean; | ||
} | ||
/** @private */ | ||
export declare function useCalendar(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "ISOWeek">, dateLib: DateLib): UseCalendar; | ||
export declare function useCalendar(props: DayPickerProps, dateLib: DateLib): Calendar; |
@@ -16,4 +16,3 @@ "use strict"; | ||
function useCalendar(props, dateLib) { | ||
const today = dateLib.startOfDay(props.today ?? new dateLib.Date()); | ||
const [navigationStartMonth, navigationEndMonth] = (0, getNavMonth_js_1.getNavMonths)(props, dateLib); | ||
const [navStart, navEnd] = (0, getNavMonth_js_1.getNavMonths)(props, dateLib); | ||
const { startOfMonth } = dateLib; | ||
@@ -23,25 +22,17 @@ const initialDisplayMonth = (0, getInitialMonth_js_1.getInitialMonth)(props, dateLib); | ||
const [firstMonth, setFirstMonth] = (0, useControlledValue_js_1.useControlledValue)(initialDisplayMonth, props.month ? startOfMonth(props.month) : undefined); | ||
/** An array of the months displayed in the calendar. */ | ||
const displayMonths = (0, getDisplayMonths_js_1.getDisplayMonths)(firstMonth, navigationEndMonth, props, dateLib); | ||
/** The last month displayed in the calendar. */ | ||
const lastMonth = displayMonths[displayMonths.length - 1]; | ||
/** An array of the dates displayed in the calendar. */ | ||
/** The months displayed in the calendar. */ | ||
const displayMonths = (0, getDisplayMonths_js_1.getDisplayMonths)(firstMonth, navEnd, props, dateLib); | ||
/** The dates displayed in the calendar. */ | ||
const dates = (0, getDates_js_1.getDates)(displayMonths, props.endMonth, props, dateLib); | ||
/** An array of the Months displayed in the calendar. */ | ||
/** The Months displayed in the calendar. */ | ||
const months = (0, getMonths_js_1.getMonths)(displayMonths, dates, props, dateLib); | ||
/** An array of the Weeks displayed in the calendar. */ | ||
/** The Weeks displayed in the calendar. */ | ||
const weeks = (0, getWeeks_js_1.getWeeks)(months); | ||
/** An array of the Days displayed in the calendar. */ | ||
/** The Days displayed in the calendar. */ | ||
const days = (0, getDays_js_1.getDays)(months); | ||
const previousMonth = (0, getPreviousMonth_js_1.getPreviousMonth)(firstMonth, navigationStartMonth, props, dateLib); | ||
const nextMonth = (0, getNextMonth_js_1.getNextMonth)(firstMonth, navigationEndMonth, props, dateLib); | ||
const previousMonth = (0, getPreviousMonth_js_1.getPreviousMonth)(firstMonth, navStart, props, dateLib); | ||
const nextMonth = (0, getNextMonth_js_1.getNextMonth)(firstMonth, navEnd, props, dateLib); | ||
const { disableNavigation, onMonthChange } = props; | ||
function isDayDisplayed(day) { | ||
return weeks.some((week) => { | ||
return week.days.some((d) => { | ||
return d.isEqualTo(day); | ||
}); | ||
}); | ||
} | ||
function goToMonth(date) { | ||
const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day))); | ||
const goToMonth = (date) => { | ||
if (disableNavigation) { | ||
@@ -52,42 +43,29 @@ return; | ||
// if month is before start, use the first month instead | ||
if (navigationStartMonth && newMonth < startOfMonth(navigationStartMonth)) { | ||
newMonth = startOfMonth(navigationStartMonth); | ||
if (navStart && newMonth < startOfMonth(navStart)) { | ||
newMonth = startOfMonth(navStart); | ||
} | ||
// if month is after endMonth, use the last month instead | ||
if (navigationEndMonth && newMonth > startOfMonth(navigationEndMonth)) { | ||
newMonth = startOfMonth(navigationEndMonth); | ||
if (navEnd && newMonth > startOfMonth(navEnd)) { | ||
newMonth = startOfMonth(navEnd); | ||
} | ||
setFirstMonth(newMonth); | ||
onMonthChange?.(newMonth); | ||
} | ||
function goToDay(day) { | ||
if (isDayDisplayed(day)) { | ||
}; | ||
const goToDay = (day) => { | ||
// is this check necessary? | ||
if (isDayInCalendar(day)) { | ||
return; | ||
} | ||
goToMonth(day.date); | ||
} | ||
function goToNextMonth() { | ||
return nextMonth ? goToMonth(nextMonth) : undefined; | ||
} | ||
function goToPreviousMonth() { | ||
return previousMonth ? goToMonth(previousMonth) : undefined; | ||
} | ||
}; | ||
const calendar = { | ||
dates, | ||
months, | ||
weeks, | ||
days, | ||
today, | ||
navigationStartMonth: navigationStartMonth, | ||
navigationEndMonth: navigationEndMonth, | ||
firstMonth: firstMonth, | ||
lastMonth, | ||
navStart, | ||
navEnd, | ||
previousMonth, | ||
nextMonth, | ||
setFirstMonth, | ||
isDayDisplayed, | ||
goToMonth, | ||
goToDay, | ||
goToNextMonth, | ||
goToPreviousMonth | ||
goToDay | ||
}; | ||
@@ -94,0 +72,0 @@ return calendar; |
@@ -0,13 +1,31 @@ | ||
import { CalendarDay } from "./classes/CalendarDay.js"; | ||
import { CalendarMonth } from "./classes/CalendarMonth.js"; | ||
import type { DayPickerProps } from "./types/props.js"; | ||
import type { UseCalendar } from "./useCalendar.js"; | ||
import type { UseModifiers } from "./useModifiers.js"; | ||
import type { UseMulti, UseRange, UseSelection, UseSingle } from "./useSelection.js"; | ||
export type { UseCalendar, UseModifiers, UseSelection, UseMulti, UseRange, UseSingle }; | ||
export declare const dayPickerContext: import("react").Context<(UseCalendar & UseModifiers & UseSelection<DayPickerProps>) | undefined>; | ||
import type { SelectedValue, SelectHandler } from "./types/selection.js"; | ||
import { Modifiers } from "./types/shared.js"; | ||
export declare const dayPickerContext: import("react").Context<DayPickerContext<DayPickerProps> | undefined>; | ||
export type DayPickerContext<T extends DayPickerProps> = { | ||
/** The months displayed in the calendar. */ | ||
months: CalendarMonth[]; | ||
/** The next month to display. */ | ||
nextMonth: Date | undefined; | ||
/** The previous month to display. */ | ||
previousMonth: Date | undefined; | ||
/** Navigate to the specified month. Will fire the `onMonthChange` callback. */ | ||
goToMonth: (month: Date) => void; | ||
/** Returns the modifiers for the given day. */ | ||
getModifiers: (day: CalendarDay) => Modifiers; | ||
/** The selected date(s). */ | ||
selected: SelectedValue<T> | undefined; | ||
/** Set a selection. */ | ||
select: SelectHandler<T> | undefined; | ||
/** Whether the given date is selected. */ | ||
isSelected: ((date: Date) => boolean) | undefined; | ||
}; | ||
/** | ||
* Return API to work with `<DayPicker />` inside custom components. | ||
* Return the context to work with `<DayPicker />` inside custom components. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function useDayPicker<T extends DayPickerProps>(props?: T): UseCalendar & UseModifiers & UseSelection<T>; | ||
export declare function useDayPicker<T extends DayPickerProps>(props?: T): DayPickerContext<T>; |
@@ -9,6 +9,6 @@ "use strict"; | ||
/** | ||
* Return API to work with `<DayPicker />` inside custom components. | ||
* Return the context to work with `<DayPicker />` inside custom components. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -15,0 +15,0 @@ function useDayPicker(props) { |
import type { CalendarDay } from "./classes/index.js"; | ||
import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
import { UseCalendar } from "./useCalendar.js"; | ||
import { UseModifiers } from "./useModifiers.js"; | ||
import { UseSelection } from "./useSelection.js"; | ||
import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Modifiers } from "./types/index.js"; | ||
import { Calendar } from "./useCalendar.js"; | ||
export type UseFocus = { | ||
@@ -13,11 +11,8 @@ /** The date that is currently focused. */ | ||
setFocused: (day: CalendarDay | undefined) => void; | ||
/** Set the last focused day. */ | ||
setLastFocused: (day: CalendarDay | undefined) => void; | ||
/** Blur the focused day. */ | ||
blur: () => void; | ||
/** Move the current focus to the next day according to the given direction. */ | ||
moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void; | ||
}; | ||
/** @private */ | ||
export declare function useFocus(props: Pick<DayPickerProps, "autoFocus" | "disabled" | "hidden" | "modifiers" | "numberOfMonths" | "locale" | "ISOWeek" | "weekStartsOn">, calendar: UseCalendar, modifiers: UseModifiers, selection: UseSelection<{ | ||
mode: Mode; | ||
}>, dateLib: DateLib): UseFocus; | ||
export declare function useFocus<T extends DayPickerProps>(props: T, calendar: Calendar, getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, dateLib: DateLib): UseFocus; |
@@ -8,7 +8,6 @@ "use strict"; | ||
/** @private */ | ||
function useFocus(props, calendar, modifiers, selection, dateLib) { | ||
const { getModifiers } = modifiers; | ||
function useFocus(props, calendar, getModifiers, isSelected, dateLib) { | ||
const { autoFocus } = props; | ||
const [lastFocused, setLastFocused] = (0, react_1.useState)(); | ||
const focusTarget = (0, calculateFocusTarget_js_1.calculateFocusTarget)(calendar, getModifiers, selection.isSelected, lastFocused); | ||
const focusTarget = (0, calculateFocusTarget_js_1.calculateFocusTarget)(calendar.days, getModifiers, isSelected || (() => false), lastFocused); | ||
const [focusedDay, setFocused] = (0, react_1.useState)(autoFocus ? focusTarget : undefined); | ||
@@ -22,3 +21,3 @@ const blur = () => { | ||
return; | ||
const nextFocus = (0, getNextFocus_js_1.getNextFocus)(moveBy, moveDir, focusedDay, calendar.navigationStartMonth, calendar.navigationEndMonth, props, dateLib); | ||
const nextFocus = (0, getNextFocus_js_1.getNextFocus)(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib); | ||
if (!nextFocus) | ||
@@ -36,3 +35,2 @@ return; | ||
focused: focusedDay, | ||
setLastFocused, | ||
blur, | ||
@@ -39,0 +37,0 @@ moveFocus |
@@ -1,17 +0,3 @@ | ||
import { type UseMulti } from "./selection/useMulti.js"; | ||
import { type UseRange } from "./selection/useRange.js"; | ||
import { type UseSingle } from "./selection/useSingle.js"; | ||
import type { DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
export type { UseMulti, UseRange, UseSingle }; | ||
export declare function useSelection<T extends DayPickerProps>(props: T, dateLib?: DateLib): UseSelection<T>; | ||
export type UseSelection<T> = T extends { | ||
mode: Mode; | ||
} ? { | ||
single: UseSingle<T>; | ||
multiple: UseMulti<T>; | ||
range: UseRange<T>; | ||
}[T["mode"]] : { | ||
handleSelect: () => undefined; | ||
isSelected: () => false; | ||
selected: undefined; | ||
}; | ||
import type { DateLib, DayPickerProps } from "./types/index.js"; | ||
import { Selection } from "./types/selection.js"; | ||
export declare function useSelection<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T> | undefined; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useSelection = useSelection; | ||
const dateLib_js_1 = require("./lib/dateLib.js"); | ||
const useMulti_js_1 = require("./selection/useMulti.js"); | ||
@@ -9,25 +8,16 @@ const useRange_js_1 = require("./selection/useRange.js"); | ||
function useSelection(props, dateLib) { | ||
const lib = { ...dateLib_js_1.dateLib, ...dateLib }; | ||
const single = (0, useSingle_js_1.useSingle)(props, lib); | ||
const multi = (0, useMulti_js_1.useMulti)(props, lib); | ||
const range = (0, useRange_js_1.useRange)(props, lib); | ||
const single = (0, useSingle_js_1.useSingle)(props, dateLib); | ||
const multi = (0, useMulti_js_1.useMulti)(props, dateLib); | ||
const range = (0, useRange_js_1.useRange)(props, dateLib); | ||
switch (props.mode) { | ||
case "single": | ||
// @ts-expect-error The type of `single` is `UseSingle<T>`. | ||
return single; | ||
case "multiple": | ||
// @ts-expect-error The type of `multi` is `UseMulti<T>`. | ||
return multi; | ||
case "range": | ||
// @ts-expect-error The type of `range` is `UseRange<T>`. | ||
return range; | ||
default: | ||
// @ts-expect-error The type of the return value correct | ||
return { | ||
handleSelect: () => undefined, | ||
isSelected: () => false, | ||
selected: undefined | ||
}; | ||
return undefined; | ||
} | ||
} | ||
//# sourceMappingURL=useSelection.js.map |
import type { DateLib, Matcher } from "../types/index.js"; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[]; | ||
/** | ||
@@ -5,0 +3,0 @@ * Returns whether a day matches against at least one of the given |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.isDatesArray = isDatesArray; | ||
exports.dateMatchModifiers = dateMatchModifiers; | ||
const isDateInRange_js_1 = require("./isDateInRange.js"); | ||
const rangeIncludesDate_js_1 = require("./rangeIncludesDate.js"); | ||
const typeguards_js_1 = require("./typeguards.js"); | ||
/** Returns true if `value` is an array of valid dates. */ | ||
function isDatesArray(value, dateLib) { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
/** | ||
@@ -40,9 +35,12 @@ * Returns whether a day matches against at least one of the given | ||
} | ||
if (isDatesArray(matcher, dateLib)) { | ||
if ((0, typeguards_js_1.isDatesArray)(matcher, dateLib)) { | ||
return matcher.includes(date); | ||
} | ||
if ((0, typeguards_js_1.isDateRange)(matcher)) { | ||
return (0, isDateInRange_js_1.isDateInRange)(date, matcher, dateLib); | ||
return (0, rangeIncludesDate_js_1.rangeIncludesDate)(matcher, date, false, dateLib); | ||
} | ||
if ((0, typeguards_js_1.isDayOfWeekType)(matcher)) { | ||
if (!Array.isArray(matcher.dayOfWeek)) { | ||
return matcher.dayOfWeek === date.getDay(); | ||
} | ||
return matcher.dayOfWeek.includes(date.getDay()); | ||
@@ -49,0 +47,0 @@ } |
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./rangeIncludesDate.js"; | ||
export * from "./typeguards.js"; |
@@ -19,4 +19,4 @@ "use strict"; | ||
__exportStar(require("./dateMatchModifiers.js"), exports); | ||
__exportStar(require("./isDateInRange.js"), exports); | ||
__exportStar(require("./rangeIncludesDate.js"), exports); | ||
__exportStar(require("./typeguards.js"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,4 +0,4 @@ | ||
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types/index.js"; | ||
import type { DateAfter, DateBefore, DateInterval, DateLib, DateRange, DayOfWeek } from "../types/index.js"; | ||
/** | ||
* Returns true if `matcher` is of type `DateInterval`. | ||
* Returns true if `matcher` is of type {@link DateInterval}. | ||
* | ||
@@ -9,3 +9,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is a `DateRange` type. | ||
* Returns true if `value` is a {@link DateRange} type. | ||
* | ||
@@ -16,3 +16,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateAfter`. | ||
* Returns true if `value` is of type {@link DateAfter}. | ||
* | ||
@@ -23,3 +23,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateBefore`. | ||
* Returns true if `value` is of type {@link DateBefore}. | ||
* | ||
@@ -30,39 +30,8 @@ * @group Utilities | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
* Returns true if `value` is a {@link DayOfWeek} type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isSingle(props: DayPickerProps): props is DayPickerProps & PropsSingle; | ||
/** | ||
* @deprecated This function has been renamed Use `isSingle` instead. | ||
* @protected | ||
*/ | ||
export declare const isDayPickerSingle: typeof isSingle; | ||
/** | ||
* Returns true if the props are for a multiple selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isMulti(props: DayPickerProps): props is DayPickerProps & PropsMulti; | ||
/** | ||
* @deprecated This function has been renamed Use `isMulti` instead. | ||
* @protected | ||
*/ | ||
export declare const isDayPickerMultiple: typeof isMulti; | ||
/** | ||
* Returns true if the props are for a range selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isRange(props: DayPickerProps): props is DayPickerProps & PropsRange; | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isDayOfWeekType(value: unknown): value is DayOfWeek; | ||
/** | ||
* @deprecated This function has been renamed Use `isRange` instead. | ||
* @protected | ||
*/ | ||
export declare const isDayPickerRange: typeof isRange; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[]; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.isDayPickerRange = exports.isDayPickerMultiple = exports.isDayPickerSingle = void 0; | ||
exports.isDateInterval = isDateInterval; | ||
@@ -8,8 +7,6 @@ exports.isDateRange = isDateRange; | ||
exports.isDateBeforeType = isDateBeforeType; | ||
exports.isSingle = isSingle; | ||
exports.isMulti = isMulti; | ||
exports.isRange = isRange; | ||
exports.isDayOfWeekType = isDayOfWeekType; | ||
exports.isDatesArray = isDatesArray; | ||
/** | ||
* Returns true if `matcher` is of type `DateInterval`. | ||
* Returns true if `matcher` is of type {@link DateInterval}. | ||
* | ||
@@ -25,3 +22,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is a `DateRange` type. | ||
* Returns true if `value` is a {@link DateRange} type. | ||
* | ||
@@ -34,3 +31,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateAfter`. | ||
* Returns true if `value` is of type {@link DateAfter}. | ||
* | ||
@@ -43,3 +40,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateBefore`. | ||
* Returns true if `value` is of type {@link DateBefore}. | ||
* | ||
@@ -52,48 +49,13 @@ * @group Utilities | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
* Returns true if `value` is a {@link DayOfWeek} type. | ||
* | ||
* @group Utilities | ||
*/ | ||
function isSingle(props) { | ||
return props.mode === "single"; | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isSingle` instead. | ||
* @protected | ||
*/ | ||
exports.isDayPickerSingle = isSingle; | ||
/** | ||
* Returns true if the props are for a multiple selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
function isMulti(props) { | ||
return props.mode === "multiple"; | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isMulti` instead. | ||
* @protected | ||
*/ | ||
exports.isDayPickerMultiple = isMulti; | ||
/** | ||
* Returns true if the props are for a range selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
function isRange(props) { | ||
return props.mode === "range"; | ||
} | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
function isDayOfWeekType(value) { | ||
return Boolean(value && typeof value === "object" && "dayOfWeek" in value); | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isRange` instead. | ||
* @protected | ||
*/ | ||
exports.isDayPickerRange = isRange; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
function isDatesArray(value, dateLib) { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
//# sourceMappingURL=typeguards.js.map |
@@ -36,4 +36,2 @@ import type { DateLib } from "../types/index.js"; | ||
readonly date: Date; | ||
/** A unique identifier for the day. */ | ||
readonly uid: string; | ||
/** | ||
@@ -40,0 +38,0 @@ * Check if the day is the same as the given day: considering if it is in the |
@@ -17,6 +17,2 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
this.dateLib = dateLib; | ||
const { format } = dateLib; | ||
this.uid = | ||
format(date, "yyyyMMdd") + | ||
(this.outside ? `-` + format(displayMonth, "yyyyMMdd") : ""); | ||
} | ||
@@ -23,0 +19,0 @@ /** |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Button(props: JSX.IntrinsicElements["button"]): React.JSX.Element; | ||
export type ButtonProps = Parameters<typeof Button>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Button(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function CaptionLabel(props: JSX.IntrinsicElements["span"]): React.JSX.Element; | ||
export type CaptionLabelProps = Parameters<typeof CaptionLabel>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function CaptionLabel(props) { |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export declare function Chevron(props: { |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Chevron(props) { |
@@ -8,13 +8,14 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. If you | ||
* need to just change the content of the day cell, consider swapping the | ||
* If you need to just change the content of the day cell, consider swapping the | ||
* `DayDate` component instead. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Day(props: { | ||
/** The day to render. */ | ||
day: CalendarDay; | ||
/** The modifiers to apply to the day. */ | ||
modifiers: Modifiers; | ||
} & JSX.IntrinsicElements["td"]): React.JSX.Element; | ||
export type DayProps = Parameters<typeof Day>[0]; |
@@ -6,8 +6,7 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. If you | ||
* need to just change the content of the day cell, consider swapping the | ||
* If you need to just change the content of the day cell, consider swapping the | ||
* `DayDate` component instead. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -14,0 +13,0 @@ export function Day(props) { |
@@ -10,6 +10,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -16,0 +14,0 @@ export declare function DayButton(props: { |
@@ -8,6 +8,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -14,0 +12,0 @@ export function DayButton(props) { |
@@ -19,9 +19,7 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Dropdown(props: { | ||
components: Pick<Required<CustomComponents>, "Select" | "Option" | "Chevron">; | ||
components: Pick<CustomComponents, "Select" | "Option" | "Chevron">; | ||
classNames: Pick<ClassNames, UI.DropdownRoot | UI.Dropdown | UI.CaptionLabel | UI.Chevron>; | ||
@@ -28,0 +26,0 @@ options?: DropdownOption[] | undefined; |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export function Dropdown(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function DropdownNav(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type DropdownNavProps = Parameters<typeof DropdownNav>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function DropdownNav(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Footer(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type FooterProps = Parameters<typeof Footer>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Footer(props) { |
@@ -7,6 +7,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -13,0 +11,0 @@ export declare function Month(props: { |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export function Month(props) { |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export declare function MonthCaption(props: { |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function MonthCaption(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function MonthGrid(props: JSX.IntrinsicElements["table"]): React.JSX.Element; | ||
export type MonthGridProps = Parameters<typeof MonthGrid>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function MonthGrid(props) { |
@@ -6,5 +6,5 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Months(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthsProps = Parameters<typeof Months>[0]; |
@@ -6,3 +6,3 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -9,0 +9,0 @@ export function Months(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Nav(props: JSX.IntrinsicElements["nav"]): React.JSX.Element; | ||
export type NavProps = Parameters<typeof Nav>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Nav(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Option(props: JSX.IntrinsicElements["option"]): React.JSX.Element; | ||
export type OptionProps = Parameters<typeof Option>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Option(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Root(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type RootProps = Parameters<typeof Root>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Root(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Select(props: JSX.IntrinsicElements["select"]): React.JSX.Element; | ||
export type SelectProps = Parameters<typeof Select>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Select(props) { |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export declare function Week(props: { |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Week(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Weekday(props: JSX.IntrinsicElements["th"]): React.JSX.Element; | ||
export type WeekdayProps = Parameters<typeof Weekday>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Weekday(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Weekdays(props: JSX.IntrinsicElements["tr"]): React.JSX.Element; | ||
export type WeekdaysProps = Parameters<typeof Weekdays>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function Weekdays(props) { |
@@ -6,6 +6,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -12,0 +10,0 @@ export declare function WeekNumber(props: { |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function WeekNumber(props) { |
@@ -5,8 +5,6 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function WeekNumberHeader(props: JSX.IntrinsicElements["th"]): React.JSX.Element; | ||
export type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0]; |
@@ -5,6 +5,4 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +9,0 @@ export function WeekNumberHeader(props) { |
import React from "react"; | ||
/** | ||
* Render the label in the month caption. | ||
* Render the weeks in the month grid. | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function Weeks(props: JSX.IntrinsicElements["tbody"]): React.JSX.Element; | ||
export type WeeksProps = Parameters<typeof Weeks>[0]; |
import React from "react"; | ||
/** | ||
* Render the label in the month caption. | ||
* Render the weeks in the month grid. | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -10,0 +8,0 @@ export function Weeks(props) { |
@@ -7,4 +7,4 @@ import React from "react"; | ||
* @group DayPicker | ||
* @see http://daypicker.dev | ||
* @see https://daypicker.dev | ||
*/ | ||
export declare function DayPicker(props: DayPickerProps): React.JSX.Element; | ||
export declare function DayPicker<T extends DayPickerProps>(props: T): React.JSX.Element; |
@@ -8,7 +8,7 @@ import React, { useCallback, useMemo } from "react"; | ||
import { getDefaultClassNames } from "./helpers/getDefaultClassNames.js"; | ||
import { getDropdownMonths } from "./helpers/getDropdownMonths.js"; | ||
import { getDropdownYears } from "./helpers/getDropdownYears.js"; | ||
import { getFormatters } from "./helpers/getFormatters.js"; | ||
import { getMonthOptions } from "./helpers/getMonthOptions.js"; | ||
import { getStyleForModifiers } from "./helpers/getStyleForModifiers.js"; | ||
import { getWeekdays } from "./helpers/getWeekdays.js"; | ||
import { getYearOptions } from "./helpers/getYearOptions.js"; | ||
import * as defaultLabels from "./labels/index.js"; | ||
@@ -18,4 +18,6 @@ import { useCalendar } from "./useCalendar.js"; | ||
import { useFocus } from "./useFocus.js"; | ||
import { useModifiers } from "./useModifiers.js"; | ||
import { useGetModifiers } from "./useGetModifiers.js"; | ||
import { useSelection } from "./useSelection.js"; | ||
import { rangeIncludesDate } from "./utils/rangeIncludesDate.js"; | ||
import { isDateRange } from "./utils/typeguards.js"; | ||
/** | ||
@@ -25,14 +27,5 @@ * Render the date picker calendar. | ||
* @group DayPicker | ||
* @see http://daypicker.dev | ||
* @see https://daypicker.dev | ||
*/ | ||
export function DayPicker(props) { | ||
const { captionLayout, locale, mode, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles } = props; | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate, | ||
useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
const { components, formatters, labels, dateLib, classNames } = useMemo(() => ({ | ||
@@ -51,10 +44,17 @@ dateLib: getDateLib(props.dateLib), | ||
]); | ||
const { captionLayout, firstWeekContainsDate, locale, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onNextClick, onPrevClick, showWeekNumber, styles, useAdditionalDayOfYearTokens, useAdditionalWeekYearTokens, weekStartsOn } = props; | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn, | ||
firstWeekContainsDate, | ||
useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters; | ||
const calendar = useCalendar(props, dateLib); | ||
const { months, navigationStartMonth, navigationEndMonth, previousMonth, nextMonth, goToPreviousMonth, goToNextMonth, goToMonth } = calendar; | ||
const modifiers = useModifiers(props, calendar, dateLib); | ||
const selection = useSelection(props, dateLib); | ||
const { isSelected, handleSelect } = selection; | ||
const focus = useFocus(props, calendar, modifiers, selection, dateLib); | ||
const { isFocusTarget, focused: focusedDay, setFocused, moveFocus, blur } = focus; | ||
const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar; | ||
const getModifiers = useGetModifiers(days, props, dateLib); | ||
const { isSelected, select, selected: selectedValue } = useSelection(props, dateLib) ?? {}; | ||
const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib); | ||
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels; | ||
@@ -66,18 +66,18 @@ const weekdays = useMemo(() => getWeekdays(locale, props.weekStartsOn, props.ISOWeek, dateLib), [dateLib, locale, props.ISOWeek, props.weekStartsOn]); | ||
return; | ||
goToPreviousMonth(); | ||
goToMonth(previousMonth); | ||
onPrevClick?.(previousMonth); | ||
}, [goToPreviousMonth, onPrevClick, previousMonth]); | ||
}, [previousMonth, goToMonth, onPrevClick]); | ||
const handleNextClick = useCallback(() => { | ||
if (!nextMonth) | ||
return; | ||
goToNextMonth(); | ||
goToMonth(nextMonth); | ||
onNextClick?.(nextMonth); | ||
}, [goToNextMonth, nextMonth, onNextClick]); | ||
}, [goToMonth, nextMonth, onNextClick]); | ||
const handleDayClick = useCallback((day, m) => (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
handleSelect(day.date, m, e); | ||
setFocused(day); | ||
select?.(day.date, m, e); | ||
onDayClick?.(day.date, m, e); | ||
}, [handleSelect, onDayClick, setFocused]); | ||
}, [select, onDayClick, setFocused]); | ||
const handleDayFocus = useCallback((day, m) => (e) => { | ||
@@ -116,9 +116,18 @@ setFocused(day); | ||
}), [classNames, props.className, props.style, styles]); | ||
const dataAttributes = useMemo(() => getDataAttributes(props), [props]); | ||
const contextValue = useMemo(() => ({ ...calendar, ...selection, ...modifiers }), [calendar, modifiers, selection]); | ||
const dataAttributes = getDataAttributes(props); | ||
const contextValue = { | ||
selected: selectedValue, | ||
select: select, | ||
isSelected, | ||
months, | ||
nextMonth, | ||
previousMonth, | ||
goToMonth, | ||
getModifiers | ||
}; | ||
return (React.createElement(dayPickerContext.Provider, { value: contextValue }, | ||
React.createElement(components.Root, { className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, "data-interactive": isInteractive || undefined, "data-multiple-months": numberOfMonths > 1 || undefined, "data-week-numbers": showWeekNumber || undefined, ...dataAttributes }, | ||
React.createElement(components.Root, { className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, ...dataAttributes }, | ||
React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] }, | ||
!props.hideNavigation && (React.createElement(components.Nav, { role: "navigation", className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav() }, | ||
React.createElement(components.Button, { type: "button", className: classNames[UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth, labelOptions), onClick: handlePreviousClick }, | ||
React.createElement(components.Button, { type: "button", className: classNames[UI.ButtonPrevious], tabIndex: previousMonth ? undefined : -1, disabled: previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth, labelOptions), onClick: handlePreviousClick }, | ||
React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: "left" })), | ||
@@ -137,4 +146,4 @@ React.createElement(components.Button, { type: "button", className: classNames[UI.ButtonNext], tabIndex: nextMonth ? undefined : -1, disabled: nextMonth ? undefined : true, "aria-label": labelNext(nextMonth, labelOptions), onClick: handleNextClick }, | ||
}; | ||
const dropdownMonths = getDropdownMonths(calendarMonth.date, navigationStartMonth, navigationEndMonth, formatters, locale, dateLib); | ||
const dropdownYears = getDropdownYears(months[0].date, navigationStartMonth, navigationEndMonth, formatters, dateLib); | ||
const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, locale, dateLib); | ||
const dropdownYears = getYearOptions(months[0].date, navStart, navEnd, formatters, dateLib); | ||
return (React.createElement(components.Month, { className: classNames[UI.Month], style: styles?.[UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth }, | ||
@@ -158,28 +167,21 @@ React.createElement(components.MonthCaption, { className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] }, | ||
const { date } = day; | ||
const dayModifiers = modifiers.getModifiers(day); | ||
const focused = focusedDay?.isEqualTo(day); | ||
if (!dayModifiers.hidden && focused) | ||
dayModifiers[DayFlag.focused] = true; | ||
const selected = isSelected(date) || dayModifiers.selected; | ||
dayModifiers[SelectionState.selected] = | ||
!dayModifiers.disabled && selected; | ||
if (!dayModifiers.disabled && mode === "range") { | ||
const range = selection; | ||
dayModifiers[SelectionState.range_start] = | ||
range.isRangeStart(date); | ||
dayModifiers[SelectionState.range_end] = | ||
range.isRangeEnd(date); | ||
dayModifiers[SelectionState.range_middle] = | ||
range.isRangeMiddle(date); | ||
const modifiers = getModifiers(day); | ||
modifiers[DayFlag.focused] = | ||
!modifiers.hidden && | ||
Boolean(focused?.isEqualTo(day)); | ||
modifiers[SelectionState.selected] = | ||
!modifiers.disabled && | ||
(isSelected?.(date) || modifiers.selected); | ||
if (isDateRange(selectedValue)) { | ||
// add range modifiers | ||
const { from, to } = selectedValue; | ||
modifiers[SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from)); | ||
modifiers[SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to)); | ||
modifiers[SelectionState.range_middle] = | ||
rangeIncludesDate(selectedValue, date, true, dateLib); | ||
} | ||
const style = { | ||
...getStyleForModifiers(dayModifiers, props.modifiersStyles), | ||
...styles?.[UI.Day] | ||
}; | ||
const className = [ | ||
classNames[UI.Day], | ||
...getClassNamesForModifiers(dayModifiers, classNames, props.modifiersClassNames) | ||
]; | ||
const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles); | ||
const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames); | ||
const ariaLabel = !isInteractive | ||
? labelGridcell(date, dayModifiers, labelOptions, dateLib) | ||
? labelGridcell(date, modifiers, labelOptions, dateLib) | ||
: undefined; | ||
@@ -192,3 +194,3 @@ const dataAttributes = { | ||
}; | ||
return (React.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: dayModifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": dayModifiers.hidden || undefined, "aria-selected": dayModifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (React.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], day: day, modifiers: dayModifiers, disabled: dayModifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, dayModifiers, labelOptions, dateLib), onClick: handleDayClick(day, dayModifiers), onBlur: handleDayBlur(day, dayModifiers), onFocus: handleDayFocus(day, dayModifiers), onKeyDown: handleDayKeyDown(day, dayModifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib)))); | ||
return (React.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": modifiers.hidden || undefined, "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, ...dataAttributes }, isInteractive ? (React.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, labelOptions, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers) }, formatDay(date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib)))); | ||
}))); | ||
@@ -195,0 +197,0 @@ }))))); |
@@ -8,3 +8,3 @@ import { FormatOptions } from "../lib/index.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function formatCaption(month: Date, options?: FormatOptions, |
@@ -7,3 +7,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -10,0 +10,0 @@ export function formatCaption(month, options, |
@@ -8,3 +8,3 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function formatDay(date: Date, options?: FormatOptions, |
@@ -7,3 +7,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -10,0 +10,0 @@ export function formatDay(date, options, |
/** | ||
* Format the month number for the dropdown option label. | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @defaultValue The localized month name | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -8,0 +8,0 @@ export declare function formatMonthDropdown( |
@@ -5,5 +5,5 @@ import { enUS } from "../lib/locales.js"; | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @defaultValue The localized month name | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -15,5 +15,4 @@ export function formatMonthDropdown( | ||
locale = enUS) { | ||
return (locale.localize?.month(monthNumber) ?? | ||
monthNumber.toString()); | ||
return locale.localize?.month(monthNumber); | ||
} | ||
//# sourceMappingURL=formatMonthDropdown.js.map |
@@ -8,3 +8,3 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function formatWeekdayName(weekday: Date, options?: FormatOptions, |
@@ -7,3 +7,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -10,0 +10,0 @@ export function formatWeekdayName(weekday, options, |
@@ -6,4 +6,4 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
export declare function formatWeekNumber(weekNumber: number): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export function formatWeekNumber(weekNumber) { |
@@ -6,4 +6,4 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
export declare function formatWeekNumberHeader(): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export function formatWeekNumberHeader() { |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export declare function formatYearDropdown(year: number): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export function formatYearDropdown(year) { |
import type { CalendarDay } from "../classes/index.js"; | ||
import type { Modifiers } from "../types/index.js"; | ||
import { UseCalendar } from "../useCalendar.js"; | ||
export declare function calculateFocusTarget(calendar: UseCalendar, getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, lastFocused: CalendarDay | undefined): CalendarDay | undefined; | ||
export declare function calculateFocusTarget(days: CalendarDay[], getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, lastFocused: CalendarDay | undefined): CalendarDay | undefined; |
import { DayFlag } from "../UI.js"; | ||
export function calculateFocusTarget(calendar, getModifiers, isSelected, lastFocused) { | ||
export function calculateFocusTarget(days, getModifiers, isSelected, lastFocused) { | ||
let focusTarget; | ||
let index = 0; | ||
let found = false; | ||
while (index < calendar.days.length && !found) { | ||
const day = calendar.days[index]; | ||
const m = getModifiers(day); | ||
if (!m[DayFlag.disabled] && !m[DayFlag.hidden] && !m[DayFlag.outside]) { | ||
if (m[DayFlag.focused]) { | ||
while (index < days.length && !found) { | ||
const day = days[index]; | ||
const modifiers = getModifiers(day); | ||
if (!modifiers[DayFlag.disabled] && | ||
!modifiers[DayFlag.hidden] && | ||
!modifiers[DayFlag.outside]) { | ||
if (modifiers[DayFlag.focused]) { | ||
focusTarget = day; | ||
@@ -22,3 +24,3 @@ found = true; | ||
} | ||
else if (m[DayFlag.today]) { | ||
else if (modifiers[DayFlag.today]) { | ||
focusTarget = day; | ||
@@ -32,3 +34,3 @@ found = true; | ||
// return the first day that is focusable | ||
focusTarget = calendar.days.find((day) => { | ||
focusTarget = days.find((day) => { | ||
const m = getModifiers(day); | ||
@@ -35,0 +37,0 @@ return !m[DayFlag.disabled] && !m[DayFlag.hidden] && !m[DayFlag.outside]; |
@@ -1,2 +0,2 @@ | ||
import { DayFlag, SelectionState } from "../UI.js"; | ||
import { DayFlag, SelectionState, UI } from "../UI.js"; | ||
export function getClassNamesForModifiers(modifiers, classNames, modifiersClassNames = {}) { | ||
@@ -16,5 +16,5 @@ const modifierClassNames = Object.entries(modifiers) | ||
return previousValue; | ||
}, []); | ||
}, [classNames[UI.Day]]); | ||
return modifierClassNames; | ||
} | ||
//# sourceMappingURL=getClassNamesForModifiers.js.map |
import type { CustomComponents, DayPickerProps } from "../types/index.js"; | ||
export declare function getComponents(customComponents: DayPickerProps["components"]): Required<CustomComponents>; | ||
export declare function getComponents(customComponents: DayPickerProps["components"]): CustomComponents; |
@@ -5,3 +5,5 @@ /** Return the `data-` attributes from the props. */ | ||
"data-mode": props.mode ?? undefined, | ||
"data-required": "required" in props ? props.required : undefined | ||
"data-required": "required" in props ? props.required : undefined, | ||
"data-multiple-months": (props.numberOfMonths && props.numberOfMonths > 1) || undefined, | ||
"data-week-numbers": props.showWeekNumber || undefined | ||
}; | ||
@@ -8,0 +10,0 @@ Object.entries(props).forEach(([key, val]) => { |
@@ -7,2 +7,2 @@ import type { ClassNames } from "../types/index.js"; | ||
*/ | ||
export declare function getDefaultClassNames(): Required<ClassNames>; | ||
export declare function getDefaultClassNames(): ClassNames; |
@@ -10,2 +10,2 @@ import { CalendarMonth } from "../classes/index.js"; | ||
/** Options from the props context. */ | ||
options: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[]; | ||
props: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[]; |
@@ -9,16 +9,16 @@ import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js"; | ||
/** Options from the props context. */ | ||
options, dateLib) { | ||
props, dateLib) { | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = dateLib; | ||
const dayPickerMonths = displayMonths.reduce((months, month) => { | ||
const firstDateOfFirstWeek = options.ISOWeek | ||
const firstDateOfFirstWeek = props.ISOWeek | ||
? startOfISOWeek(month) | ||
: startOfWeek(month, { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
}); | ||
const lastDateOfLastWeek = options.ISOWeek | ||
const lastDateOfLastWeek = props.ISOWeek | ||
? endOfISOWeek(endOfMonth(month)) | ||
: endOfWeek(endOfMonth(month), { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
}); | ||
@@ -29,3 +29,3 @@ /** The dates to display in the month. */ | ||
}); | ||
if (options.fixedWeeks && monthDates.length < 42) { | ||
if (props.fixedWeeks && monthDates.length < 42) { | ||
const extraDates = dates.filter((date) => { | ||
@@ -37,8 +37,8 @@ return (date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7)); | ||
const weeks = monthDates.reduce((weeks, date) => { | ||
const weekNumber = options.ISOWeek | ||
const weekNumber = props.ISOWeek | ||
? getISOWeek(date) | ||
: getWeek(date, { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn, | ||
firstWeekContainsDate: options.firstWeekContainsDate | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate | ||
}); | ||
@@ -59,3 +59,3 @@ const week = weeks.find((week) => week.weekNumber === weekNumber); | ||
}, []); | ||
if (!options.reverseMonths) { | ||
if (!props.reverseMonths) { | ||
return dayPickerMonths; | ||
@@ -62,0 +62,0 @@ } |
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** Return the start and end months for the calendar navigation. */ | ||
export declare function getNavMonths(props: Pick<DayPickerProps, "startMonth" | "endMonth" | "today" | "captionLayout" | "fromYear" | "toYear" | "fromMonth" | "toMonth">, dateLib: DateLib): [navStartMonth: Date | undefined, navEndMonth: Date | undefined]; | ||
export declare function getNavMonths(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): [start: Date | undefined, end: Date | undefined]; |
import type { CSSProperties } from "react"; | ||
import type { Modifiers, ModifiersStyles } from "../types/index.js"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties; | ||
import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, styles?: Partial<Styles>, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties; |
@@ -1,3 +0,4 @@ | ||
export function getStyleForModifiers(dayModifiers, modifiersStyles = {}) { | ||
let style = {}; | ||
import { UI } from "../UI.js"; | ||
export function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) { | ||
let style = { ...styles?.[UI.Day] }; | ||
Object.entries(dayModifiers) | ||
@@ -4,0 +5,0 @@ .filter(([, active]) => active === true) |
@@ -11,3 +11,3 @@ import type { DateLib, LabelOptions } from "../index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -14,0 +14,0 @@ export declare function labelDayButton(date: Date, |
@@ -10,3 +10,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -13,0 +13,0 @@ export function labelDayButton(date, |
@@ -9,3 +9,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -12,0 +12,0 @@ export declare function labelGrid(date: Date, options?: LabelOptions, |
@@ -8,3 +8,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export function labelGrid(date, options, |
@@ -8,3 +8,3 @@ import type { DateLib } from "../index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function labelGridcell(date: Date, |
@@ -6,3 +6,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelGridcell(date, |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelMonthDropdown(options?: LabelOptions): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelMonthDropdown(options) { |
@@ -6,4 +6,4 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelNav(): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelNav() { |
@@ -7,3 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -10,0 +10,0 @@ export declare function labelNext( |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelNext( |
@@ -7,3 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -10,0 +10,0 @@ export declare function labelPrevious( |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelPrevious( |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export declare function labelWeekday(date: Date, options?: LabelOptions, |
@@ -7,3 +7,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -10,0 +10,0 @@ export function labelWeekday(date, options, |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelWeekNumber(weekNumber: number, options?: LabelOptions): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelWeekNumber(weekNumber, options) { |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelWeekNumberHeader(options?: LabelOptions): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelWeekNumberHeader(options) { |
@@ -7,4 +7,4 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
export declare function labelYearDropdown(options?: LabelOptions): string; |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelYearDropdown(options) { |
@@ -1,15 +0,2 @@ | ||
import React from "react"; | ||
import type { DateLib, DayPickerProps, Modifiers, PropsMulti, PropsMultiRequired } from "../types/index.js"; | ||
export type UseMulti<T> = { | ||
handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined; | ||
isSelected: (date: Date) => boolean; | ||
} & (T extends { | ||
required: true; | ||
} ? { | ||
selected: Date[]; | ||
} : { | ||
selected: Date[] | undefined; | ||
}); | ||
export declare function useMulti<T extends DayPickerProps>(props: T extends { | ||
mode: "multiple"; | ||
} ? PropsMulti | PropsMultiRequired : object, dateLib: DateLib): UseMulti<T>; | ||
import type { DateLib, DayPickerProps, Selection } from "../types/index.js"; | ||
export declare function useMulti<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>; |
import React from "react"; | ||
export function useMulti(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [dates, setDates] = React.useState(mode !== "multiple" ? undefined : selected); | ||
const { selected: initiallySelected, required, onSelect, mode } = props; | ||
const [selected, setSelected] = React.useState(initiallySelected); | ||
const { isSameDay, Date } = dateLib; | ||
// Update the selected date if the required flag is set. | ||
React.useEffect(() => { | ||
if (mode !== "multiple") | ||
return; | ||
if (required && dates === undefined) { | ||
setDates([new Date()]); | ||
if (required && selected === undefined) { | ||
setSelected([new Date()]); | ||
} | ||
}, [required, dates, Date, mode]); | ||
}, [required, selected, Date, mode]); | ||
// Update the selected date if the selected value from props changes. | ||
React.useEffect(() => { | ||
if (mode !== "multiple") | ||
return; | ||
setDates(selected); | ||
}, [mode, selected]); | ||
setSelected(initiallySelected); | ||
}, [mode, initiallySelected]); | ||
const isSelected = (date) => { | ||
return dates?.some((d) => isSameDay(d, date)) ?? false; | ||
return selected?.some((d) => isSameDay(d, date)) ?? false; | ||
}; | ||
const { min, max } = props; | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
let newDates = [...(dates ?? [])]; | ||
const select = (triggerDate, modifiers, e) => { | ||
let newDates = [...(selected ?? [])]; | ||
if (isSelected(triggerDate)) { | ||
if (dates?.length === min) { | ||
if (selected?.length === min) { | ||
// Min value reached, do nothing | ||
return; | ||
} | ||
if (required && dates?.length === 1) { | ||
if (required && selected?.length === 1) { | ||
// Required value already selected do nothing | ||
return; | ||
} | ||
newDates = dates?.filter((d) => !isSameDay(d, triggerDate)); | ||
newDates = selected?.filter((d) => !isSameDay(d, triggerDate)); | ||
} | ||
else { | ||
if (dates?.length === max) { | ||
if (selected?.length === max) { | ||
// Max value reached, reset the selection to date | ||
@@ -48,8 +44,8 @@ newDates = [triggerDate]; | ||
onSelect?.(newDates, triggerDate, modifiers, e); | ||
setDates(newDates); | ||
setSelected(newDates); | ||
return newDates; | ||
}; | ||
return { | ||
selected: dates, | ||
handleSelect: setSelected, | ||
selected, | ||
select, | ||
isSelected | ||
@@ -56,0 +52,0 @@ }; |
@@ -1,18 +0,2 @@ | ||
import React from "react"; | ||
import { DateLib, DateRange, DayPickerProps, Modifiers, PropsRange, PropsRangeRequired } from "../types/index.js"; | ||
export type UseRange<T> = { | ||
handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined; | ||
isSelected: (date: Date) => boolean; | ||
isRangeStart: (date: Date) => boolean; | ||
isRangeEnd: (date: Date) => boolean; | ||
isRangeMiddle: (date: Date) => boolean; | ||
} & (T extends { | ||
required: true; | ||
} ? { | ||
selected: DateRange; | ||
} : { | ||
selected: DateRange | undefined; | ||
}); | ||
export declare function useRange<T extends DayPickerProps>(props: T extends { | ||
mode: "range"; | ||
} ? PropsRange | PropsRangeRequired : object, dateLib: DateLib): UseRange<T>; | ||
import type { DateLib, DayPickerProps, Selection } from "../types/index.js"; | ||
export declare function useRange<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>; |
import React from "react"; | ||
import { addToRange, dateMatchModifiers } from "../utils/index.js"; | ||
import { isDateInRange } from "../utils/isDateInRange.js"; | ||
import { rangeIncludesDate } from "../utils/rangeIncludesDate.js"; | ||
export function useRange(props, dateLib) { | ||
const { mode, disabled, selected, required, onSelect } = props; | ||
const { mode, disabled, selected: initiallySelected, required, onSelect } = props; | ||
const { differenceInCalendarDays } = dateLib; | ||
const [range, setRange] = React.useState(mode === "range" ? selected : undefined); | ||
const [selected, setSelected] = React.useState(initiallySelected); | ||
// Update the selected date if the required flag is set. | ||
React.useEffect(() => { | ||
if (mode !== "range") | ||
return; | ||
if (required && range === undefined) { | ||
setRange({ from: undefined, to: undefined }); | ||
if (required && selected === undefined) { | ||
setSelected({ from: undefined, to: undefined }); | ||
} | ||
}, [required, range, mode]); | ||
// Update the selected date if the selected changes. | ||
React.useEffect(() => { | ||
if (mode !== "range") | ||
return; | ||
if (range === selected) | ||
return; | ||
setRange(selected); | ||
}, [mode, range, selected]); | ||
const isSelected = (date) => range && isDateInRange(date, range, dateLib); | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "range") | ||
return; | ||
}, [required, selected, mode]); | ||
const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib); | ||
const select = (triggerDate, modifiers, e) => { | ||
const newRange = triggerDate | ||
? addToRange(triggerDate, range, dateLib) | ||
? addToRange(triggerDate, selected, dateLib) | ||
: undefined; | ||
@@ -59,29 +47,12 @@ const { min, max } = props; | ||
} | ||
setRange(newRange); | ||
setSelected(newRange); | ||
onSelect?.(newRange, triggerDate, modifiers, e); | ||
return newRange; | ||
}; | ||
const isRangeStart = (date) => { | ||
return (range && range.from && range.to && dateLib.isSameDay(date, range.from)); | ||
}; | ||
const isRangeEnd = (date) => { | ||
return range && range.to && dateLib.isSameDay(date, range.to); | ||
}; | ||
const isRangeMiddle = (date) => { | ||
return (range && | ||
range.from && | ||
range.to && | ||
isSelected(date) && | ||
!isRangeStart(date) && | ||
!isRangeEnd(date)); | ||
}; | ||
return { | ||
selected: range, | ||
handleSelect: setSelected, | ||
isSelected, | ||
isRangeStart, | ||
isRangeEnd, | ||
isRangeMiddle | ||
selected, | ||
select, | ||
isSelected | ||
}; | ||
} | ||
//# sourceMappingURL=useRange.js.map |
@@ -1,15 +0,7 @@ | ||
import React from "react"; | ||
import type { DateLib, DayPickerProps, Modifiers, PropsSingle, PropsSingleRequired } from "../types/index.js"; | ||
export type UseSingle<T> = { | ||
handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
import type { DateLib, DayPickerProps, SelectHandler, SelectedValue, Selection } from "../types/index.js"; | ||
export type UseSingle<T extends DayPickerProps> = { | ||
select: SelectHandler<T>; | ||
isSelected: (date: Date) => boolean; | ||
} & (T extends { | ||
required: true; | ||
} ? { | ||
selected: Date; | ||
} : { | ||
selected: Date | undefined; | ||
}); | ||
export declare function useSingle<T extends DayPickerProps>(props: T extends { | ||
mode: "single"; | ||
} ? PropsSingle | PropsSingleRequired : object, dateLib: DateLib): UseSingle<T>; | ||
selected: SelectedValue<T>; | ||
}; | ||
export declare function useSingle<T extends DayPickerProps>(props: DayPickerProps, dateLib: DateLib): Selection<T>; |
import React from "react"; | ||
export function useSingle(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [date, setDate] = React.useState(mode !== "single" ? undefined : selected); | ||
const { selected: initiallySelected, required, onSelect, mode } = props; | ||
const [selected, setSelected] = React.useState(initiallySelected); | ||
const { isSameDay, Date, startOfDay } = dateLib; | ||
// Update the selected date if the required flag is set. | ||
React.useEffect(() => { | ||
if (mode !== "single") | ||
return; | ||
if (required && date === undefined) { | ||
setDate(startOfDay(new Date())); | ||
if (required && selected === undefined) { | ||
setSelected(startOfDay(new Date())); | ||
} | ||
}, [required, date, Date, startOfDay, mode]); | ||
}, [required, selected, Date, startOfDay, mode]); | ||
// Update the selected date if the `selected` value changes. | ||
React.useEffect(() => { | ||
if (mode !== "single") | ||
return; | ||
setDate(selected); | ||
}, [mode, selected]); | ||
setSelected(initiallySelected); | ||
}, [initiallySelected]); | ||
const isSelected = (compareDate) => { | ||
return date ? isSameDay(date, compareDate) : false; | ||
return selected ? isSameDay(selected, compareDate) : false; | ||
}; | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "single") | ||
return; | ||
const select = (triggerDate, modifiers, e) => { | ||
let newDate = triggerDate; | ||
if (!required && date && date && isSameDay(triggerDate, date)) { | ||
if (!required && selected && selected && isSameDay(triggerDate, selected)) { | ||
// If the date is the same, clear the selection. | ||
newDate = undefined; | ||
} | ||
setDate(newDate); | ||
setSelected(newDate); | ||
if (required) { | ||
@@ -41,4 +35,4 @@ onSelect?.(newDate, triggerDate, modifiers, e); | ||
return { | ||
selected: date, | ||
handleSelect: setSelected, | ||
selected, | ||
select, | ||
isSelected | ||
@@ -45,0 +39,0 @@ }; |
@@ -21,3 +21,3 @@ import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption.js"; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -34,3 +34,3 @@ export declare const Caption: typeof MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -42,3 +42,3 @@ export type HeadRow = any; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -112,3 +112,3 @@ export declare const Row: typeof Week; | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -115,0 +115,0 @@ export type useDayRender = any; |
@@ -9,3 +9,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -17,3 +17,3 @@ export const Caption = MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -20,0 +20,0 @@ export const Row = Week; |
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; | ||
export * from "./selection.js"; |
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; | ||
export * from "./selection.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -11,2 +11,3 @@ import React from "react"; | ||
mode?: undefined; | ||
required?: undefined; | ||
}); | ||
@@ -16,17 +17,16 @@ /** | ||
* handling. | ||
* | ||
* @group Props | ||
*/ | ||
export interface PropsBase { | ||
/** | ||
* The selection mode. Use this prop to enable the selection of multiple days | ||
* or a range of days. | ||
* Enable the selection of single day, multiple days or a range of days. | ||
* | ||
* - `single`: a single day | ||
* - `multiple`: multiple days | ||
* - `range`: a range of days | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
mode?: Mode | undefined; | ||
/** | ||
* Whether the selection is required. | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
mode?: Mode | undefined; | ||
required?: boolean | undefined; | ||
/** Class name to add to the root element */ | ||
@@ -40,3 +40,3 @@ className?: string; | ||
* | ||
* @see https://daypicker.dev/next/docs/styling | ||
* @see https://daypicker.dev/docs/styling | ||
*/ | ||
@@ -47,3 +47,3 @@ classNames?: Partial<ClassNames>; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -56,3 +56,3 @@ modifiersClassNames?: ModifiersClassNames; | ||
* | ||
* @see https://daypicker.dev/next/docs/styling | ||
* @see https://daypicker.dev/docs/styling | ||
*/ | ||
@@ -63,3 +63,3 @@ styles?: Partial<Styles>; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -76,3 +76,3 @@ modifiersStyles?: ModifiersStyles; | ||
* @defaultValue The current month | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -86,3 +86,3 @@ defaultMonth?: Date; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -94,3 +94,3 @@ month?: Date; | ||
* @defaultValue 1 | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -102,3 +102,3 @@ numberOfMonths?: number; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -110,3 +110,3 @@ startMonth?: Date | undefined; | ||
* instead. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -117,3 +117,3 @@ fromDate?: Date | undefined; | ||
* @deprecated This prop has been renamed to `startMonth`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -125,3 +125,3 @@ fromMonth?: Date | undefined; | ||
* 0)}`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -133,3 +133,3 @@ fromYear?: number | undefined; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -141,3 +141,3 @@ endMonth?: Date; | ||
* instead. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -148,3 +148,3 @@ toDate?: Date; | ||
* @deprecated This prop has been renamed to `endMonth`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -155,3 +155,3 @@ toMonth?: Date; | ||
* @deprecated Use `endMonth` instead. E.g. `endMonth={new Date(year, 0)}`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -162,3 +162,3 @@ toYear?: number; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -170,3 +170,3 @@ pagedNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -179,3 +179,3 @@ reverseMonths?: boolean; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#hidenavigation | ||
* @see https://daypicker.dev/docs/navigation#hidenavigation | ||
*/ | ||
@@ -187,3 +187,3 @@ hideNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation#disablenavigation | ||
* @see https://daypicker.dev/docs/navigation#disablenavigation | ||
*/ | ||
@@ -204,3 +204,3 @@ disableNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#caption-layouts | ||
* @see https://daypicker.dev/docs/customization#caption-layouts | ||
*/ | ||
@@ -212,3 +212,3 @@ captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years"; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#fixed-weeks | ||
* @see https://daypicker.dev/docs/customization#fixed-weeks | ||
*/ | ||
@@ -225,3 +225,3 @@ fixedWeeks?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#outside-days | ||
* @see https://daypicker.dev/docs/customization#outside-days | ||
*/ | ||
@@ -236,3 +236,3 @@ showOutsideDays?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#showweeknumber | ||
* @see https://daypicker.dev/docs/customization#showweeknumber | ||
*/ | ||
@@ -245,6 +245,6 @@ showWeekNumber?: boolean; | ||
* Use the | ||
* [react-day-picker/utc](https://daypicker.dev/next/docs/localization#utc-dates) | ||
* [react-day-picker/utc](https://daypicker.dev/docs/localization#utc-dates) | ||
* to set the calendar to UTC. | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#iso-week-dates | ||
* @see https://daypicker.dev/docs/localization#iso-week-dates | ||
* @see https://en.wikipedia.org/wiki/ISO_week_date | ||
@@ -256,3 +256,3 @@ */ | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -266,3 +266,3 @@ components?: Partial<CustomComponents>; | ||
* | ||
* @see https://daypicker.dev/next/docs/accessibility#footer | ||
* @see https://daypicker.dev/docs/accessibility#footer | ||
*/ | ||
@@ -277,3 +277,3 @@ footer?: React.ReactNode | string; | ||
* | ||
* @see https://daypicker.dev/next/docs/accessibility#autofocus | ||
* @see https://daypicker.dev/docs/accessibility#autofocus | ||
*/ | ||
@@ -284,3 +284,3 @@ autoFocus?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes#disabling-dates | ||
* @see https://daypicker.dev/docs/selection-modes#disabling-dates | ||
*/ | ||
@@ -292,3 +292,3 @@ disabled?: Matcher | Matcher[] | undefined; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers#hidden-modifier | ||
* @see https://daypicker.dev/guides/custom-modifiers#hidden-modifier | ||
*/ | ||
@@ -300,3 +300,3 @@ hidden?: Matcher | Matcher[] | undefined; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers#today-modifier | ||
* @see https://daypicker.dev/guides/custom-modifiers#today-modifier | ||
*/ | ||
@@ -307,3 +307,3 @@ today?: Date; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -315,3 +315,3 @@ modifiers?: Record<string, Matcher | Matcher[] | undefined> | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -323,3 +323,3 @@ labels?: Partial<Labels>; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -331,3 +331,3 @@ formatters?: Partial<Formatters>; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#rtl-text-direction | ||
* @see https://daypicker.dev/docs/translation#rtl-text-direction | ||
*/ | ||
@@ -348,3 +348,3 @@ dir?: HTMLDivElement["dir"]; | ||
* @defaultValue en-US | ||
* @see https://daypicker.dev/next/docs/localization | ||
* @see https://daypicker.dev/docs/localization | ||
*/ | ||
@@ -356,3 +356,3 @@ locale?: Locale | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#first-date-of-the-week | ||
* @see https://daypicker.dev/docs/localization#first-date-of-the-week | ||
*/ | ||
@@ -363,3 +363,3 @@ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#first-week-contains-date | ||
* @see https://daypicker.dev/docs/localization#first-week-contains-date | ||
*/ | ||
@@ -384,3 +384,3 @@ firstWeekContainsDate?: 1 | 4; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation#onmonthchange | ||
* @see https://daypicker.dev/docs/navigation#onmonthchange | ||
*/ | ||
@@ -391,3 +391,3 @@ onMonthChange?: MonthChangeEventHandler; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -398,3 +398,3 @@ onNextClick?: MonthChangeEventHandler; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -405,4 +405,5 @@ onPrevClick?: MonthChangeEventHandler; | ||
* | ||
* @private | ||
* @deprecated Use a custom `WeekNumber` component instead. | ||
* @see http://daypicker.dev/next/docs/customization#showweeknumber | ||
* @see https://daypicker.dev/docs/customization#showweeknumber | ||
*/ | ||
@@ -470,4 +471,3 @@ onWeekNumberClick?: any; | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#single-mode | ||
* @see https://daypicker.dev/docs/selection-modes#single-mode | ||
*/ | ||
@@ -483,4 +483,3 @@ export interface PropsSingleRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#single-mode | ||
* @see https://daypicker.dev/docs/selection-modes#single-mode | ||
*/ | ||
@@ -496,4 +495,3 @@ export interface PropsSingle { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#multiple-mode | ||
* @see https://daypicker.dev/docs/selection-modes#multiple-mode | ||
*/ | ||
@@ -511,4 +509,3 @@ export interface PropsMultiRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#multiple-mode | ||
* @see https://daypicker.dev/docs/selection-modes#multiple-mode | ||
*/ | ||
@@ -526,4 +523,3 @@ export interface PropsMulti { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#range-mode | ||
* @see https://daypicker.dev/docs/selection-modes#range-mode | ||
*/ | ||
@@ -541,4 +537,3 @@ export interface PropsRangeRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#range-mode | ||
* @see https://daypicker.dev/docs/selection-modes#range-mode | ||
*/ | ||
@@ -545,0 +540,0 @@ export interface PropsRange { |
@@ -14,3 +14,3 @@ import type { CSSProperties } from "react"; | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
@@ -21,3 +21,3 @@ export type Mode = "single" | "multiple" | "range"; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -70,2 +70,3 @@ export type CustomComponents = { | ||
}; | ||
/** @private */ | ||
export type DateLib = typeof dateLib; | ||
@@ -125,49 +126,50 @@ /** Represent a map of formatters used to render localized content. */ | ||
* | ||
* Matchers can be of different types: | ||
* @example | ||
* // will always match the day | ||
* const booleanMatcher: Matcher = true; | ||
* | ||
* ```tsx | ||
* // will always match the day | ||
* const booleanMatcher: Matcher = true; | ||
* // will match the today's date | ||
* const dateMatcher: Matcher = new Date(); | ||
* | ||
* // will match the today's date | ||
* const dateMatcher: Matcher = new Date(); | ||
* // will match the days in the array | ||
* const arrayMatcher: Matcher = [ | ||
* new Date(2019, 1, 2), | ||
* new Date(2019, 1, 4) | ||
* ]; | ||
* | ||
* // will match the days in the array | ||
* const arrayMatcher: Matcher = [ | ||
* new Date(2019, 1, 2), | ||
* new Date(2019, 1, 4) | ||
* ]; | ||
* // will match days after the 2nd of February 2019 | ||
* const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
* | ||
* // will match days after the 2nd of February 2019 | ||
* const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
* // will match days before the 2nd of February 2019 } | ||
* const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
* // will match days before the 2nd of February 2019 } | ||
* const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
* | ||
* // will match Sundays | ||
* const dayOfWeekMatcher: DayOfWeek = { | ||
* dayOfWeek: 0 | ||
* }; | ||
* // will match Sundays | ||
* const dayOfWeekMatcher: DayOfWeek = { | ||
* dayOfWeek: 0 | ||
* }; | ||
* | ||
* // will match the included days, except the two dates | ||
* const intervalMatcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
* // will match the included days, except the two dates | ||
* const intervalMatcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
* | ||
* // will match the included days, including the two dates | ||
* const rangeMatcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
* // will match the included days, including the two dates | ||
* const rangeMatcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
* | ||
* // will match when the function return true | ||
* const functionMatcher: Matcher = (day: Date) => { | ||
* return day.getMonth() === 2; // match when month is March | ||
* }; | ||
* ``` | ||
* // will match when the function return true | ||
* const functionMatcher: Matcher = (day: Date) => { | ||
* return day.getMonth() === 2; // match when month is March | ||
* }; | ||
*/ | ||
export type Matcher = boolean | ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek; | ||
/** | ||
* A matcher to match a day falling after the specified date, with the date not | ||
* included. | ||
* Match a day falling after the specified date, with the date not included. | ||
* | ||
* @example | ||
* // Match days after the 2nd of February 2019 | ||
* const matcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
*/ | ||
@@ -178,4 +180,7 @@ export type DateAfter = { | ||
/** | ||
* A matcher to match a day falling before the specified date, with the date not | ||
* included. | ||
* Match a day falling before the specified date, with the date not included. | ||
* | ||
* @example | ||
* // Match days before the 2nd of February 2019 | ||
* const matcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
*/ | ||
@@ -186,4 +191,11 @@ export type DateBefore = { | ||
/** | ||
* A matcher to match a day falling before and/or after two dates, where the | ||
* dates are not included. | ||
* An interval of dates. Differently from {@link DateRange}, the range ends here | ||
* are not included. | ||
* | ||
* @example | ||
* // Match the days between the 2nd and the 5th of February 2019 | ||
* const matcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
*/ | ||
@@ -195,4 +207,11 @@ export type DateInterval = { | ||
/** | ||
* A matcher to match a range of dates. The range can be open. Differently from | ||
* {@link DateInterval}, the dates here are included. | ||
* A range of dates. The range can be open. Differently from | ||
* {@link DateInterval}, the range ends here are included. | ||
* | ||
* @example | ||
* // Match the days between the 2nd and the 5th of February 2019 | ||
* const matcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
*/ | ||
@@ -204,49 +223,96 @@ export type DateRange = { | ||
/** | ||
* A matcher to match a date being one of the specified days of the week (`0-6`, | ||
* where `0` is Sunday). | ||
* Match dates being one of the specified days of the week (`0-6`, where `0` is | ||
* Sunday). | ||
* | ||
* @example | ||
* // Match Sundays | ||
* const matcher: DayOfWeek = { dayOfWeek: 0 }; | ||
* // Match weekends | ||
* const matcher: DayOfWeek = { dayOfWeek: [0, 6] }; | ||
*/ | ||
export type DayOfWeek = { | ||
dayOfWeek: number[]; | ||
dayOfWeek: number | number[]; | ||
}; | ||
/** A record with `data-*` attributes passed to `<DayPicker />`. */ | ||
export type DataAttributes = Record<`data-${string}`, unknown>; | ||
/** | ||
* The event handler triggered when interacting with a day. | ||
* The event handler triggered when clicking or interacting with a day. | ||
* | ||
* @template EventType - The event type that triggered the day event. | ||
* @template EventType - The event type that triggered the event (e.g. | ||
* `React.MouseEvent`, `React.KeyboardEvent`, etc.). | ||
* @param date - The date that has triggered the event. | ||
* @param modifiers - The modifiers belonging to the date. | ||
* @param e - The DOM event that triggered the event. | ||
*/ | ||
export type DayEventHandler<EventType> = ( | ||
/** The date that has triggered the event. */ | ||
date: Date, | ||
/** The modifiers belonging to the date. */ | ||
modifiers: Modifiers, | ||
/** The DOM event that triggered this event. */ | ||
e: EventType) => void; | ||
/** The event handler when a month is changed in the calendar. */ | ||
export type DayEventHandler<EventType> = (date: Date, modifiers: Modifiers, e: EventType) => void; | ||
/** | ||
* The event handler when a month is changed in the calendar. | ||
* | ||
* ```tsx | ||
* <DayPicker onMonthChange={(month) => console.log(month)} /> | ||
* ``` | ||
* | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
export type MonthChangeEventHandler = (month: Date) => void; | ||
/** Maps user interface elements, selection states, and flags to a CSS style. */ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** Defines the class names for various UI components and states. */ | ||
/** | ||
* The CSS classnames to use for the {@link UI} elements, the | ||
* {@link SelectionState} and the {@link DayFlag}. | ||
* | ||
* @example | ||
* const classNames: ClassNames = { | ||
* [UI.Root]: "root", | ||
* [UI.Outside]: "outside", | ||
* [UI.Nav]: "nav" | ||
* // etc. | ||
* }; | ||
*/ | ||
export type ClassNames = { | ||
[key in UI | SelectionState | DayFlag]: string; | ||
}; | ||
/** The flags that are matching a day in the calendar. */ | ||
export type DayFlags = Record<DayFlag, boolean>; | ||
/** The selection state that are matching a day in the calendar. */ | ||
export type SelectionStates = Record<SelectionState, boolean>; | ||
/** The modifiers that are matching a day in the calendar. */ | ||
export type Modifiers = DayFlags & SelectionStates & CustomModifiers; | ||
/** The custom modifiers matching a day, passed to the `modifiers` prop. */ | ||
export type CustomModifiers = Record<string, boolean>; | ||
/** The style to apply to each day element matching a modifier. */ | ||
export type ModifiersStyles = Record<string, CSSProperties> & Partial<Record<DayFlag, CSSProperties>>; | ||
/** The classnames to assign to each day element matching a modifier. */ | ||
export type ModifiersClassNames = Record<string, string> & Partial<Record<DayFlag & SelectionState, string>>; | ||
/** | ||
* The CSS styles to use for the {@link UI} elements, the {@link SelectionState} | ||
* and the {@link DayFlag}. | ||
*/ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** | ||
* The modifiers that are matching a day in the calendar. | ||
* | ||
* @example | ||
* const modifiers: Modifiers = { | ||
* today: false, // the day is not today | ||
* selected: true, // the day is selected | ||
* weekend: false // the day is not in the weekend | ||
* // etc | ||
* }; | ||
*/ | ||
export type Modifiers = Record<string, boolean>; | ||
/** | ||
* The style to apply to each day element matching a modifier. | ||
* | ||
* @example | ||
* const modifiersStyles: ModifiersStyles = { | ||
* today: { color: "red" }, | ||
* selected: { backgroundColor: "blue" }, | ||
* weekend: { color: "green" } | ||
* }; | ||
*/ | ||
export type ModifiersStyles = Record<string, CSSProperties>; | ||
/** | ||
* The classnames to assign to each day element matching a modifier. | ||
* | ||
* @example | ||
* const modifiersClassNames: ModifiersClassNames = { | ||
* today: "today", // Use the "today" class for the today's day | ||
* selected: "highlight", // Use the "highlight" class for the selected day | ||
* weekend: "weekend" // Use the "weekend" class for the weekend days | ||
* }; | ||
*/ | ||
export type ModifiersClassNames = Record<string, string>; | ||
/** | ||
* The props that have been deprecated since version 9.0.0. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/upgrading | ||
* @see https://daypicker.dev/upgrading | ||
*/ | ||
@@ -266,3 +332,5 @@ export type V9DeprecatedProps = | ||
| "toYear"; | ||
/** The direction to move the focus relative to the current focused date. */ | ||
export type MoveFocusDir = "after" | "before"; | ||
/** The temporal unit to move the focus by. */ | ||
export type MoveFocusBy = "day" | "week" | "startOfWeek" | "endOfWeek" | "month" | "year"; |
@@ -5,10 +5,7 @@ import type { CalendarWeek, CalendarDay, CalendarMonth } from "./classes/index.js"; | ||
/** | ||
* The hook to get and handle the calendar state. | ||
* Return the calendar object to work with the calendar in custom components. | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export interface UseCalendar { | ||
today: Date; | ||
/** All the unique dates displayed to the calendar. */ | ||
dates: Date[]; | ||
export interface Calendar { | ||
/** | ||
@@ -24,12 +21,2 @@ * All the days displayed in the calendar. As opposite from | ||
months: CalendarMonth[]; | ||
/** | ||
* The month displayed as first the calendar. When `numberOfMonths` is greater | ||
* than `1`, it is the first of the displayed months. | ||
*/ | ||
firstMonth: Date; | ||
/** | ||
* The month displayed as last the calendar. When `numberOfMonths` is greater | ||
* than `1`, it is the last of the displayed months. | ||
*/ | ||
lastMonth: Date; | ||
/** The next month to display. */ | ||
@@ -43,3 +30,3 @@ nextMonth: Date | undefined; | ||
*/ | ||
navigationStartMonth: Date | undefined; | ||
navStart: Date | undefined; | ||
/** | ||
@@ -49,11 +36,5 @@ * The month where the navigation ends. `undefined` if the calendar can be | ||
*/ | ||
navigationEndMonth: Date | undefined; | ||
/** Set the first month displayed in the calendar. */ | ||
setFirstMonth: (date: Date) => void; | ||
navEnd: Date | undefined; | ||
/** Navigate to the specified month. Will fire the `onMonthChange` callback. */ | ||
goToMonth: (month: Date) => void; | ||
/** Navigate to the next month. */ | ||
goToNextMonth: () => void; | ||
/** Navigate to the previous month. */ | ||
goToPreviousMonth: () => void; | ||
/** | ||
@@ -69,6 +50,4 @@ * Navigate to the specified date. If the second parameter (refDate) is | ||
goToDay: (day: CalendarDay) => void; | ||
/** Whether the given date is included in the displayed months. */ | ||
isDayDisplayed: (day: CalendarDay) => boolean; | ||
} | ||
/** @private */ | ||
export declare function useCalendar(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "ISOWeek">, dateLib: DateLib): UseCalendar; | ||
export declare function useCalendar(props: DayPickerProps, dateLib: DateLib): Calendar; |
@@ -13,4 +13,3 @@ import { getDates } from "./helpers/getDates.js"; | ||
export function useCalendar(props, dateLib) { | ||
const today = dateLib.startOfDay(props.today ?? new dateLib.Date()); | ||
const [navigationStartMonth, navigationEndMonth] = getNavMonths(props, dateLib); | ||
const [navStart, navEnd] = getNavMonths(props, dateLib); | ||
const { startOfMonth } = dateLib; | ||
@@ -20,25 +19,17 @@ const initialDisplayMonth = getInitialMonth(props, dateLib); | ||
const [firstMonth, setFirstMonth] = useControlledValue(initialDisplayMonth, props.month ? startOfMonth(props.month) : undefined); | ||
/** An array of the months displayed in the calendar. */ | ||
const displayMonths = getDisplayMonths(firstMonth, navigationEndMonth, props, dateLib); | ||
/** The last month displayed in the calendar. */ | ||
const lastMonth = displayMonths[displayMonths.length - 1]; | ||
/** An array of the dates displayed in the calendar. */ | ||
/** The months displayed in the calendar. */ | ||
const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib); | ||
/** The dates displayed in the calendar. */ | ||
const dates = getDates(displayMonths, props.endMonth, props, dateLib); | ||
/** An array of the Months displayed in the calendar. */ | ||
/** The Months displayed in the calendar. */ | ||
const months = getMonths(displayMonths, dates, props, dateLib); | ||
/** An array of the Weeks displayed in the calendar. */ | ||
/** The Weeks displayed in the calendar. */ | ||
const weeks = getWeeks(months); | ||
/** An array of the Days displayed in the calendar. */ | ||
/** The Days displayed in the calendar. */ | ||
const days = getDays(months); | ||
const previousMonth = getPreviousMonth(firstMonth, navigationStartMonth, props, dateLib); | ||
const nextMonth = getNextMonth(firstMonth, navigationEndMonth, props, dateLib); | ||
const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib); | ||
const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib); | ||
const { disableNavigation, onMonthChange } = props; | ||
function isDayDisplayed(day) { | ||
return weeks.some((week) => { | ||
return week.days.some((d) => { | ||
return d.isEqualTo(day); | ||
}); | ||
}); | ||
} | ||
function goToMonth(date) { | ||
const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day))); | ||
const goToMonth = (date) => { | ||
if (disableNavigation) { | ||
@@ -49,42 +40,29 @@ return; | ||
// if month is before start, use the first month instead | ||
if (navigationStartMonth && newMonth < startOfMonth(navigationStartMonth)) { | ||
newMonth = startOfMonth(navigationStartMonth); | ||
if (navStart && newMonth < startOfMonth(navStart)) { | ||
newMonth = startOfMonth(navStart); | ||
} | ||
// if month is after endMonth, use the last month instead | ||
if (navigationEndMonth && newMonth > startOfMonth(navigationEndMonth)) { | ||
newMonth = startOfMonth(navigationEndMonth); | ||
if (navEnd && newMonth > startOfMonth(navEnd)) { | ||
newMonth = startOfMonth(navEnd); | ||
} | ||
setFirstMonth(newMonth); | ||
onMonthChange?.(newMonth); | ||
} | ||
function goToDay(day) { | ||
if (isDayDisplayed(day)) { | ||
}; | ||
const goToDay = (day) => { | ||
// is this check necessary? | ||
if (isDayInCalendar(day)) { | ||
return; | ||
} | ||
goToMonth(day.date); | ||
} | ||
function goToNextMonth() { | ||
return nextMonth ? goToMonth(nextMonth) : undefined; | ||
} | ||
function goToPreviousMonth() { | ||
return previousMonth ? goToMonth(previousMonth) : undefined; | ||
} | ||
}; | ||
const calendar = { | ||
dates, | ||
months, | ||
weeks, | ||
days, | ||
today, | ||
navigationStartMonth: navigationStartMonth, | ||
navigationEndMonth: navigationEndMonth, | ||
firstMonth: firstMonth, | ||
lastMonth, | ||
navStart, | ||
navEnd, | ||
previousMonth, | ||
nextMonth, | ||
setFirstMonth, | ||
isDayDisplayed, | ||
goToMonth, | ||
goToDay, | ||
goToNextMonth, | ||
goToPreviousMonth | ||
goToDay | ||
}; | ||
@@ -91,0 +69,0 @@ return calendar; |
@@ -0,13 +1,31 @@ | ||
import { CalendarDay } from "./classes/CalendarDay.js"; | ||
import { CalendarMonth } from "./classes/CalendarMonth.js"; | ||
import type { DayPickerProps } from "./types/props.js"; | ||
import type { UseCalendar } from "./useCalendar.js"; | ||
import type { UseModifiers } from "./useModifiers.js"; | ||
import type { UseMulti, UseRange, UseSelection, UseSingle } from "./useSelection.js"; | ||
export type { UseCalendar, UseModifiers, UseSelection, UseMulti, UseRange, UseSingle }; | ||
export declare const dayPickerContext: import("react").Context<(UseCalendar & UseModifiers & UseSelection<DayPickerProps>) | undefined>; | ||
import type { SelectedValue, SelectHandler } from "./types/selection.js"; | ||
import { Modifiers } from "./types/shared.js"; | ||
export declare const dayPickerContext: import("react").Context<DayPickerContext<DayPickerProps> | undefined>; | ||
export type DayPickerContext<T extends DayPickerProps> = { | ||
/** The months displayed in the calendar. */ | ||
months: CalendarMonth[]; | ||
/** The next month to display. */ | ||
nextMonth: Date | undefined; | ||
/** The previous month to display. */ | ||
previousMonth: Date | undefined; | ||
/** Navigate to the specified month. Will fire the `onMonthChange` callback. */ | ||
goToMonth: (month: Date) => void; | ||
/** Returns the modifiers for the given day. */ | ||
getModifiers: (day: CalendarDay) => Modifiers; | ||
/** The selected date(s). */ | ||
selected: SelectedValue<T> | undefined; | ||
/** Set a selection. */ | ||
select: SelectHandler<T> | undefined; | ||
/** Whether the given date is selected. */ | ||
isSelected: ((date: Date) => boolean) | undefined; | ||
}; | ||
/** | ||
* Return API to work with `<DayPicker />` inside custom components. | ||
* Return the context to work with `<DayPicker />` inside custom components. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export declare function useDayPicker<T extends DayPickerProps>(props?: T): UseCalendar & UseModifiers & UseSelection<T>; | ||
export declare function useDayPicker<T extends DayPickerProps>(props?: T): DayPickerContext<T>; |
@@ -5,6 +5,6 @@ import { createContext, useContext } from "react"; | ||
/** | ||
* Return API to work with `<DayPicker />` inside custom components. | ||
* Return the context to work with `<DayPicker />` inside custom components. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -11,0 +11,0 @@ export function useDayPicker(props) { |
import type { CalendarDay } from "./classes/index.js"; | ||
import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
import { UseCalendar } from "./useCalendar.js"; | ||
import { UseModifiers } from "./useModifiers.js"; | ||
import { UseSelection } from "./useSelection.js"; | ||
import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Modifiers } from "./types/index.js"; | ||
import { Calendar } from "./useCalendar.js"; | ||
export type UseFocus = { | ||
@@ -13,11 +11,8 @@ /** The date that is currently focused. */ | ||
setFocused: (day: CalendarDay | undefined) => void; | ||
/** Set the last focused day. */ | ||
setLastFocused: (day: CalendarDay | undefined) => void; | ||
/** Blur the focused day. */ | ||
blur: () => void; | ||
/** Move the current focus to the next day according to the given direction. */ | ||
moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void; | ||
}; | ||
/** @private */ | ||
export declare function useFocus(props: Pick<DayPickerProps, "autoFocus" | "disabled" | "hidden" | "modifiers" | "numberOfMonths" | "locale" | "ISOWeek" | "weekStartsOn">, calendar: UseCalendar, modifiers: UseModifiers, selection: UseSelection<{ | ||
mode: Mode; | ||
}>, dateLib: DateLib): UseFocus; | ||
export declare function useFocus<T extends DayPickerProps>(props: T, calendar: Calendar, getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, dateLib: DateLib): UseFocus; |
@@ -5,7 +5,6 @@ import { useState } from "react"; | ||
/** @private */ | ||
export function useFocus(props, calendar, modifiers, selection, dateLib) { | ||
const { getModifiers } = modifiers; | ||
export function useFocus(props, calendar, getModifiers, isSelected, dateLib) { | ||
const { autoFocus } = props; | ||
const [lastFocused, setLastFocused] = useState(); | ||
const focusTarget = calculateFocusTarget(calendar, getModifiers, selection.isSelected, lastFocused); | ||
const focusTarget = calculateFocusTarget(calendar.days, getModifiers, isSelected || (() => false), lastFocused); | ||
const [focusedDay, setFocused] = useState(autoFocus ? focusTarget : undefined); | ||
@@ -19,3 +18,3 @@ const blur = () => { | ||
return; | ||
const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navigationStartMonth, calendar.navigationEndMonth, props, dateLib); | ||
const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib); | ||
if (!nextFocus) | ||
@@ -33,3 +32,2 @@ return; | ||
focused: focusedDay, | ||
setLastFocused, | ||
blur, | ||
@@ -36,0 +34,0 @@ moveFocus |
@@ -1,17 +0,3 @@ | ||
import { type UseMulti } from "./selection/useMulti.js"; | ||
import { type UseRange } from "./selection/useRange.js"; | ||
import { type UseSingle } from "./selection/useSingle.js"; | ||
import type { DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
export type { UseMulti, UseRange, UseSingle }; | ||
export declare function useSelection<T extends DayPickerProps>(props: T, dateLib?: DateLib): UseSelection<T>; | ||
export type UseSelection<T> = T extends { | ||
mode: Mode; | ||
} ? { | ||
single: UseSingle<T>; | ||
multiple: UseMulti<T>; | ||
range: UseRange<T>; | ||
}[T["mode"]] : { | ||
handleSelect: () => undefined; | ||
isSelected: () => false; | ||
selected: undefined; | ||
}; | ||
import type { DateLib, DayPickerProps } from "./types/index.js"; | ||
import { Selection } from "./types/selection.js"; | ||
export declare function useSelection<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T> | undefined; |
@@ -1,2 +0,1 @@ | ||
import { dateLib as defaultDateLib } from "./lib/dateLib.js"; | ||
import { useMulti } from "./selection/useMulti.js"; | ||
@@ -6,25 +5,16 @@ import { useRange } from "./selection/useRange.js"; | ||
export function useSelection(props, dateLib) { | ||
const lib = { ...defaultDateLib, ...dateLib }; | ||
const single = useSingle(props, lib); | ||
const multi = useMulti(props, lib); | ||
const range = useRange(props, lib); | ||
const single = useSingle(props, dateLib); | ||
const multi = useMulti(props, dateLib); | ||
const range = useRange(props, dateLib); | ||
switch (props.mode) { | ||
case "single": | ||
// @ts-expect-error The type of `single` is `UseSingle<T>`. | ||
return single; | ||
case "multiple": | ||
// @ts-expect-error The type of `multi` is `UseMulti<T>`. | ||
return multi; | ||
case "range": | ||
// @ts-expect-error The type of `range` is `UseRange<T>`. | ||
return range; | ||
default: | ||
// @ts-expect-error The type of the return value correct | ||
return { | ||
handleSelect: () => undefined, | ||
isSelected: () => false, | ||
selected: undefined | ||
}; | ||
return undefined; | ||
} | ||
} | ||
//# sourceMappingURL=useSelection.js.map |
import type { DateLib, Matcher } from "../types/index.js"; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[]; | ||
/** | ||
@@ -5,0 +3,0 @@ * Returns whether a day matches against at least one of the given |
@@ -1,7 +0,3 @@ | ||
import { isDateInRange } from "./isDateInRange.js"; | ||
import { isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType } from "./typeguards.js"; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export function isDatesArray(value, dateLib) { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
import { rangeIncludesDate } from "./rangeIncludesDate.js"; | ||
import { isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDatesArray, isDayOfWeekType } from "./typeguards.js"; | ||
/** | ||
@@ -40,5 +36,8 @@ * Returns whether a day matches against at least one of the given | ||
if (isDateRange(matcher)) { | ||
return isDateInRange(date, matcher, dateLib); | ||
return rangeIncludesDate(matcher, date, false, dateLib); | ||
} | ||
if (isDayOfWeekType(matcher)) { | ||
if (!Array.isArray(matcher.dayOfWeek)) { | ||
return matcher.dayOfWeek === date.getDay(); | ||
} | ||
return matcher.dayOfWeek.includes(date.getDay()); | ||
@@ -45,0 +44,0 @@ } |
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./rangeIncludesDate.js"; | ||
export * from "./typeguards.js"; |
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./rangeIncludesDate.js"; | ||
export * from "./typeguards.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -1,4 +0,4 @@ | ||
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types/index.js"; | ||
import type { DateAfter, DateBefore, DateInterval, DateLib, DateRange, DayOfWeek } from "../types/index.js"; | ||
/** | ||
* Returns true if `matcher` is of type `DateInterval`. | ||
* Returns true if `matcher` is of type {@link DateInterval}. | ||
* | ||
@@ -9,3 +9,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is a `DateRange` type. | ||
* Returns true if `value` is a {@link DateRange} type. | ||
* | ||
@@ -16,3 +16,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateAfter`. | ||
* Returns true if `value` is of type {@link DateAfter}. | ||
* | ||
@@ -23,3 +23,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateBefore`. | ||
* Returns true if `value` is of type {@link DateBefore}. | ||
* | ||
@@ -30,39 +30,8 @@ * @group Utilities | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
* Returns true if `value` is a {@link DayOfWeek} type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isSingle(props: DayPickerProps): props is DayPickerProps & PropsSingle; | ||
/** | ||
* @deprecated This function has been renamed Use `isSingle` instead. | ||
* @protected | ||
*/ | ||
export declare const isDayPickerSingle: typeof isSingle; | ||
/** | ||
* Returns true if the props are for a multiple selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isMulti(props: DayPickerProps): props is DayPickerProps & PropsMulti; | ||
/** | ||
* @deprecated This function has been renamed Use `isMulti` instead. | ||
* @protected | ||
*/ | ||
export declare const isDayPickerMultiple: typeof isMulti; | ||
/** | ||
* Returns true if the props are for a range selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isRange(props: DayPickerProps): props is DayPickerProps & PropsRange; | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isDayOfWeekType(value: unknown): value is DayOfWeek; | ||
/** | ||
* @deprecated This function has been renamed Use `isRange` instead. | ||
* @protected | ||
*/ | ||
export declare const isDayPickerRange: typeof isRange; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[]; |
/** | ||
* Returns true if `matcher` is of type `DateInterval`. | ||
* Returns true if `matcher` is of type {@link DateInterval}. | ||
* | ||
@@ -13,3 +13,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is a `DateRange` type. | ||
* Returns true if `value` is a {@link DateRange} type. | ||
* | ||
@@ -22,3 +22,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateAfter`. | ||
* Returns true if `value` is of type {@link DateAfter}. | ||
* | ||
@@ -31,3 +31,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateBefore`. | ||
* Returns true if `value` is of type {@link DateBefore}. | ||
* | ||
@@ -40,48 +40,13 @@ * @group Utilities | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
* Returns true if `value` is a {@link DayOfWeek} type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isSingle(props) { | ||
return props.mode === "single"; | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isSingle` instead. | ||
* @protected | ||
*/ | ||
export const isDayPickerSingle = isSingle; | ||
/** | ||
* Returns true if the props are for a multiple selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isMulti(props) { | ||
return props.mode === "multiple"; | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isMulti` instead. | ||
* @protected | ||
*/ | ||
export const isDayPickerMultiple = isMulti; | ||
/** | ||
* Returns true if the props are for a range selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isRange(props) { | ||
return props.mode === "range"; | ||
} | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isDayOfWeekType(value) { | ||
return Boolean(value && typeof value === "object" && "dayOfWeek" in value); | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isRange` instead. | ||
* @protected | ||
*/ | ||
export const isDayPickerRange = isRange; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export function isDatesArray(value, dateLib) { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
//# sourceMappingURL=typeguards.js.map |
{ | ||
"name": "react-day-picker", | ||
"version": "9.0.0-rc.6", | ||
"version": "9.0.0", | ||
"description": "Customizable Date Picker for React", | ||
"author": "Giampaolo Bellavite <io@gpbl.dev>", | ||
"homepage": "http://daypicker.dev", | ||
"homepage": "https://daypicker.dev", | ||
"license": "MIT", | ||
@@ -8,0 +8,0 @@ "repository": { |
@@ -5,15 +5,15 @@ # React DayPicker | ||
📖 See **[daypicker.dev](http://daypicker.dev)** for guides, examples and API reference. | ||
📖 See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference. | ||
## Features | ||
- 🛠 An extensive set of props for configuring and customizing the calendar. | ||
- 🎨 A minimal design that can be easily styled with CSS or any CSS framework. | ||
- 📅 Supports selections of single day, multiple days, ranges of days, or custom selections. | ||
- 🌍 Can be localized into any language. | ||
- 📆 Supports for ISO 8601 dates, UTC dates, and Jalali Calendar. | ||
- ♿ Complies with WCAG 2.1 AA requirements for accessibility. | ||
- ⚙️ Customizable internal components for complex use cases. | ||
- 🛠 An extensive set of props for [customizing](./docs/customization.mdx) the calendar. | ||
- 🎨 Minimal design that can be [easily styled](./docs/styling.mdx) with CSS or any CSS framework. | ||
- 📅 Supports [selections](./docs/selection-modes.mdx) of single day, multiple days, ranges of days, or [custom selections](./guides/custom-selections.mdx). | ||
- 🌍 Can be [localized](./docs/localization.mdx) into any language, supports [ISO 8601 dates](./docs/localization.mdx#iso-week-dates), [UTC dates](./docs/localization.mdx#utc-dates), and [Jalali calendar](./docs/localization.mdx#jalali-calendar). | ||
- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./docs/accessibility.mdx). | ||
- ⚙️ [Customizable components](./guides/custom-components.mdx) for more complex use cases. | ||
- 🔤 Easy integration [with input fields](./guides/input-fields.mdx). | ||
DayPicker is written in TypeScript and compiled to CommonJS and ESM. | ||
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on [date-fns](https://date-fns.org) for date manipulation and formatting. | ||
@@ -27,17 +27,30 @@ ## Installation | ||
<a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a> | ||
<a href="https://www.npmjs.com/package/react-day-picker/next"><img src="https://img.shields.io/npm/v/react-day-picker/next" alt="npm version"/></a> | ||
<img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/> | ||
## Usage | ||
## Example | ||
```tsx | ||
import { DayPicker } from "react-day-picker"; | ||
import "react-day-picker/dist/style.css"; | ||
import "react-day-picker/style.css"; | ||
function MyDatePicker() { | ||
const [selected, setSelected] = useState<Date | undefined>(); | ||
return <DayPicker mode="single" selected={selected} onSelect={setSelected} />; | ||
const [selected, setSelected] = useState<Date>(); | ||
return ( | ||
<DayPicker | ||
mode="single" | ||
selected={selected} | ||
onSelect={setSelected} | ||
footer={ | ||
selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day." | ||
} | ||
/> | ||
); | ||
} | ||
``` | ||
## Compatibility | ||
DayPicker is compatible with React 16.8 and later. | ||
## License | ||
@@ -51,4 +64,4 @@ | ||
- [Discuss the project on GitHub](https://github.com/gpbl/react-day-picker/discussions) | ||
- [Report an issue on GitHub](https://github.com/gpbl/react-day-picker/issues/new/choose) | ||
- 💬 [Discussion forums](https://github.com/gpbl/react-day-picker/discussions) - get support and provide feedback. | ||
- 🪳 [Report an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) - report a bug or a feature request. | ||
@@ -59,2 +72,2 @@ ## Funding | ||
- [Sponsor DayPicker on GitHub](https://github.com/sponsors/gpbl) | ||
- 🎗️ [Sponsor DayPicker on GitHub](https://github.com/sponsors/gpbl) |
@@ -24,6 +24,2 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
this.dateLib = dateLib; | ||
const { format } = dateLib; | ||
this.uid = | ||
format(date, "yyyyMMdd") + | ||
(this.outside ? `-` + format(displayMonth, "yyyyMMdd") : ""); | ||
} | ||
@@ -58,5 +54,2 @@ | ||
/** A unique identifier for the day. */ | ||
readonly uid: string; | ||
/** | ||
@@ -63,0 +56,0 @@ * Check if the day is the same as the given day: considering if it is in the |
@@ -9,3 +9,3 @@ import { FormatOptions, dateLib as defaultDateLib } from "../lib/index.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -12,0 +12,0 @@ export function formatCaption( |
@@ -10,3 +10,3 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -13,0 +13,0 @@ export function formatDay( |
@@ -7,5 +7,5 @@ import type { DateFnsMonth } from "../lib/dateLib.js"; | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @defaultValue The localized month name | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -18,6 +18,3 @@ export function formatMonthDropdown( | ||
): string { | ||
return ( | ||
locale.localize?.month(monthNumber as DateFnsMonth) ?? | ||
monthNumber.toString() | ||
); | ||
return locale.localize?.month(monthNumber as DateFnsMonth); | ||
} |
@@ -10,3 +10,3 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -13,0 +13,0 @@ export function formatWeekdayName( |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export function formatWeekNumber(weekNumber: number) { |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export function formatWeekNumberHeader() { |
@@ -6,3 +6,3 @@ /** | ||
* @group Formatters | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -9,0 +9,0 @@ export function formatYearDropdown(year: number): string { |
import { DayFlag } from "../UI.js"; | ||
import type { CalendarDay } from "../classes/index.js"; | ||
import type { Modifiers } from "../types/index.js"; | ||
import { UseCalendar } from "../useCalendar.js"; | ||
export function calculateFocusTarget( | ||
calendar: UseCalendar, | ||
days: CalendarDay[], | ||
getModifiers: (day: CalendarDay) => Modifiers, | ||
@@ -17,8 +16,12 @@ isSelected: (date: Date) => boolean, | ||
while (index < calendar.days.length && !found) { | ||
const day = calendar.days[index]; | ||
const m = getModifiers(day); | ||
while (index < days.length && !found) { | ||
const day = days[index]; | ||
const modifiers = getModifiers(day); | ||
if (!m[DayFlag.disabled] && !m[DayFlag.hidden] && !m[DayFlag.outside]) { | ||
if (m[DayFlag.focused]) { | ||
if ( | ||
!modifiers[DayFlag.disabled] && | ||
!modifiers[DayFlag.hidden] && | ||
!modifiers[DayFlag.outside] | ||
) { | ||
if (modifiers[DayFlag.focused]) { | ||
focusTarget = day; | ||
@@ -32,3 +35,3 @@ found = true; | ||
found = true; | ||
} else if (m[DayFlag.today]) { | ||
} else if (modifiers[DayFlag.today]) { | ||
focusTarget = day; | ||
@@ -44,3 +47,3 @@ found = true; | ||
// return the first day that is focusable | ||
focusTarget = calendar.days.find((day) => { | ||
focusTarget = days.find((day) => { | ||
const m = getModifiers(day); | ||
@@ -47,0 +50,0 @@ return !m[DayFlag.disabled] && !m[DayFlag.hidden] && !m[DayFlag.outside]; |
@@ -1,2 +0,2 @@ | ||
import { DayFlag, SelectionState } from "../UI.js"; | ||
import { DayFlag, SelectionState, UI } from "../UI.js"; | ||
import type { ModifiersClassNames, ClassNames } from "../types/index.js"; | ||
@@ -11,14 +11,17 @@ | ||
.filter(([, active]) => active === true) | ||
.reduce((previousValue, [key]) => { | ||
if (modifiersClassNames[key]) { | ||
previousValue.push(modifiersClassNames[key as string]); | ||
} else if (classNames[DayFlag[key as DayFlag]]) { | ||
previousValue.push(classNames[DayFlag[key as DayFlag]]); | ||
} else if (classNames[SelectionState[key as SelectionState]]) { | ||
previousValue.push(classNames[SelectionState[key as SelectionState]]); | ||
} | ||
return previousValue; | ||
}, [] as string[]); | ||
.reduce( | ||
(previousValue, [key]) => { | ||
if (modifiersClassNames[key]) { | ||
previousValue.push(modifiersClassNames[key as string]); | ||
} else if (classNames[DayFlag[key as DayFlag]]) { | ||
previousValue.push(classNames[DayFlag[key as DayFlag]]); | ||
} else if (classNames[SelectionState[key as SelectionState]]) { | ||
previousValue.push(classNames[SelectionState[key as SelectionState]]); | ||
} | ||
return previousValue; | ||
}, | ||
[classNames[UI.Day]] as string[] | ||
); | ||
return modifierClassNames; | ||
} |
@@ -6,3 +6,3 @@ import * as components from "../components/custom-components.js"; | ||
customComponents: DayPickerProps["components"] | ||
): Required<CustomComponents> { | ||
): CustomComponents { | ||
return { | ||
@@ -9,0 +9,0 @@ ...components, |
@@ -9,3 +9,3 @@ import { UI, DayFlag, SelectionState } from "../UI.js"; | ||
*/ | ||
export function getDefaultClassNames(): Required<ClassNames> { | ||
export function getDefaultClassNames(): ClassNames { | ||
const classNames: Partial<Required<ClassNames>> = {}; | ||
@@ -12,0 +12,0 @@ |
@@ -11,3 +11,3 @@ import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js"; | ||
/** Options from the props context. */ | ||
options: Pick< | ||
props: Pick< | ||
DayPickerProps, | ||
@@ -35,14 +35,14 @@ | "fixedWeeks" | ||
(months, month) => { | ||
const firstDateOfFirstWeek = options.ISOWeek | ||
const firstDateOfFirstWeek = props.ISOWeek | ||
? startOfISOWeek(month) | ||
: startOfWeek(month, { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
}); | ||
const lastDateOfLastWeek = options.ISOWeek | ||
const lastDateOfLastWeek = props.ISOWeek | ||
? endOfISOWeek(endOfMonth(month)) | ||
: endOfWeek(endOfMonth(month), { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
}); | ||
@@ -55,3 +55,3 @@ | ||
if (options.fixedWeeks && monthDates.length < 42) { | ||
if (props.fixedWeeks && monthDates.length < 42) { | ||
const extraDates = dates.filter((date) => { | ||
@@ -67,8 +67,8 @@ return ( | ||
(weeks, date) => { | ||
const weekNumber = options.ISOWeek | ||
const weekNumber = props.ISOWeek | ||
? getISOWeek(date) | ||
: getWeek(date, { | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn, | ||
firstWeekContainsDate: options.firstWeekContainsDate | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate | ||
}); | ||
@@ -96,3 +96,3 @@ const week = weeks.find((week) => week.weekNumber === weekNumber); | ||
if (!options.reverseMonths) { | ||
if (!props.reverseMonths) { | ||
return dayPickerMonths; | ||
@@ -99,0 +99,0 @@ } else { |
@@ -7,14 +7,14 @@ import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
DayPickerProps, | ||
| "captionLayout" | ||
| "endMonth" | ||
| "startMonth" | ||
| "endMonth" | ||
| "today" | ||
| "captionLayout" | ||
// Deprecated: | ||
| "fromMonth" | ||
| "fromYear" | ||
| "toMonth" | ||
| "toYear" | ||
| "fromMonth" | ||
| "toMonth" | ||
>, | ||
dateLib: DateLib | ||
): [navStartMonth: Date | undefined, navEndMonth: Date | undefined] { | ||
): [start: Date | undefined, end: Date | undefined] { | ||
let { startMonth, endMonth } = props; | ||
@@ -21,0 +21,0 @@ |
@@ -34,3 +34,3 @@ import type { CSSProperties } from "react"; | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles); | ||
@@ -50,3 +50,3 @@ expect(style).toEqual(expectedStyle); | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles); | ||
@@ -71,3 +71,3 @@ expect(style).toEqual({ opacity: 0.5 }); // should not have applied the disabled style | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles); | ||
@@ -92,5 +92,5 @@ expect(style).toEqual(expectedStyle); | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles); | ||
expect(style).toEqual(expectedStyle); | ||
}); |
import type { CSSProperties } from "react"; | ||
import type { Modifiers, ModifiersStyles } from "../types/index.js"; | ||
import { UI } from "../UI.js"; | ||
import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js"; | ||
export function getStyleForModifiers( | ||
dayModifiers: Modifiers, | ||
styles: Partial<Styles> = {}, | ||
modifiersStyles: Partial<ModifiersStyles> = {} | ||
): CSSProperties { | ||
let style: CSSProperties = {}; | ||
) { | ||
let style: CSSProperties = { ...styles?.[UI.Day] }; | ||
Object.entries(dayModifiers) | ||
@@ -11,0 +13,0 @@ .filter(([, active]) => active === true) |
@@ -13,3 +13,3 @@ import type { DateLib, LabelOptions } from "../index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -16,0 +16,0 @@ export function labelDayButton( |
@@ -11,3 +11,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -14,0 +14,0 @@ export function labelGrid( |
@@ -10,3 +10,3 @@ import type { DateLib } from "../index.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -13,0 +13,0 @@ export function labelGridcell( |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export function labelMonthDropdown(options?: LabelOptions) { |
@@ -6,3 +6,3 @@ /** | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -9,0 +9,0 @@ export function labelNav(): string { |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export function labelNext( |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export function labelPrevious( |
@@ -10,3 +10,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -13,0 +13,0 @@ export function labelWeekday( |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export function labelWeekNumber( |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export function labelWeekNumberHeader(options?: LabelOptions): string { |
@@ -8,3 +8,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* @group Labels | ||
* @see http://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -11,0 +11,0 @@ export function labelYearDropdown(options?: LabelOptions) { |
@@ -34,3 +34,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -49,3 +49,3 @@ export const Caption = MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -58,3 +58,3 @@ export type HeadRow = any; | ||
* @group Components | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -141,3 +141,3 @@ export const Row = Week; | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -144,0 +144,0 @@ export type useDayRender = any; |
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; | ||
export * from "./selection.js"; |
@@ -35,3 +35,3 @@ import React from "react"; | ||
| PropsRangeRequired | ||
| { mode?: undefined } | ||
| { mode?: undefined; required?: undefined } | ||
); | ||
@@ -42,17 +42,16 @@ | ||
* handling. | ||
* | ||
* @group Props | ||
*/ | ||
export interface PropsBase { | ||
/** | ||
* The selection mode. Use this prop to enable the selection of multiple days | ||
* or a range of days. | ||
* Enable the selection of single day, multiple days or a range of days. | ||
* | ||
* - `single`: a single day | ||
* - `multiple`: multiple days | ||
* - `range`: a range of days | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
mode?: Mode | undefined; | ||
/** | ||
* Whether the selection is required. | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
mode?: Mode | undefined; | ||
required?: boolean | undefined; | ||
@@ -67,3 +66,3 @@ /** Class name to add to the root element */ | ||
* | ||
* @see https://daypicker.dev/next/docs/styling | ||
* @see https://daypicker.dev/docs/styling | ||
*/ | ||
@@ -74,3 +73,3 @@ classNames?: Partial<ClassNames>; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -83,3 +82,3 @@ modifiersClassNames?: ModifiersClassNames; | ||
* | ||
* @see https://daypicker.dev/next/docs/styling | ||
* @see https://daypicker.dev/docs/styling | ||
*/ | ||
@@ -90,3 +89,3 @@ styles?: Partial<Styles>; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -103,3 +102,3 @@ modifiersStyles?: ModifiersStyles; | ||
* @defaultValue The current month | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -113,3 +112,3 @@ defaultMonth?: Date; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -121,3 +120,3 @@ month?: Date; | ||
* @defaultValue 1 | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -129,3 +128,3 @@ numberOfMonths?: number; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -137,3 +136,3 @@ startMonth?: Date | undefined; | ||
* instead. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -144,3 +143,3 @@ fromDate?: Date | undefined; | ||
* @deprecated This prop has been renamed to `startMonth`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -152,3 +151,3 @@ fromMonth?: Date | undefined; | ||
* 0)}`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -161,3 +160,3 @@ fromYear?: number | undefined; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -169,3 +168,3 @@ endMonth?: Date; | ||
* instead. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -176,3 +175,3 @@ toDate?: Date; | ||
* @deprecated This prop has been renamed to `endMonth`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -183,3 +182,3 @@ toMonth?: Date; | ||
* @deprecated Use `endMonth` instead. E.g. `endMonth={new Date(year, 0)}`. | ||
* @see https://daypicker.dev/next/docs/navigation#start-and-end-dates | ||
* @see https://daypicker.dev/docs/navigation#start-and-end-dates | ||
*/ | ||
@@ -191,3 +190,3 @@ toYear?: number; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -199,3 +198,3 @@ pagedNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#multiplemonths | ||
* @see https://daypicker.dev/docs/customization#multiplemonths | ||
*/ | ||
@@ -208,3 +207,3 @@ reverseMonths?: boolean; | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/docs/navigation#hidenavigation | ||
* @see https://daypicker.dev/docs/navigation#hidenavigation | ||
*/ | ||
@@ -216,3 +215,3 @@ hideNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation#disablenavigation | ||
* @see https://daypicker.dev/docs/navigation#disablenavigation | ||
*/ | ||
@@ -233,3 +232,3 @@ disableNavigation?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#caption-layouts | ||
* @see https://daypicker.dev/docs/customization#caption-layouts | ||
*/ | ||
@@ -241,3 +240,3 @@ captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years"; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#fixed-weeks | ||
* @see https://daypicker.dev/docs/customization#fixed-weeks | ||
*/ | ||
@@ -254,3 +253,3 @@ fixedWeeks?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#outside-days | ||
* @see https://daypicker.dev/docs/customization#outside-days | ||
*/ | ||
@@ -265,3 +264,3 @@ showOutsideDays?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/customization#showweeknumber | ||
* @see https://daypicker.dev/docs/customization#showweeknumber | ||
*/ | ||
@@ -274,6 +273,6 @@ showWeekNumber?: boolean; | ||
* Use the | ||
* [react-day-picker/utc](https://daypicker.dev/next/docs/localization#utc-dates) | ||
* [react-day-picker/utc](https://daypicker.dev/docs/localization#utc-dates) | ||
* to set the calendar to UTC. | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#iso-week-dates | ||
* @see https://daypicker.dev/docs/localization#iso-week-dates | ||
* @see https://en.wikipedia.org/wiki/ISO_week_date | ||
@@ -285,3 +284,3 @@ */ | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -295,3 +294,3 @@ components?: Partial<CustomComponents>; | ||
* | ||
* @see https://daypicker.dev/next/docs/accessibility#footer | ||
* @see https://daypicker.dev/docs/accessibility#footer | ||
*/ | ||
@@ -306,3 +305,3 @@ footer?: React.ReactNode | string; | ||
* | ||
* @see https://daypicker.dev/next/docs/accessibility#autofocus | ||
* @see https://daypicker.dev/docs/accessibility#autofocus | ||
*/ | ||
@@ -313,3 +312,3 @@ autoFocus?: boolean; | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes#disabling-dates | ||
* @see https://daypicker.dev/docs/selection-modes#disabling-dates | ||
*/ | ||
@@ -321,3 +320,3 @@ disabled?: Matcher | Matcher[] | undefined; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers#hidden-modifier | ||
* @see https://daypicker.dev/guides/custom-modifiers#hidden-modifier | ||
*/ | ||
@@ -329,3 +328,3 @@ hidden?: Matcher | Matcher[] | undefined; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers#today-modifier | ||
* @see https://daypicker.dev/guides/custom-modifiers#today-modifier | ||
*/ | ||
@@ -336,3 +335,3 @@ today?: Date; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-modifiers | ||
* @see https://daypicker.dev/guides/custom-modifiers | ||
*/ | ||
@@ -344,3 +343,3 @@ modifiers?: Record<string, Matcher | Matcher[] | undefined> | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#aria-labels | ||
* @see https://daypicker.dev/docs/translation#aria-labels | ||
*/ | ||
@@ -352,3 +351,3 @@ labels?: Partial<Labels>; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#custom-formatters | ||
* @see https://daypicker.dev/docs/translation#custom-formatters | ||
*/ | ||
@@ -360,3 +359,3 @@ formatters?: Partial<Formatters>; | ||
* | ||
* @see https://daypicker.dev/next/docs/translation#rtl-text-direction | ||
* @see https://daypicker.dev/docs/translation#rtl-text-direction | ||
*/ | ||
@@ -377,3 +376,3 @@ dir?: HTMLDivElement["dir"]; | ||
* @defaultValue en-US | ||
* @see https://daypicker.dev/next/docs/localization | ||
* @see https://daypicker.dev/docs/localization | ||
*/ | ||
@@ -385,3 +384,3 @@ locale?: Locale | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#first-date-of-the-week | ||
* @see https://daypicker.dev/docs/localization#first-date-of-the-week | ||
*/ | ||
@@ -392,3 +391,3 @@ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined; | ||
* | ||
* @see https://daypicker.dev/next/docs/localization#first-week-contains-date | ||
* @see https://daypicker.dev/docs/localization#first-week-contains-date | ||
*/ | ||
@@ -414,3 +413,3 @@ firstWeekContainsDate?: 1 | 4; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation#onmonthchange | ||
* @see https://daypicker.dev/docs/navigation#onmonthchange | ||
*/ | ||
@@ -422,3 +421,3 @@ onMonthChange?: MonthChangeEventHandler; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -429,3 +428,3 @@ onNextClick?: MonthChangeEventHandler; | ||
* | ||
* @see https://daypicker.dev/next/docs/navigation | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
@@ -436,4 +435,5 @@ onPrevClick?: MonthChangeEventHandler; | ||
* | ||
* @private | ||
* @deprecated Use a custom `WeekNumber` component instead. | ||
* @see http://daypicker.dev/next/docs/customization#showweeknumber | ||
* @see https://daypicker.dev/docs/customization#showweeknumber | ||
*/ | ||
@@ -505,4 +505,3 @@ // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#single-mode | ||
* @see https://daypicker.dev/docs/selection-modes#single-mode | ||
*/ | ||
@@ -523,4 +522,3 @@ export interface PropsSingleRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#single-mode | ||
* @see https://daypicker.dev/docs/selection-modes#single-mode | ||
*/ | ||
@@ -541,4 +539,3 @@ export interface PropsSingle { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#multiple-mode | ||
* @see https://daypicker.dev/docs/selection-modes#multiple-mode | ||
*/ | ||
@@ -561,4 +558,3 @@ export interface PropsMultiRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#multiple-mode | ||
* @see https://daypicker.dev/docs/selection-modes#multiple-mode | ||
*/ | ||
@@ -581,4 +577,3 @@ export interface PropsMulti { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#range-mode | ||
* @see https://daypicker.dev/docs/selection-modes#range-mode | ||
*/ | ||
@@ -601,4 +596,3 @@ export interface PropsRangeRequired { | ||
* | ||
* @group Props | ||
* @see https://daypicker.dev/next/docs/selection-modes#range-mode | ||
* @see https://daypicker.dev/docs/selection-modes#range-mode | ||
*/ | ||
@@ -605,0 +599,0 @@ export interface PropsRange { |
@@ -38,3 +38,3 @@ /* eslint-disable @typescript-eslint/ban-types */ | ||
* | ||
* @see https://daypicker.dev/next/docs/selection-modes | ||
* @see https://daypicker.dev/docs/selection-modes | ||
*/ | ||
@@ -46,3 +46,3 @@ export type Mode = "single" | "multiple" | "range"; | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -96,2 +96,3 @@ export type CustomComponents = { | ||
/** @private */ | ||
export type DateLib = typeof dateLib; | ||
@@ -154,44 +155,42 @@ | ||
* | ||
* Matchers can be of different types: | ||
* @example | ||
* // will always match the day | ||
* const booleanMatcher: Matcher = true; | ||
* | ||
* ```tsx | ||
* // will always match the day | ||
* const booleanMatcher: Matcher = true; | ||
* // will match the today's date | ||
* const dateMatcher: Matcher = new Date(); | ||
* | ||
* // will match the today's date | ||
* const dateMatcher: Matcher = new Date(); | ||
* // will match the days in the array | ||
* const arrayMatcher: Matcher = [ | ||
* new Date(2019, 1, 2), | ||
* new Date(2019, 1, 4) | ||
* ]; | ||
* | ||
* // will match the days in the array | ||
* const arrayMatcher: Matcher = [ | ||
* new Date(2019, 1, 2), | ||
* new Date(2019, 1, 4) | ||
* ]; | ||
* // will match days after the 2nd of February 2019 | ||
* const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
* | ||
* // will match days after the 2nd of February 2019 | ||
* const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
* // will match days before the 2nd of February 2019 } | ||
* const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
* // will match days before the 2nd of February 2019 } | ||
* const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
* | ||
* // will match Sundays | ||
* const dayOfWeekMatcher: DayOfWeek = { | ||
* dayOfWeek: 0 | ||
* }; | ||
* // will match Sundays | ||
* const dayOfWeekMatcher: DayOfWeek = { | ||
* dayOfWeek: 0 | ||
* }; | ||
* | ||
* // will match the included days, except the two dates | ||
* const intervalMatcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
* // will match the included days, except the two dates | ||
* const intervalMatcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
* | ||
* // will match the included days, including the two dates | ||
* const rangeMatcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
* // will match the included days, including the two dates | ||
* const rangeMatcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
* | ||
* // will match when the function return true | ||
* const functionMatcher: Matcher = (day: Date) => { | ||
* return day.getMonth() === 2; // match when month is March | ||
* }; | ||
* ``` | ||
* // will match when the function return true | ||
* const functionMatcher: Matcher = (day: Date) => { | ||
* return day.getMonth() === 2; // match when month is March | ||
* }; | ||
*/ | ||
@@ -210,4 +209,7 @@ export type Matcher = | ||
/** | ||
* A matcher to match a day falling after the specified date, with the date not | ||
* included. | ||
* Match a day falling after the specified date, with the date not included. | ||
* | ||
* @example | ||
* // Match days after the 2nd of February 2019 | ||
* const matcher: DateAfter = { after: new Date(2019, 1, 2) }; | ||
*/ | ||
@@ -217,4 +219,7 @@ export type DateAfter = { after: Date }; | ||
/** | ||
* A matcher to match a day falling before the specified date, with the date not | ||
* included. | ||
* Match a day falling before the specified date, with the date not included. | ||
* | ||
* @example | ||
* // Match days before the 2nd of February 2019 | ||
* const matcher: DateBefore = { before: new Date(2019, 1, 2) }; | ||
*/ | ||
@@ -224,4 +229,11 @@ export type DateBefore = { before: Date }; | ||
/** | ||
* A matcher to match a day falling before and/or after two dates, where the | ||
* dates are not included. | ||
* An interval of dates. Differently from {@link DateRange}, the range ends here | ||
* are not included. | ||
* | ||
* @example | ||
* // Match the days between the 2nd and the 5th of February 2019 | ||
* const matcher: DateInterval = { | ||
* after: new Date(2019, 1, 2), | ||
* before: new Date(2019, 1, 5) | ||
* }; | ||
*/ | ||
@@ -231,4 +243,11 @@ export type DateInterval = { before: Date; after: Date }; | ||
/** | ||
* A matcher to match a range of dates. The range can be open. Differently from | ||
* {@link DateInterval}, the dates here are included. | ||
* A range of dates. The range can be open. Differently from | ||
* {@link DateInterval}, the range ends here are included. | ||
* | ||
* @example | ||
* // Match the days between the 2nd and the 5th of February 2019 | ||
* const matcher: DateRange = { | ||
* from: new Date(2019, 1, 2), | ||
* to: new Date(2019, 1, 5) | ||
* }; | ||
*/ | ||
@@ -238,33 +257,51 @@ export type DateRange = { from: Date | undefined; to?: Date | undefined }; | ||
/** | ||
* A matcher to match a date being one of the specified days of the week (`0-6`, | ||
* where `0` is Sunday). | ||
* Match dates being one of the specified days of the week (`0-6`, where `0` is | ||
* Sunday). | ||
* | ||
* @example | ||
* // Match Sundays | ||
* const matcher: DayOfWeek = { dayOfWeek: 0 }; | ||
* // Match weekends | ||
* const matcher: DayOfWeek = { dayOfWeek: [0, 6] }; | ||
*/ | ||
export type DayOfWeek = { dayOfWeek: number[] }; | ||
export type DayOfWeek = { dayOfWeek: number | number[] }; | ||
/** A record with `data-*` attributes passed to `<DayPicker />`. */ | ||
export type DataAttributes = Record<`data-${string}`, unknown>; | ||
/** | ||
* The event handler triggered when interacting with a day. | ||
* The event handler triggered when clicking or interacting with a day. | ||
* | ||
* @template EventType - The event type that triggered the day event. | ||
* @template EventType - The event type that triggered the event (e.g. | ||
* `React.MouseEvent`, `React.KeyboardEvent`, etc.). | ||
* @param date - The date that has triggered the event. | ||
* @param modifiers - The modifiers belonging to the date. | ||
* @param e - The DOM event that triggered the event. | ||
*/ | ||
export type DayEventHandler<EventType> = ( | ||
/** The date that has triggered the event. */ | ||
date: Date, | ||
/** The modifiers belonging to the date. */ | ||
modifiers: Modifiers, | ||
/** The DOM event that triggered this event. */ | ||
e: EventType | ||
) => void; | ||
/** The event handler when a month is changed in the calendar. */ | ||
/** | ||
* The event handler when a month is changed in the calendar. | ||
* | ||
* ```tsx | ||
* <DayPicker onMonthChange={(month) => console.log(month)} /> | ||
* ``` | ||
* | ||
* @see https://daypicker.dev/docs/navigation | ||
*/ | ||
export type MonthChangeEventHandler = (month: Date) => void; | ||
/** Maps user interface elements, selection states, and flags to a CSS style. */ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** Defines the class names for various UI components and states. */ | ||
/** | ||
* The CSS classnames to use for the {@link UI} elements, the | ||
* {@link SelectionState} and the {@link DayFlag}. | ||
* | ||
* @example | ||
* const classNames: ClassNames = { | ||
* [UI.Root]: "root", | ||
* [UI.Outside]: "outside", | ||
* [UI.Nav]: "nav" | ||
* // etc. | ||
* }; | ||
*/ | ||
export type ClassNames = { | ||
@@ -274,27 +311,53 @@ [key in UI | SelectionState | DayFlag]: string; | ||
/** The flags that are matching a day in the calendar. */ | ||
export type DayFlags = Record<DayFlag, boolean>; | ||
/** | ||
* The CSS styles to use for the {@link UI} elements, the {@link SelectionState} | ||
* and the {@link DayFlag}. | ||
*/ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** The selection state that are matching a day in the calendar. */ | ||
export type SelectionStates = Record<SelectionState, boolean>; | ||
/** | ||
* The modifiers that are matching a day in the calendar. | ||
* | ||
* @example | ||
* const modifiers: Modifiers = { | ||
* today: false, // the day is not today | ||
* selected: true, // the day is selected | ||
* weekend: false // the day is not in the weekend | ||
* // etc | ||
* }; | ||
*/ | ||
export type Modifiers = Record<string, boolean>; | ||
/** The modifiers that are matching a day in the calendar. */ | ||
export type Modifiers = DayFlags & SelectionStates & CustomModifiers; | ||
/** | ||
* The style to apply to each day element matching a modifier. | ||
* | ||
* @example | ||
* const modifiersStyles: ModifiersStyles = { | ||
* today: { color: "red" }, | ||
* selected: { backgroundColor: "blue" }, | ||
* weekend: { color: "green" } | ||
* }; | ||
*/ | ||
export type ModifiersStyles = Record<string, CSSProperties>; | ||
/** The custom modifiers matching a day, passed to the `modifiers` prop. */ | ||
export type CustomModifiers = Record<string, boolean>; | ||
/** | ||
* The classnames to assign to each day element matching a modifier. | ||
* | ||
* @example | ||
* const modifiersClassNames: ModifiersClassNames = { | ||
* today: "today", // Use the "today" class for the today's day | ||
* selected: "highlight", // Use the "highlight" class for the selected day | ||
* weekend: "weekend" // Use the "weekend" class for the weekend days | ||
* }; | ||
*/ | ||
export type ModifiersClassNames = Record<string, string>; | ||
/** The style to apply to each day element matching a modifier. */ | ||
export type ModifiersStyles = Record<string, CSSProperties> & | ||
Partial<Record<DayFlag, CSSProperties>>; | ||
/** The classnames to assign to each day element matching a modifier. */ | ||
export type ModifiersClassNames = Record<string, string> & | ||
Partial<Record<DayFlag & SelectionState, string>>; | ||
/** | ||
* The props that have been deprecated since version 9.0.0. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @see https://daypicker.dev/next/upgrading | ||
* @see https://daypicker.dev/upgrading | ||
*/ | ||
@@ -315,4 +378,6 @@ export type V9DeprecatedProps = | ||
/** The direction to move the focus relative to the current focused date. */ | ||
export type MoveFocusDir = "after" | "before"; | ||
/** The temporal unit to move the focus by. */ | ||
export type MoveFocusBy = | ||
@@ -319,0 +384,0 @@ | "day" |
@@ -20,10 +20,7 @@ import type { | ||
/** | ||
* The hook to get and handle the calendar state. | ||
* Return the calendar object to work with the calendar in custom components. | ||
* | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
export interface UseCalendar { | ||
today: Date; | ||
/** All the unique dates displayed to the calendar. */ | ||
dates: Date[]; | ||
export interface Calendar { | ||
/** | ||
@@ -39,12 +36,2 @@ * All the days displayed in the calendar. As opposite from | ||
months: CalendarMonth[]; | ||
/** | ||
* The month displayed as first the calendar. When `numberOfMonths` is greater | ||
* than `1`, it is the first of the displayed months. | ||
*/ | ||
firstMonth: Date; | ||
/** | ||
* The month displayed as last the calendar. When `numberOfMonths` is greater | ||
* than `1`, it is the last of the displayed months. | ||
*/ | ||
lastMonth: Date; | ||
@@ -60,3 +47,3 @@ /** The next month to display. */ | ||
*/ | ||
navigationStartMonth: Date | undefined; | ||
navStart: Date | undefined; | ||
/** | ||
@@ -66,13 +53,6 @@ * The month where the navigation ends. `undefined` if the calendar can be | ||
*/ | ||
navigationEndMonth: Date | undefined; | ||
navEnd: Date | undefined; | ||
/** Set the first month displayed in the calendar. */ | ||
setFirstMonth: (date: Date) => void; | ||
/** Navigate to the specified month. Will fire the `onMonthChange` callback. */ | ||
goToMonth: (month: Date) => void; | ||
/** Navigate to the next month. */ | ||
goToNextMonth: () => void; | ||
/** Navigate to the previous month. */ | ||
goToPreviousMonth: () => void; | ||
/** | ||
@@ -88,31 +68,8 @@ * Navigate to the specified date. If the second parameter (refDate) is | ||
goToDay: (day: CalendarDay) => void; | ||
/** Whether the given date is included in the displayed months. */ | ||
isDayDisplayed: (day: CalendarDay) => boolean; | ||
} | ||
/** @private */ | ||
export function useCalendar( | ||
props: Pick< | ||
DayPickerProps, | ||
| "fromYear" | ||
| "toYear" | ||
| "startMonth" | ||
| "endMonth" | ||
| "month" | ||
| "defaultMonth" | ||
| "today" | ||
| "numberOfMonths" | ||
| "disableNavigation" | ||
| "onMonthChange" | ||
| "ISOWeek" | ||
>, | ||
dateLib: DateLib | ||
) { | ||
const today = dateLib.startOfDay(props.today ?? new dateLib.Date()); | ||
export function useCalendar(props: DayPickerProps, dateLib: DateLib): Calendar { | ||
const [navStart, navEnd] = getNavMonths(props, dateLib); | ||
const [navigationStartMonth, navigationEndMonth] = getNavMonths( | ||
props, | ||
dateLib | ||
); | ||
const { startOfMonth } = dateLib; | ||
@@ -128,49 +85,26 @@ | ||
/** An array of the months displayed in the calendar. */ | ||
const displayMonths = getDisplayMonths( | ||
firstMonth, | ||
navigationEndMonth, | ||
props, | ||
dateLib | ||
); | ||
/** The months displayed in the calendar. */ | ||
const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib); | ||
/** The last month displayed in the calendar. */ | ||
const lastMonth = displayMonths[displayMonths.length - 1]; | ||
/** An array of the dates displayed in the calendar. */ | ||
/** The dates displayed in the calendar. */ | ||
const dates = getDates(displayMonths, props.endMonth, props, dateLib); | ||
/** An array of the Months displayed in the calendar. */ | ||
/** The Months displayed in the calendar. */ | ||
const months = getMonths(displayMonths, dates, props, dateLib); | ||
/** An array of the Weeks displayed in the calendar. */ | ||
/** The Weeks displayed in the calendar. */ | ||
const weeks = getWeeks(months); | ||
/** An array of the Days displayed in the calendar. */ | ||
/** The Days displayed in the calendar. */ | ||
const days = getDays(months); | ||
const previousMonth = getPreviousMonth( | ||
firstMonth, | ||
navigationStartMonth, | ||
props, | ||
dateLib | ||
); | ||
const nextMonth = getNextMonth( | ||
firstMonth, | ||
navigationEndMonth, | ||
props, | ||
dateLib | ||
); | ||
const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib); | ||
const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib); | ||
const { disableNavigation, onMonthChange } = props; | ||
function isDayDisplayed(day: CalendarDay) { | ||
return weeks.some((week: CalendarWeek) => { | ||
return week.days.some((d) => { | ||
return d.isEqualTo(day); | ||
}); | ||
}); | ||
} | ||
const isDayInCalendar = (day: CalendarDay) => | ||
weeks.some((week: CalendarWeek) => week.days.some((d) => d.isEqualTo(day))); | ||
function goToMonth(date: Date) { | ||
const goToMonth = (date: Date) => { | ||
if (disableNavigation) { | ||
@@ -181,49 +115,34 @@ return; | ||
// if month is before start, use the first month instead | ||
if (navigationStartMonth && newMonth < startOfMonth(navigationStartMonth)) { | ||
newMonth = startOfMonth(navigationStartMonth); | ||
if (navStart && newMonth < startOfMonth(navStart)) { | ||
newMonth = startOfMonth(navStart); | ||
} | ||
// if month is after endMonth, use the last month instead | ||
if (navigationEndMonth && newMonth > startOfMonth(navigationEndMonth)) { | ||
newMonth = startOfMonth(navigationEndMonth); | ||
if (navEnd && newMonth > startOfMonth(navEnd)) { | ||
newMonth = startOfMonth(navEnd); | ||
} | ||
setFirstMonth(newMonth); | ||
onMonthChange?.(newMonth); | ||
} | ||
}; | ||
function goToDay(day: CalendarDay) { | ||
if (isDayDisplayed(day)) { | ||
const goToDay = (day: CalendarDay) => { | ||
// is this check necessary? | ||
if (isDayInCalendar(day)) { | ||
return; | ||
} | ||
goToMonth(day.date); | ||
} | ||
}; | ||
function goToNextMonth() { | ||
return nextMonth ? goToMonth(nextMonth) : undefined; | ||
} | ||
function goToPreviousMonth() { | ||
return previousMonth ? goToMonth(previousMonth) : undefined; | ||
} | ||
const calendar: UseCalendar = { | ||
dates, | ||
const calendar = { | ||
months, | ||
weeks, | ||
days, | ||
today, | ||
navigationStartMonth: navigationStartMonth, | ||
navigationEndMonth: navigationEndMonth, | ||
navStart, | ||
navEnd, | ||
firstMonth: firstMonth, | ||
lastMonth, | ||
previousMonth, | ||
nextMonth, | ||
setFirstMonth, | ||
isDayDisplayed, | ||
goToMonth, | ||
goToDay, | ||
goToNextMonth, | ||
goToPreviousMonth | ||
goToDay | ||
}; | ||
@@ -230,0 +149,0 @@ |
import { createContext, useContext } from "react"; | ||
import { CalendarDay } from "./classes/CalendarDay.js"; | ||
import { CalendarMonth } from "./classes/CalendarMonth.js"; | ||
import type { DayPickerProps } from "./types/props.js"; | ||
import type { UseCalendar } from "./useCalendar.js"; | ||
import type { UseModifiers } from "./useModifiers.js"; | ||
import type { | ||
UseMulti, | ||
UseRange, | ||
UseSelection, | ||
UseSingle | ||
} from "./useSelection.js"; | ||
import type { SelectedValue, SelectHandler } from "./types/selection.js"; | ||
import { Modifiers } from "./types/shared.js"; | ||
export type { | ||
UseCalendar, | ||
UseModifiers, | ||
UseSelection, | ||
UseMulti, | ||
UseRange, | ||
UseSingle | ||
}; | ||
// Create a context with a default value | ||
export const dayPickerContext = createContext< | ||
(UseCalendar & UseModifiers & UseSelection<DayPickerProps>) | undefined | ||
DayPickerContext<DayPickerProps> | undefined | ||
>(undefined); | ||
export type DayPickerContext<T extends DayPickerProps> = { | ||
/** The months displayed in the calendar. */ | ||
months: CalendarMonth[]; | ||
/** The next month to display. */ | ||
nextMonth: Date | undefined; | ||
/** The previous month to display. */ | ||
previousMonth: Date | undefined; | ||
/** Navigate to the specified month. Will fire the `onMonthChange` callback. */ | ||
goToMonth: (month: Date) => void; | ||
/** Returns the modifiers for the given day. */ | ||
getModifiers: (day: CalendarDay) => Modifiers; | ||
/** The selected date(s). */ | ||
selected: SelectedValue<T> | undefined; | ||
/** Set a selection. */ | ||
select: SelectHandler<T> | undefined; | ||
/** Whether the given date is selected. */ | ||
isSelected: ((date: Date) => boolean) | undefined; | ||
}; | ||
/** | ||
* Return API to work with `<DayPicker />` inside custom components. | ||
* Return the context to work with `<DayPicker />` inside custom components. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
* @see https://daypicker.dev/guides/custom-components | ||
*/ | ||
@@ -38,3 +44,3 @@ export function useDayPicker<T extends DayPickerProps>(props?: T) { | ||
} | ||
return context as UseCalendar & UseModifiers & UseSelection<T>; | ||
return context as DayPickerContext<T>; | ||
} |
@@ -11,7 +11,5 @@ import { useState } from "react"; | ||
DayPickerProps, | ||
Mode | ||
Modifiers | ||
} from "./types/index.js"; | ||
import { UseCalendar } from "./useCalendar.js"; | ||
import { UseModifiers } from "./useModifiers.js"; | ||
import { UseSelection } from "./useSelection.js"; | ||
import { Calendar } from "./useCalendar.js"; | ||
@@ -28,8 +26,6 @@ export type UseFocus = { | ||
/** Set the last focused day. */ | ||
setLastFocused: (day: CalendarDay | undefined) => void; | ||
/** Blur the focused day. */ | ||
blur: () => void; | ||
/** Move the current focus to the next day according to the given direction. */ | ||
moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void; | ||
@@ -39,20 +35,9 @@ }; | ||
/** @private */ | ||
export function useFocus( | ||
props: Pick< | ||
DayPickerProps, | ||
| "autoFocus" | ||
| "disabled" | ||
| "hidden" | ||
| "modifiers" | ||
| "numberOfMonths" | ||
| "locale" | ||
| "ISOWeek" | ||
| "weekStartsOn" | ||
>, | ||
calendar: UseCalendar, | ||
modifiers: UseModifiers, | ||
selection: UseSelection<{ mode: Mode }>, | ||
export function useFocus<T extends DayPickerProps>( | ||
props: T, | ||
calendar: Calendar, | ||
getModifiers: (day: CalendarDay) => Modifiers, | ||
isSelected: (date: Date) => boolean, | ||
dateLib: DateLib | ||
): UseFocus { | ||
const { getModifiers } = modifiers; | ||
const { autoFocus } = props; | ||
@@ -62,5 +47,5 @@ const [lastFocused, setLastFocused] = useState<CalendarDay | undefined>(); | ||
const focusTarget = calculateFocusTarget( | ||
calendar, | ||
calendar.days, | ||
getModifiers, | ||
selection.isSelected, | ||
isSelected || (() => false), | ||
lastFocused | ||
@@ -83,4 +68,4 @@ ); | ||
focusedDay, | ||
calendar.navigationStartMonth, | ||
calendar.navigationEndMonth, | ||
calendar.navStart, | ||
calendar.navEnd, | ||
props, | ||
@@ -103,3 +88,2 @@ dateLib | ||
focused: focusedDay, | ||
setLastFocused, | ||
blur, | ||
@@ -106,0 +90,0 @@ moveFocus |
@@ -1,58 +0,25 @@ | ||
import { dateLib as defaultDateLib } from "./lib/dateLib.js"; | ||
import { type UseMulti, useMulti } from "./selection/useMulti.js"; | ||
import { type UseRange, useRange } from "./selection/useRange.js"; | ||
import { type UseSingle, useSingle } from "./selection/useSingle.js"; | ||
import type { | ||
DateLib, | ||
DayPickerProps, | ||
Mode, | ||
PropsMulti, | ||
PropsMultiRequired, | ||
PropsRange, | ||
PropsRangeRequired, | ||
PropsSingle, | ||
PropsSingleRequired | ||
} from "./types/index.js"; | ||
import { useMulti } from "./selection/useMulti.js"; | ||
import { useRange } from "./selection/useRange.js"; | ||
import { useSingle } from "./selection/useSingle.js"; | ||
import type { DateLib, DayPickerProps } from "./types/index.js"; | ||
import { Selection } from "./types/selection.js"; | ||
export type { UseMulti, UseRange, UseSingle }; | ||
export function useSelection<T extends DayPickerProps>( | ||
props: T, | ||
dateLib?: DateLib | ||
): UseSelection<T> { | ||
const lib = { ...defaultDateLib, ...dateLib }; | ||
const single = useSingle<T>(props as PropsSingle | PropsSingleRequired, lib); | ||
const multi = useMulti<T>(props as PropsMulti | PropsMultiRequired, lib); | ||
const range = useRange<T>(props as PropsRange | PropsRangeRequired, lib); | ||
dateLib: DateLib | ||
): Selection<T> | undefined { | ||
const single = useSingle(props, dateLib); | ||
const multi = useMulti(props, dateLib); | ||
const range = useRange(props, dateLib); | ||
switch (props.mode) { | ||
case "single": | ||
// @ts-expect-error The type of `single` is `UseSingle<T>`. | ||
return single; | ||
case "multiple": | ||
// @ts-expect-error The type of `multi` is `UseMulti<T>`. | ||
return multi; | ||
case "range": | ||
// @ts-expect-error The type of `range` is `UseRange<T>`. | ||
return range; | ||
default: | ||
// @ts-expect-error The type of the return value correct | ||
return { | ||
handleSelect: () => undefined, | ||
isSelected: () => false, | ||
selected: undefined | ||
}; | ||
return undefined; | ||
} | ||
} | ||
export type UseSelection<T> = T extends { mode: Mode } | ||
? { | ||
single: UseSingle<T>; | ||
multiple: UseMulti<T>; | ||
range: UseRange<T>; | ||
}[T["mode"]] | ||
: { | ||
handleSelect: () => undefined; | ||
isSelected: () => false; | ||
selected: undefined; | ||
}; |
import type { DateLib, Matcher } from "../types/index.js"; | ||
import { isDateInRange } from "./isDateInRange.js"; | ||
import { rangeIncludesDate } from "./rangeIncludesDate.js"; | ||
import { | ||
@@ -9,13 +9,6 @@ isDateAfterType, | ||
isDateRange, | ||
isDatesArray, | ||
isDayOfWeekType | ||
} from "./typeguards.js"; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export function isDatesArray( | ||
value: unknown, | ||
dateLib: DateLib | ||
): value is Date[] { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
/** | ||
@@ -58,5 +51,8 @@ * Returns whether a day matches against at least one of the given | ||
if (isDateRange(matcher)) { | ||
return isDateInRange(date, matcher, dateLib); | ||
return rangeIncludesDate(matcher, date, false, dateLib); | ||
} | ||
if (isDayOfWeekType(matcher)) { | ||
if (!Array.isArray(matcher.dayOfWeek)) { | ||
return matcher.dayOfWeek === date.getDay(); | ||
} | ||
return matcher.dayOfWeek.includes(date.getDay()); | ||
@@ -63,0 +59,0 @@ } |
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./rangeIncludesDate.js"; | ||
export * from "./typeguards.js"; |
@@ -5,12 +5,9 @@ import type { | ||
DateInterval, | ||
DateLib, | ||
DateRange, | ||
DayOfWeek, | ||
DayPickerProps, | ||
PropsMulti, | ||
PropsRange, | ||
PropsSingle | ||
DayOfWeek | ||
} from "../types/index.js"; | ||
/** | ||
* Returns true if `matcher` is of type `DateInterval`. | ||
* Returns true if `matcher` is of type {@link DateInterval}. | ||
* | ||
@@ -29,3 +26,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is a `DateRange` type. | ||
* Returns true if `value` is a {@link DateRange} type. | ||
* | ||
@@ -39,3 +36,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateAfter`. | ||
* Returns true if `value` is of type {@link DateAfter}. | ||
* | ||
@@ -49,3 +46,3 @@ * @group Utilities | ||
/** | ||
* Returns true if `value` is of type `DateBefore`. | ||
* Returns true if `value` is of type {@link DateBefore}. | ||
* | ||
@@ -59,51 +56,6 @@ * @group Utilities | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
* Returns true if `value` is a {@link DayOfWeek} type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isSingle( | ||
props: DayPickerProps | ||
): props is DayPickerProps & PropsSingle { | ||
return props.mode === "single"; | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isSingle` instead. | ||
* @protected | ||
*/ | ||
export const isDayPickerSingle = isSingle; | ||
/** | ||
* Returns true if the props are for a multiple selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isMulti( | ||
props: DayPickerProps | ||
): props is DayPickerProps & PropsMulti { | ||
return props.mode === "multiple"; | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isMulti` instead. | ||
* @protected | ||
*/ | ||
export const isDayPickerMultiple = isMulti; | ||
/** | ||
* Returns true if the props are for a range selection mode. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isRange( | ||
props: DayPickerProps | ||
): props is DayPickerProps & PropsRange { | ||
return props.mode === "range"; | ||
} | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isDayOfWeekType(value: unknown): value is DayOfWeek { | ||
@@ -113,6 +65,8 @@ return Boolean(value && typeof value === "object" && "dayOfWeek" in value); | ||
/** | ||
* @deprecated This function has been renamed Use `isRange` instead. | ||
* @protected | ||
*/ | ||
export const isDayPickerRange = isRange; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
export function isDatesArray( | ||
value: unknown, | ||
dateLib: DateLib | ||
): value is Date[] { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} |
# DayPicker Website | ||
The DayPicker website hosted at http://daypicker.dev is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. | ||
The DayPicker website hosted at https://daypicker.dev is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. | ||
@@ -5,0 +5,0 @@ ### Installation |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
885
0
70
976313
18759