react-day-picker
Advanced tools
Comparing version 9.0.0-rc.5 to 9.0.0-rc.6
@@ -19,6 +19,5 @@ "use strict"; | ||
const { options, className, components, classNames, ...selectProps } = props; | ||
const cssClassRoot = [classNames[UI_js_1.UI.DropdownRoot]].join(" "); | ||
const cssClassSelect = [classNames[UI_js_1.UI.Dropdown], className].join(" "); | ||
const selectedOption = options?.find(({ value }) => value === selectProps.value); | ||
return (react_1.default.createElement("span", { className: cssClassRoot }, | ||
return (react_1.default.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI_js_1.UI.DropdownRoot] }, | ||
react_1.default.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (react_1.default.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))), | ||
@@ -25,0 +24,0 @@ react_1.default.createElement("span", { className: classNames[UI_js_1.UI.CaptionLabel], "aria-hidden": true }, |
@@ -52,3 +52,11 @@ "use strict"; | ||
function DayPicker(props) { | ||
const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = 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)(() => ({ | ||
@@ -74,5 +82,5 @@ dateLib: (0, getDateLib_js_1.getDateLib)(props.dateLib), | ||
const focus = (0, useFocus_js_1.useFocus)(props, calendar, modifiers, selection, dateLib); | ||
const { isFocusTarget, focused: focusedDay, setFocused, blur, focusDayBefore, focusDayAfter, focusWeekBefore, focusWeekAfter, focusMonthBefore, focusMonthAfter, focusYearBefore, focusYearAfter, focusStartOfWeek, focusEndOfWeek } = focus; | ||
const { isFocusTarget, focused: focusedDay, setFocused, moveFocus, blur } = focus; | ||
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels; | ||
const weekdays = (0, react_1.useMemo)(() => (0, getWeekdays_js_1.getWeekdays)(locale, weekStartsOn, ISOWeek, dateLib), [ISOWeek, dateLib, locale, weekStartsOn]); | ||
const weekdays = (0, react_1.useMemo)(() => (0, getWeekdays_js_1.getWeekdays)(locale, props.weekStartsOn, props.ISOWeek, dateLib), [dateLib, locale, props.ISOWeek, props.weekStartsOn]); | ||
const isInteractive = mode !== undefined || onDayClick !== undefined; | ||
@@ -91,98 +99,36 @@ const handlePreviousClick = (0, react_1.useCallback)(() => { | ||
}, [goToNextMonth, nextMonth, onNextClick]); | ||
const handleDayClick = (0, react_1.useCallback)((day, m) => { | ||
return (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
handleSelect(day.date, m, e); | ||
setFocused(day); | ||
onDayClick?.(day.date, m, e); | ||
}; | ||
const handleDayClick = (0, react_1.useCallback)((day, m) => (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
handleSelect(day.date, m, e); | ||
setFocused(day); | ||
onDayClick?.(day.date, m, e); | ||
}, [handleSelect, onDayClick, setFocused]); | ||
const handleDayFocus = (0, react_1.useCallback)((day, m) => { | ||
return (e) => { | ||
setFocused(day); | ||
onDayFocus?.(day.date, m, e); | ||
}; | ||
const handleDayFocus = (0, react_1.useCallback)((day, m) => (e) => { | ||
setFocused(day); | ||
onDayFocus?.(day.date, m, e); | ||
}, [onDayFocus, setFocused]); | ||
const handleDayBlur = (0, react_1.useCallback)((day, m) => { | ||
return (e) => { | ||
blur(); | ||
onDayBlur?.(day.date, m, e); | ||
}; | ||
const handleDayBlur = (0, react_1.useCallback)((day, m) => (e) => { | ||
blur(); | ||
onDayBlur?.(day.date, m, e); | ||
}, [blur, onDayBlur]); | ||
const handleDayKeyDown = (0, react_1.useCallback)((day, modifiers) => { | ||
return (e) => { | ||
switch (e.key) { | ||
case "ArrowLeft": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focusDayAfter() : focusDayBefore(); | ||
break; | ||
case "ArrowRight": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focusDayBefore() : focusDayAfter(); | ||
break; | ||
case "ArrowDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusWeekAfter(); | ||
break; | ||
case "ArrowUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusWeekBefore(); | ||
break; | ||
case " ": | ||
case "Enter": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
selection?.handleSelect(day.date, modifiers, e); | ||
break; | ||
case "PageUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focusYearBefore() : focusMonthBefore(); | ||
break; | ||
case "PageDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focusYearAfter() : focusMonthAfter(); | ||
break; | ||
case "Home": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusStartOfWeek(); | ||
break; | ||
case "End": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusEndOfWeek(); | ||
break; | ||
} | ||
onDayKeyDown?.(day.date, modifiers, e); | ||
const handleDayKeyDown = (0, react_1.useCallback)((day, modifiers) => (e) => { | ||
const keyMap = { | ||
ArrowLeft: ["day", props.dir === "rtl" ? "after" : "before"], | ||
ArrowRight: ["day", props.dir === "rtl" ? "before" : "after"], | ||
ArrowDown: ["week", "after"], | ||
ArrowUp: ["week", "before"], | ||
PageUp: [e.shiftKey ? "year" : "month", "before"], | ||
PageDown: [e.shiftKey ? "year" : "month", "after"], | ||
Home: ["startOfWeek", "before"], | ||
End: ["endOfWeek", "after"] | ||
}; | ||
}, [ | ||
dir, | ||
focusDayAfter, | ||
focusDayBefore, | ||
focusEndOfWeek, | ||
focusMonthAfter, | ||
focusMonthBefore, | ||
focusStartOfWeek, | ||
focusWeekAfter, | ||
focusWeekBefore, | ||
focusYearAfter, | ||
focusYearBefore, | ||
onDayKeyDown, | ||
selection | ||
]); | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn, | ||
firstWeekContainsDate, | ||
useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
if (keyMap[e.key]) { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
const [moveBy, moveDir] = keyMap[e.key]; | ||
moveFocus(moveBy, moveDir); | ||
} | ||
onDayKeyDown?.(day.date, modifiers, e); | ||
}, [moveFocus, onDayKeyDown, props.dir]); | ||
const { className, style } = (0, react_1.useMemo)(() => ({ | ||
@@ -217,3 +163,3 @@ className: [classNames[UI_js_1.UI.Root], props.className] | ||
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 }, | ||
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.DropdownNav], style: styles?.[UI_js_1.UI.DropdownNav] }, | ||
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] }, | ||
captionLayout === "dropdown" || | ||
@@ -225,5 +171,5 @@ captionLayout === "dropdown-months" ? (react_1.default.createElement(components.Dropdown, { "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange, options: dropdownMonths, style: styles?.[UI_js_1.UI.Dropdown], value: calendarMonth.date.getMonth() })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date.getMonth()))), | ||
undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] }, | ||
react_1.default.createElement(components.Weekdays, { className: classNames[UI_js_1.UI.Weekdays], hidden: props.hideWeekdayRow, role: "row", style: styles?.[UI_js_1.UI.Weekdays] }, | ||
showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI_js_1.UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI_js_1.UI.WeekNumberHeader] }, !props.hideWeekdayRow && formatWeekNumberHeader())), | ||
weekdays.map((weekday, i) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI_js_1.UI.Weekday], key: i, role: "columnheader", style: styles?.[UI_js_1.UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib))))), | ||
!props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { className: classNames[UI_js_1.UI.Weekdays], role: "row", style: styles?.[UI_js_1.UI.Weekdays] }, | ||
showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI_js_1.UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI_js_1.UI.WeekNumberHeader] }, formatWeekNumberHeader())), | ||
weekdays.map((weekday, i) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI_js_1.UI.Weekday], key: i, role: "columnheader", style: styles?.[UI_js_1.UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib)))))), | ||
react_1.default.createElement(components.Weeks, { className: classNames[UI_js_1.UI.Weeks], role: "rowgroup", style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => { | ||
@@ -253,3 +199,3 @@ return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, role: "row", style: styles?.[UI_js_1.UI.Week], week: week }, | ||
const style = { | ||
...(0, getStyleForModifiers_js_1.getStyleForModifiers)(dayModifiers, modifiersStyles), | ||
...(0, getStyleForModifiers_js_1.getStyleForModifiers)(dayModifiers, props.modifiersStyles), | ||
...styles?.[UI_js_1.UI.Day] | ||
@@ -259,3 +205,3 @@ }; | ||
classNames[UI_js_1.UI.Day], | ||
...(0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(dayModifiers, classNames, modifiersClassNames) | ||
...(0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(dayModifiers, classNames, props.modifiersClassNames) | ||
]; | ||
@@ -262,0 +208,0 @@ const ariaLabel = !isInteractive |
import { FormatOptions } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* The default formatter for the caption element. As default, it returns the | ||
* month and year. | ||
* Format the caption of the month. | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Formatters | ||
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -7,5 +7,5 @@ "use strict"; | ||
/** | ||
* The default formatter for the caption element. As default, it returns the | ||
* month and year. | ||
* Format the caption of the month. | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Formatters | ||
@@ -12,0 +12,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* The default formatter for the day grid cell element. As default, it returns | ||
* the date of the day. | ||
* Format the day date shown in the day cell. | ||
* | ||
* @defaultValue `d` (e.g. "1") | ||
* @group Formatters | ||
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -6,5 +6,5 @@ "use strict"; | ||
/** | ||
* The default formatter for the day grid cell element. As default, it returns | ||
* the date of the day. | ||
* Format the day date shown in the day cell. | ||
* | ||
* @defaultValue `d` (e.g. "1") | ||
* @group Formatters | ||
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the month dropdown option. As default, it returns | ||
* the month name. | ||
* Format the month number for the dropdown option label. | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -6,5 +6,5 @@ "use strict"; | ||
/** | ||
* The default formatter for the month dropdown option. As default, it returns | ||
* the month name. | ||
* Format the month number for the dropdown option label. | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @group Formatters | ||
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* The default formatter for the name of the weekday. As default, it returns the | ||
* short name of the weekday (e.g. "Mo"). | ||
* Format the weekday name to be displayed in the weekdays header. | ||
* | ||
* @defaultValue `cccccc` (e.g. "Mo" for Monday) | ||
* @group Formatters | ||
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -6,5 +6,5 @@ "use strict"; | ||
/** | ||
* The default formatter for the name of the weekday. As default, it returns the | ||
* short name of the weekday (e.g. "Mo"). | ||
* Format the weekday name to be displayed in the weekdays header. | ||
* | ||
* @defaultValue `cccccc` (e.g. "Mo" for Monday) | ||
* @group Formatters | ||
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers. As default, it returns the week | ||
* number with a leading zero if the week number is less than 10. | ||
* Format the week number. | ||
* | ||
* @param weekNumber - The week number to format. | ||
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers | ||
* @group Formatters | ||
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -5,6 +5,5 @@ "use strict"; | ||
/** | ||
* The default formatter for the week numbers. As default, it returns the week | ||
* number with a leading zero if the week number is less than 10. | ||
* Format the week number. | ||
* | ||
* @param weekNumber - The week number to format. | ||
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers | ||
* @group Formatters | ||
@@ -11,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers header. As default, it returns an | ||
* empty string. | ||
* Format the week number header. | ||
* | ||
* @defaultValue `""` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -5,5 +5,5 @@ "use strict"; | ||
/** | ||
* The default formatter for the week numbers header. As default, it returns an | ||
* empty string. | ||
* Format the week number header. | ||
* | ||
* @defaultValue `""` | ||
* @group Formatters | ||
@@ -10,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the Year dropdown option. As default, it returns | ||
* the year. | ||
* Format the years for the dropdown option label. | ||
* | ||
* @defaultValue `year.toString()` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -6,5 +6,5 @@ "use strict"; | ||
/** | ||
* The default formatter for the Year dropdown option. As default, it returns | ||
* the year. | ||
* Format the years for the dropdown option label. | ||
* | ||
* @defaultValue `year.toString()` | ||
* @group Formatters | ||
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -5,2 +5,2 @@ import { CalendarDay } from "../classes/index.js"; | ||
/** The date that is currently focused. */ | ||
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined; | ||
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined; |
@@ -9,3 +9,3 @@ "use strict"; | ||
/** The date that is currently focused. */ | ||
refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) { | ||
refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) { | ||
if (attempt > 365) { | ||
@@ -16,6 +16,5 @@ // Limit the recursion to 365 attempts | ||
const focusableDate = (0, getFocusableDate_js_1.getFocusableDate)(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date? | ||
calendarStartMonth, calendarEndMonth, options, dateLib); | ||
const isDisabled = Boolean(options.disabled && | ||
(0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.disabled, dateLib)); | ||
const isHidden = Boolean(options.hidden && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.hidden, dateLib)); | ||
calendarStartMonth, calendarEndMonth, props, dateLib); | ||
const isDisabled = Boolean(props.disabled && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, props.disabled, dateLib)); | ||
const isHidden = Boolean(props.hidden && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, props.hidden, dateLib)); | ||
const targetMonth = focusableDate; | ||
@@ -27,4 +26,4 @@ const focusDay = new index_js_1.CalendarDay(focusableDate, targetMonth, dateLib); | ||
// Recursively attempt to find the next focusable date | ||
return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1); | ||
return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt + 1); | ||
} | ||
//# sourceMappingURL=getNextFocus.js.map |
@@ -25,3 +25,3 @@ "use strict"; | ||
const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth); | ||
if (monthsDiff < numberOfMonths ?? 1) { | ||
if (monthsDiff < numberOfMonths) { | ||
return undefined; | ||
@@ -28,0 +28,0 @@ } |
@@ -20,3 +20,3 @@ "use strict"; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths ?? 1 : 1; | ||
const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
@@ -23,0 +23,0 @@ if (!calendarStartMonth) { |
import type { DateLib, LabelOptions } from "../index.js"; | ||
import type { Modifiers } from "../types/index.js"; | ||
/** | ||
* Return an ARIA label for the day button. | ||
* The ARIA label for the day button. | ||
* | ||
@@ -9,2 +9,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g. | ||
* | ||
* @defaultValue The formatted date. | ||
* @group Labels | ||
@@ -11,0 +12,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -7,3 +7,3 @@ "use strict"; | ||
/** | ||
* Return an ARIA label for the day button. | ||
* The ARIA label for the day button. | ||
* | ||
@@ -13,2 +13,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g. | ||
* | ||
* @defaultValue The formatted date. | ||
* @group Labels | ||
@@ -15,0 +16,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -7,2 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -10,2 +10,3 @@ "use strict"; | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Labels | ||
@@ -12,0 +13,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the months dropdown element. | ||
* The ARIA label for the months dropdown. | ||
* | ||
* @defaultValue `"Choose the Month"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -5,4 +5,5 @@ "use strict"; | ||
/** | ||
* Return the default ARIA label for the months dropdown element. | ||
* The ARIA label for the months dropdown. | ||
* | ||
* @defaultValue `"Choose the Month"` | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return an ARIA label for the navigation toolbar, that will be announced when | ||
* entering it (optional). | ||
* The ARIA label for the navigation toolbar. | ||
* | ||
* @defaultValue `""` | ||
* @group Labels | ||
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -5,5 +5,5 @@ "use strict"; | ||
/** | ||
* Return an ARIA label for the navigation toolbar, that will be announced when | ||
* entering it (optional). | ||
* The ARIA label for the navigation toolbar. | ||
* | ||
* @defaultValue `""` | ||
* @group Labels | ||
@@ -10,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for next month button. | ||
* | ||
* @defaultValue `"Go to the Next Month"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -5,4 +5,5 @@ "use strict"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for next month button. | ||
* | ||
* @defaultValue `"Go to the Next Month"` | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for previous month button. | ||
* | ||
* @defaultValue `"Go to the Previous Month"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -5,4 +5,5 @@ "use strict"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for previous month button. | ||
* | ||
* @defaultValue `"Go to the Previous Month"` | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* Return he default ARIA label for the Weekday colum header. | ||
* The ARIA label for the Weekday column header. | ||
* | ||
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -6,4 +6,5 @@ "use strict"; | ||
/** | ||
* Return he default ARIA label for the Weekday colum header. | ||
* The ARIA label for the Weekday column header. | ||
* | ||
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"` | ||
* @group Labels | ||
@@ -10,0 +11,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the week number element. | ||
* The ARIA label for the week number cell (the first cell in the row). | ||
* | ||
* @defaultValue `Week ${weekNumber}` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -5,4 +5,5 @@ "use strict"; | ||
/** | ||
* Return the default ARIA label for the week number element. | ||
* The ARIA label for the week number cell (the first cell in the row). | ||
* | ||
* @defaultValue `Week ${weekNumber}` | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the week number header element. | ||
* The ARIA label for the week number header element. | ||
* | ||
* @defaultValue `"Week Number"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -5,4 +5,5 @@ "use strict"; | ||
/** | ||
* Return the default ARIA label for the week number header element. | ||
* The ARIA label for the week number header element. | ||
* | ||
* @defaultValue `"Week Number"` | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the years dropdown. | ||
* The ARIA label for the years dropdown. | ||
* | ||
* @defaultValue `"Choose the Year"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -5,4 +5,5 @@ "use strict"; | ||
/** | ||
* Return the default ARIA label for the years dropdown. | ||
* The ARIA label for the years dropdown. | ||
* | ||
* @defaultValue `"Choose the Year"` | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -61,3 +61,3 @@ import React from "react"; | ||
modifiersStyles?: ModifiersStyles; | ||
/** A unique id to replace the React generated id. Used for ARIA labels. */ | ||
/** A unique id to add to the root element. */ | ||
id?: string; | ||
@@ -199,3 +199,3 @@ /** | ||
*/ | ||
hideWeekdayRow?: boolean; | ||
hideWeekdays?: boolean; | ||
/** | ||
@@ -234,3 +234,3 @@ * Show the outside days (days falling in the next or the previous month). | ||
*/ | ||
components?: CustomComponents; | ||
components?: Partial<CustomComponents>; | ||
/** | ||
@@ -237,0 +237,0 @@ * Add a footer to the calendar, acting as live region. |
@@ -20,6 +20,49 @@ import type { CSSProperties } from "react"; | ||
* | ||
* @see https://github.com/gpbl/react-day-picker/blob/main/src/components/custom-components.ts | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
*/ | ||
export type CustomComponents = { | ||
[key in keyof typeof components]?: (typeof components)[key]; | ||
/** Render any button element in DayPicker. */ | ||
Button: typeof components.Button; | ||
/** Render the chevron icon used in the navigation buttons and dropdowns. */ | ||
Chevron: typeof components.Chevron; | ||
/** Render the caption label of the month grid. */ | ||
CaptionLabel: typeof components.CaptionLabel; | ||
/** Render the day cell in the month grid. */ | ||
Day: typeof components.Day; | ||
/** Render the button containing the day in the day cell. */ | ||
DayButton: typeof components.DayButton; | ||
/** Render the dropdown element to select years and months. */ | ||
Dropdown: typeof components.Dropdown; | ||
/** Render the container of the dropdowns. */ | ||
DropdownNav: typeof components.DropdownNav; | ||
/** Render the footer element announced by screen readers. */ | ||
Footer: typeof components.Footer; | ||
/** Render the container of the MonthGrid. */ | ||
Month: typeof components.Month; | ||
/** Render the caption of the month grid. */ | ||
MonthCaption: typeof components.MonthCaption; | ||
/** Render the grid of days in a month. */ | ||
MonthGrid: typeof components.MonthGrid; | ||
/** Wrapper of the month grids. */ | ||
Months: typeof components.Months; | ||
/** Render the navigation element with the next and previous buttons. */ | ||
Nav: typeof components.Nav; | ||
/** Render the `<option>` HTML element in the dropdown. */ | ||
Option: typeof components.Option; | ||
/** Render the root element of the calendar. */ | ||
Root: typeof components.Root; | ||
/** Render the select element in the dropdowns. */ | ||
Select: typeof components.Select; | ||
/** Render the weeks section in the month grid. */ | ||
Weeks: typeof components.Weeks; | ||
/** Render the week rows. */ | ||
Week: typeof components.Week; | ||
/** Render the weekday name in the header. */ | ||
Weekday: typeof components.Weekday; | ||
/** Render the row containing the week days. */ | ||
Weekdays: typeof components.Weekdays; | ||
/** Render the cell with the number of the week. */ | ||
WeekNumber: typeof components.WeekNumber; | ||
/** Render the header of the week number column. */ | ||
WeekNumberHeader: typeof components.WeekNumberHeader; | ||
}; | ||
@@ -26,0 +69,0 @@ export type DateLib = typeof dateLib; |
@@ -27,3 +27,3 @@ /** | ||
/** The container of the dropdown navigation (when enabled). */ | ||
DropdownNav = "dropdown_nav", | ||
Dropdowns = "dropdowns", | ||
/** The dropdown element to select for years and months. */ | ||
@@ -30,0 +30,0 @@ Dropdown = "dropdown", |
@@ -31,3 +31,3 @@ "use strict"; | ||
/** The container of the dropdown navigation (when enabled). */ | ||
UI["DropdownNav"] = "dropdown_nav"; | ||
UI["Dropdowns"] = "dropdowns"; | ||
/** The dropdown element to select for years and months. */ | ||
@@ -34,0 +34,0 @@ UI["Dropdown"] = "dropdown"; |
import type { CalendarDay } from "./classes/index.js"; | ||
import type { DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
import { UseCalendar } from "./useCalendar.js"; | ||
@@ -9,3 +9,3 @@ import { UseModifiers } from "./useModifiers.js"; | ||
focused: CalendarDay | undefined; | ||
/** The date that is target of the focus when tabbing into the month grid. */ | ||
/** Check if the given day is the focus target when entering the calendar. */ | ||
isFocusTarget: (day: CalendarDay) => boolean; | ||
@@ -18,16 +18,3 @@ /** Focus the given day. */ | ||
blur: () => void; | ||
/** Focus the day after the focused day. */ | ||
focusDayAfter: () => void; | ||
/** Focus the day before the focused day. */ | ||
focusDayBefore: () => void; | ||
/** Focus the day in the week before the focused day. */ | ||
focusWeekBefore: () => void; | ||
/** Focus the day in the week after the focused day. */ | ||
focusWeekAfter: () => void; | ||
focusMonthBefore: () => void; | ||
focusMonthAfter: () => void; | ||
focusYearBefore: () => void; | ||
focusYearAfter: () => void; | ||
focusStartOfWeek: () => void; | ||
focusEndOfWeek: () => void; | ||
moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void; | ||
}; | ||
@@ -34,0 +21,0 @@ /** @private */ |
@@ -36,12 +36,3 @@ "use strict"; | ||
blur, | ||
focusDayAfter: () => moveFocus("day", "after"), | ||
focusDayBefore: () => moveFocus("day", "before"), | ||
focusWeekAfter: () => moveFocus("week", "after"), | ||
focusWeekBefore: () => moveFocus("week", "before"), | ||
focusMonthBefore: () => moveFocus("month", "before"), | ||
focusMonthAfter: () => moveFocus("month", "after"), | ||
focusYearBefore: () => moveFocus("year", "before"), | ||
focusYearAfter: () => moveFocus("year", "after"), | ||
focusStartOfWeek: () => moveFocus("startOfWeek", "before"), | ||
focusEndOfWeek: () => moveFocus("endOfWeek", "after") | ||
moveFocus | ||
}; | ||
@@ -48,0 +39,0 @@ return useFocus; |
@@ -6,3 +6,3 @@ import type { DateLib, Matcher } from "../types/index.js"; | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* {@link Matcher}. | ||
* | ||
@@ -9,0 +9,0 @@ * ```tsx |
@@ -13,3 +13,3 @@ "use strict"; | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* {@link Matcher}. | ||
* | ||
@@ -16,0 +16,0 @@ * ```tsx |
@@ -13,6 +13,5 @@ import React from "react"; | ||
const { options, className, components, classNames, ...selectProps } = props; | ||
const cssClassRoot = [classNames[UI.DropdownRoot]].join(" "); | ||
const cssClassSelect = [classNames[UI.Dropdown], className].join(" "); | ||
const selectedOption = options?.find(({ value }) => value === selectProps.value); | ||
return (React.createElement("span", { className: cssClassRoot }, | ||
return (React.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot] }, | ||
React.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (React.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))), | ||
@@ -19,0 +18,0 @@ React.createElement("span", { className: classNames[UI.CaptionLabel], "aria-hidden": true }, |
@@ -26,3 +26,11 @@ import React, { useCallback, useMemo } from "react"; | ||
export function DayPicker(props) { | ||
const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = 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(() => ({ | ||
@@ -48,5 +56,5 @@ dateLib: getDateLib(props.dateLib), | ||
const focus = useFocus(props, calendar, modifiers, selection, dateLib); | ||
const { isFocusTarget, focused: focusedDay, setFocused, blur, focusDayBefore, focusDayAfter, focusWeekBefore, focusWeekAfter, focusMonthBefore, focusMonthAfter, focusYearBefore, focusYearAfter, focusStartOfWeek, focusEndOfWeek } = focus; | ||
const { isFocusTarget, focused: focusedDay, setFocused, moveFocus, blur } = focus; | ||
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels; | ||
const weekdays = useMemo(() => getWeekdays(locale, weekStartsOn, ISOWeek, dateLib), [ISOWeek, dateLib, locale, weekStartsOn]); | ||
const weekdays = useMemo(() => getWeekdays(locale, props.weekStartsOn, props.ISOWeek, dateLib), [dateLib, locale, props.ISOWeek, props.weekStartsOn]); | ||
const isInteractive = mode !== undefined || onDayClick !== undefined; | ||
@@ -65,98 +73,36 @@ const handlePreviousClick = useCallback(() => { | ||
}, [goToNextMonth, nextMonth, onNextClick]); | ||
const handleDayClick = useCallback((day, m) => { | ||
return (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
handleSelect(day.date, m, e); | ||
setFocused(day); | ||
onDayClick?.(day.date, m, e); | ||
}; | ||
const handleDayClick = useCallback((day, m) => (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
handleSelect(day.date, m, e); | ||
setFocused(day); | ||
onDayClick?.(day.date, m, e); | ||
}, [handleSelect, onDayClick, setFocused]); | ||
const handleDayFocus = useCallback((day, m) => { | ||
return (e) => { | ||
setFocused(day); | ||
onDayFocus?.(day.date, m, e); | ||
}; | ||
const handleDayFocus = useCallback((day, m) => (e) => { | ||
setFocused(day); | ||
onDayFocus?.(day.date, m, e); | ||
}, [onDayFocus, setFocused]); | ||
const handleDayBlur = useCallback((day, m) => { | ||
return (e) => { | ||
blur(); | ||
onDayBlur?.(day.date, m, e); | ||
}; | ||
const handleDayBlur = useCallback((day, m) => (e) => { | ||
blur(); | ||
onDayBlur?.(day.date, m, e); | ||
}, [blur, onDayBlur]); | ||
const handleDayKeyDown = useCallback((day, modifiers) => { | ||
return (e) => { | ||
switch (e.key) { | ||
case "ArrowLeft": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focusDayAfter() : focusDayBefore(); | ||
break; | ||
case "ArrowRight": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focusDayBefore() : focusDayAfter(); | ||
break; | ||
case "ArrowDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusWeekAfter(); | ||
break; | ||
case "ArrowUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusWeekBefore(); | ||
break; | ||
case " ": | ||
case "Enter": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
selection?.handleSelect(day.date, modifiers, e); | ||
break; | ||
case "PageUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focusYearBefore() : focusMonthBefore(); | ||
break; | ||
case "PageDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focusYearAfter() : focusMonthAfter(); | ||
break; | ||
case "Home": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusStartOfWeek(); | ||
break; | ||
case "End": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focusEndOfWeek(); | ||
break; | ||
} | ||
onDayKeyDown?.(day.date, modifiers, e); | ||
const handleDayKeyDown = useCallback((day, modifiers) => (e) => { | ||
const keyMap = { | ||
ArrowLeft: ["day", props.dir === "rtl" ? "after" : "before"], | ||
ArrowRight: ["day", props.dir === "rtl" ? "before" : "after"], | ||
ArrowDown: ["week", "after"], | ||
ArrowUp: ["week", "before"], | ||
PageUp: [e.shiftKey ? "year" : "month", "before"], | ||
PageDown: [e.shiftKey ? "year" : "month", "after"], | ||
Home: ["startOfWeek", "before"], | ||
End: ["endOfWeek", "after"] | ||
}; | ||
}, [ | ||
dir, | ||
focusDayAfter, | ||
focusDayBefore, | ||
focusEndOfWeek, | ||
focusMonthAfter, | ||
focusMonthBefore, | ||
focusStartOfWeek, | ||
focusWeekAfter, | ||
focusWeekBefore, | ||
focusYearAfter, | ||
focusYearBefore, | ||
onDayKeyDown, | ||
selection | ||
]); | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn, | ||
firstWeekContainsDate, | ||
useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
if (keyMap[e.key]) { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
const [moveBy, moveDir] = keyMap[e.key]; | ||
moveFocus(moveBy, moveDir); | ||
} | ||
onDayKeyDown?.(day.date, modifiers, e); | ||
}, [moveFocus, onDayKeyDown, props.dir]); | ||
const { className, style } = useMemo(() => ({ | ||
@@ -191,3 +137,3 @@ className: [classNames[UI.Root], props.className] | ||
return (React.createElement(components.Month, { className: classNames[UI.Month], style: styles?.[UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth }, | ||
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.DropdownNav], style: styles?.[UI.DropdownNav] }, | ||
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] }, | ||
captionLayout === "dropdown" || | ||
@@ -199,5 +145,5 @@ captionLayout === "dropdown-months" ? (React.createElement(components.Dropdown, { "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange, options: dropdownMonths, style: styles?.[UI.Dropdown], value: calendarMonth.date.getMonth() })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date.getMonth()))), | ||
undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] }, | ||
React.createElement(components.Weekdays, { className: classNames[UI.Weekdays], hidden: props.hideWeekdayRow, role: "row", style: styles?.[UI.Weekdays] }, | ||
showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI.WeekNumberHeader] }, !props.hideWeekdayRow && formatWeekNumberHeader())), | ||
weekdays.map((weekday, i) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI.Weekday], key: i, role: "columnheader", style: styles?.[UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib))))), | ||
!props.hideWeekdays && (React.createElement(components.Weekdays, { className: classNames[UI.Weekdays], role: "row", style: styles?.[UI.Weekdays] }, | ||
showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI.WeekNumberHeader] }, formatWeekNumberHeader())), | ||
weekdays.map((weekday, i) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI.Weekday], key: i, role: "columnheader", style: styles?.[UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib)))))), | ||
React.createElement(components.Weeks, { className: classNames[UI.Weeks], role: "rowgroup", style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => { | ||
@@ -227,3 +173,3 @@ return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, role: "row", style: styles?.[UI.Week], week: week }, | ||
const style = { | ||
...getStyleForModifiers(dayModifiers, modifiersStyles), | ||
...getStyleForModifiers(dayModifiers, props.modifiersStyles), | ||
...styles?.[UI.Day] | ||
@@ -233,3 +179,3 @@ }; | ||
classNames[UI.Day], | ||
...getClassNamesForModifiers(dayModifiers, classNames, modifiersClassNames) | ||
...getClassNamesForModifiers(dayModifiers, classNames, props.modifiersClassNames) | ||
]; | ||
@@ -236,0 +182,0 @@ const ariaLabel = !isInteractive |
import { FormatOptions } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* The default formatter for the caption element. As default, it returns the | ||
* month and year. | ||
* Format the caption of the month. | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Formatters | ||
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
* The default formatter for the caption element. As default, it returns the | ||
* month and year. | ||
* Format the caption of the month. | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Formatters | ||
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* The default formatter for the day grid cell element. As default, it returns | ||
* the date of the day. | ||
* Format the day date shown in the day cell. | ||
* | ||
* @defaultValue `d` (e.g. "1") | ||
* @group Formatters | ||
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
* The default formatter for the day grid cell element. As default, it returns | ||
* the date of the day. | ||
* Format the day date shown in the day cell. | ||
* | ||
* @defaultValue `d` (e.g. "1") | ||
* @group Formatters | ||
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the month dropdown option. As default, it returns | ||
* the month name. | ||
* Format the month number for the dropdown option label. | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import { enUS } from "../lib/locales.js"; | ||
/** | ||
* The default formatter for the month dropdown option. As default, it returns | ||
* the month name. | ||
* Format the month number for the dropdown option label. | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @group Formatters | ||
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* The default formatter for the name of the weekday. As default, it returns the | ||
* short name of the weekday (e.g. "Mo"). | ||
* Format the weekday name to be displayed in the weekdays header. | ||
* | ||
* @defaultValue `cccccc` (e.g. "Mo" for Monday) | ||
* @group Formatters | ||
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
* The default formatter for the name of the weekday. As default, it returns the | ||
* short name of the weekday (e.g. "Mo"). | ||
* Format the weekday name to be displayed in the weekdays header. | ||
* | ||
* @defaultValue `cccccc` (e.g. "Mo" for Monday) | ||
* @group Formatters | ||
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers. As default, it returns the week | ||
* number with a leading zero if the week number is less than 10. | ||
* Format the week number. | ||
* | ||
* @param weekNumber - The week number to format. | ||
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers | ||
* @group Formatters | ||
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers. As default, it returns the week | ||
* number with a leading zero if the week number is less than 10. | ||
* Format the week number. | ||
* | ||
* @param weekNumber - The week number to format. | ||
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers | ||
* @group Formatters | ||
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers header. As default, it returns an | ||
* empty string. | ||
* Format the week number header. | ||
* | ||
* @defaultValue `""` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers header. As default, it returns an | ||
* empty string. | ||
* Format the week number header. | ||
* | ||
* @defaultValue `""` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the Year dropdown option. As default, it returns | ||
* the year. | ||
* Format the years for the dropdown option label. | ||
* | ||
* @defaultValue `year.toString()` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the Year dropdown option. As default, it returns | ||
* the year. | ||
* Format the years for the dropdown option label. | ||
* | ||
* @defaultValue `year.toString()` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -5,2 +5,2 @@ import { CalendarDay } from "../classes/index.js"; | ||
/** The date that is currently focused. */ | ||
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined; | ||
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined; |
@@ -6,3 +6,3 @@ import { CalendarDay } from "../classes/index.js"; | ||
/** The date that is currently focused. */ | ||
refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) { | ||
refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) { | ||
if (attempt > 365) { | ||
@@ -13,6 +13,5 @@ // Limit the recursion to 365 attempts | ||
const focusableDate = getFocusableDate(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date? | ||
calendarStartMonth, calendarEndMonth, options, dateLib); | ||
const isDisabled = Boolean(options.disabled && | ||
dateMatchModifiers(focusableDate, options.disabled, dateLib)); | ||
const isHidden = Boolean(options.hidden && dateMatchModifiers(focusableDate, options.hidden, dateLib)); | ||
calendarStartMonth, calendarEndMonth, props, dateLib); | ||
const isDisabled = Boolean(props.disabled && dateMatchModifiers(focusableDate, props.disabled, dateLib)); | ||
const isHidden = Boolean(props.hidden && dateMatchModifiers(focusableDate, props.hidden, dateLib)); | ||
const targetMonth = focusableDate; | ||
@@ -24,4 +23,4 @@ const focusDay = new CalendarDay(focusableDate, targetMonth, dateLib); | ||
// Recursively attempt to find the next focusable date | ||
return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1); | ||
return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt + 1); | ||
} | ||
//# sourceMappingURL=getNextFocus.js.map |
@@ -22,3 +22,3 @@ /** | ||
const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth); | ||
if (monthsDiff < numberOfMonths ?? 1) { | ||
if (monthsDiff < numberOfMonths) { | ||
return undefined; | ||
@@ -25,0 +25,0 @@ } |
@@ -17,3 +17,3 @@ /** | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths ?? 1 : 1; | ||
const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
@@ -20,0 +20,0 @@ if (!calendarStartMonth) { |
import type { DateLib, LabelOptions } from "../index.js"; | ||
import type { Modifiers } from "../types/index.js"; | ||
/** | ||
* Return an ARIA label for the day button. | ||
* The ARIA label for the day button. | ||
* | ||
@@ -9,2 +9,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g. | ||
* | ||
* @defaultValue The formatted date. | ||
* @group Labels | ||
@@ -11,0 +12,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
* Return an ARIA label for the day button. | ||
* The ARIA label for the day button. | ||
* | ||
@@ -8,2 +8,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g. | ||
* | ||
* @defaultValue The formatted date. | ||
* @group Labels | ||
@@ -10,0 +11,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -7,2 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Labels | ||
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -6,2 +6,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Labels | ||
@@ -8,0 +9,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the months dropdown element. | ||
* The ARIA label for the months dropdown. | ||
* | ||
* @defaultValue `"Choose the Month"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return the default ARIA label for the months dropdown element. | ||
* The ARIA label for the months dropdown. | ||
* | ||
* @defaultValue `"Choose the Month"` | ||
* @group Labels | ||
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return an ARIA label for the navigation toolbar, that will be announced when | ||
* entering it (optional). | ||
* The ARIA label for the navigation toolbar. | ||
* | ||
* @defaultValue `""` | ||
* @group Labels | ||
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return an ARIA label for the navigation toolbar, that will be announced when | ||
* entering it (optional). | ||
* The ARIA label for the navigation toolbar. | ||
* | ||
* @defaultValue `""` | ||
* @group Labels | ||
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for next month button. | ||
* | ||
* @defaultValue `"Go to the Next Month"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for next month button. | ||
* | ||
* @defaultValue `"Go to the Next Month"` | ||
* @group Labels | ||
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for previous month button. | ||
* | ||
* @defaultValue `"Go to the Previous Month"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for previous month button. | ||
* | ||
* @defaultValue `"Go to the Previous Month"` | ||
* @group Labels | ||
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
* Return he default ARIA label for the Weekday colum header. | ||
* The ARIA label for the Weekday column header. | ||
* | ||
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
* Return he default ARIA label for the Weekday colum header. | ||
* The ARIA label for the Weekday column header. | ||
* | ||
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the week number element. | ||
* The ARIA label for the week number cell (the first cell in the row). | ||
* | ||
* @defaultValue `Week ${weekNumber}` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return the default ARIA label for the week number element. | ||
* The ARIA label for the week number cell (the first cell in the row). | ||
* | ||
* @defaultValue `Week ${weekNumber}` | ||
* @group Labels | ||
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the week number header element. | ||
* The ARIA label for the week number header element. | ||
* | ||
* @defaultValue `"Week Number"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return the default ARIA label for the week number header element. | ||
* The ARIA label for the week number header element. | ||
* | ||
* @defaultValue `"Week Number"` | ||
* @group Labels | ||
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the years dropdown. | ||
* The ARIA label for the years dropdown. | ||
* | ||
* @defaultValue `"Choose the Year"` | ||
* @group Labels | ||
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return the default ARIA label for the years dropdown. | ||
* The ARIA label for the years dropdown. | ||
* | ||
* @defaultValue `"Choose the Year"` | ||
* @group Labels | ||
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -61,3 +61,3 @@ import React from "react"; | ||
modifiersStyles?: ModifiersStyles; | ||
/** A unique id to replace the React generated id. Used for ARIA labels. */ | ||
/** A unique id to add to the root element. */ | ||
id?: string; | ||
@@ -199,3 +199,3 @@ /** | ||
*/ | ||
hideWeekdayRow?: boolean; | ||
hideWeekdays?: boolean; | ||
/** | ||
@@ -234,3 +234,3 @@ * Show the outside days (days falling in the next or the previous month). | ||
*/ | ||
components?: CustomComponents; | ||
components?: Partial<CustomComponents>; | ||
/** | ||
@@ -237,0 +237,0 @@ * Add a footer to the calendar, acting as live region. |
@@ -20,6 +20,49 @@ import type { CSSProperties } from "react"; | ||
* | ||
* @see https://github.com/gpbl/react-day-picker/blob/main/src/components/custom-components.ts | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
*/ | ||
export type CustomComponents = { | ||
[key in keyof typeof components]?: (typeof components)[key]; | ||
/** Render any button element in DayPicker. */ | ||
Button: typeof components.Button; | ||
/** Render the chevron icon used in the navigation buttons and dropdowns. */ | ||
Chevron: typeof components.Chevron; | ||
/** Render the caption label of the month grid. */ | ||
CaptionLabel: typeof components.CaptionLabel; | ||
/** Render the day cell in the month grid. */ | ||
Day: typeof components.Day; | ||
/** Render the button containing the day in the day cell. */ | ||
DayButton: typeof components.DayButton; | ||
/** Render the dropdown element to select years and months. */ | ||
Dropdown: typeof components.Dropdown; | ||
/** Render the container of the dropdowns. */ | ||
DropdownNav: typeof components.DropdownNav; | ||
/** Render the footer element announced by screen readers. */ | ||
Footer: typeof components.Footer; | ||
/** Render the container of the MonthGrid. */ | ||
Month: typeof components.Month; | ||
/** Render the caption of the month grid. */ | ||
MonthCaption: typeof components.MonthCaption; | ||
/** Render the grid of days in a month. */ | ||
MonthGrid: typeof components.MonthGrid; | ||
/** Wrapper of the month grids. */ | ||
Months: typeof components.Months; | ||
/** Render the navigation element with the next and previous buttons. */ | ||
Nav: typeof components.Nav; | ||
/** Render the `<option>` HTML element in the dropdown. */ | ||
Option: typeof components.Option; | ||
/** Render the root element of the calendar. */ | ||
Root: typeof components.Root; | ||
/** Render the select element in the dropdowns. */ | ||
Select: typeof components.Select; | ||
/** Render the weeks section in the month grid. */ | ||
Weeks: typeof components.Weeks; | ||
/** Render the week rows. */ | ||
Week: typeof components.Week; | ||
/** Render the weekday name in the header. */ | ||
Weekday: typeof components.Weekday; | ||
/** Render the row containing the week days. */ | ||
Weekdays: typeof components.Weekdays; | ||
/** Render the cell with the number of the week. */ | ||
WeekNumber: typeof components.WeekNumber; | ||
/** Render the header of the week number column. */ | ||
WeekNumberHeader: typeof components.WeekNumberHeader; | ||
}; | ||
@@ -26,0 +69,0 @@ export type DateLib = typeof dateLib; |
@@ -27,3 +27,3 @@ /** | ||
/** The container of the dropdown navigation (when enabled). */ | ||
DropdownNav = "dropdown_nav", | ||
Dropdowns = "dropdowns", | ||
/** The dropdown element to select for years and months. */ | ||
@@ -30,0 +30,0 @@ Dropdown = "dropdown", |
@@ -28,3 +28,3 @@ /** | ||
/** The container of the dropdown navigation (when enabled). */ | ||
UI["DropdownNav"] = "dropdown_nav"; | ||
UI["Dropdowns"] = "dropdowns"; | ||
/** The dropdown element to select for years and months. */ | ||
@@ -31,0 +31,0 @@ UI["Dropdown"] = "dropdown"; |
import type { CalendarDay } from "./classes/index.js"; | ||
import type { DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Mode } from "./types/index.js"; | ||
import { UseCalendar } from "./useCalendar.js"; | ||
@@ -9,3 +9,3 @@ import { UseModifiers } from "./useModifiers.js"; | ||
focused: CalendarDay | undefined; | ||
/** The date that is target of the focus when tabbing into the month grid. */ | ||
/** Check if the given day is the focus target when entering the calendar. */ | ||
isFocusTarget: (day: CalendarDay) => boolean; | ||
@@ -18,16 +18,3 @@ /** Focus the given day. */ | ||
blur: () => void; | ||
/** Focus the day after the focused day. */ | ||
focusDayAfter: () => void; | ||
/** Focus the day before the focused day. */ | ||
focusDayBefore: () => void; | ||
/** Focus the day in the week before the focused day. */ | ||
focusWeekBefore: () => void; | ||
/** Focus the day in the week after the focused day. */ | ||
focusWeekAfter: () => void; | ||
focusMonthBefore: () => void; | ||
focusMonthAfter: () => void; | ||
focusYearBefore: () => void; | ||
focusYearAfter: () => void; | ||
focusStartOfWeek: () => void; | ||
focusEndOfWeek: () => void; | ||
moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void; | ||
}; | ||
@@ -34,0 +21,0 @@ /** @private */ |
@@ -33,12 +33,3 @@ import { useState } from "react"; | ||
blur, | ||
focusDayAfter: () => moveFocus("day", "after"), | ||
focusDayBefore: () => moveFocus("day", "before"), | ||
focusWeekAfter: () => moveFocus("week", "after"), | ||
focusWeekBefore: () => moveFocus("week", "before"), | ||
focusMonthBefore: () => moveFocus("month", "before"), | ||
focusMonthAfter: () => moveFocus("month", "after"), | ||
focusYearBefore: () => moveFocus("year", "before"), | ||
focusYearAfter: () => moveFocus("year", "after"), | ||
focusStartOfWeek: () => moveFocus("startOfWeek", "before"), | ||
focusEndOfWeek: () => moveFocus("endOfWeek", "after") | ||
moveFocus | ||
}; | ||
@@ -45,0 +36,0 @@ return useFocus; |
@@ -6,3 +6,3 @@ import type { DateLib, Matcher } from "../types/index.js"; | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* {@link Matcher}. | ||
* | ||
@@ -9,0 +9,0 @@ * ```tsx |
@@ -9,3 +9,3 @@ import { isDateInRange } from "./isDateInRange.js"; | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* {@link Matcher}. | ||
* | ||
@@ -12,0 +12,0 @@ * ```tsx |
{ | ||
"name": "react-day-picker", | ||
"version": "9.0.0-rc.5", | ||
"version": "9.0.0-rc.6", | ||
"description": "Customizable Date Picker for React", | ||
@@ -147,3 +147,3 @@ "author": "Giampaolo Bellavite <io@gpbl.dev>", | ||
"@types/react-dom": "^18.3.0", | ||
"@typescript-eslint/eslint-plugin": "^7.15.0", | ||
"@typescript-eslint/eslint-plugin": "^7.16.1", | ||
"@typescript-eslint/parser": "^7.16.0", | ||
@@ -158,3 +158,3 @@ "date-fns": "^3.6.0", | ||
"eslint-plugin-prettier": "^5.1.3", | ||
"eslint-plugin-react": "^7.34.2", | ||
"eslint-plugin-react": "^7.34.4", | ||
"eslint-plugin-react-hooks": "^4.6.2", | ||
@@ -166,3 +166,3 @@ "eslint-plugin-require-extensions": "^0.1.3", | ||
"mockdate": "^3.0.5", | ||
"prettier": "^3.3.2", | ||
"prettier": "^3.3.3", | ||
"prettier-plugin-jsdoc": "^1.3.0", | ||
@@ -172,5 +172,5 @@ "react": "^18.3.1", | ||
"react-dom": "^18.3.1", | ||
"ts-jest": "^29.1.4", | ||
"ts-jest": "^29.2.2", | ||
"ts-node": "^10.9.2", | ||
"tslib": "^2.6.2", | ||
"tslib": "^2.6.3", | ||
"typescript": "~5.5.3", | ||
@@ -177,0 +177,0 @@ "typescript-css-modules": "^1.0.4" |
@@ -5,5 +5,5 @@ import { FormatOptions, dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
* The default formatter for the caption element. As default, it returns the | ||
* month and year. | ||
* Format the caption of the month. | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Formatters | ||
@@ -10,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -6,5 +6,5 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
/** | ||
* The default formatter for the day grid cell element. As default, it returns | ||
* the date of the day. | ||
* Format the day date shown in the day cell. | ||
* | ||
* @defaultValue `d` (e.g. "1") | ||
* @group Formatters | ||
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -5,5 +5,5 @@ import type { DateFnsMonth } from "../lib/dateLib.js"; | ||
/** | ||
* The default formatter for the month dropdown option. As default, it returns | ||
* the month name. | ||
* Format the month number for the dropdown option label. | ||
* | ||
* @defaultValue `monthNumber.toString()` | ||
* @group Formatters | ||
@@ -10,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -6,5 +6,5 @@ import type { FormatOptions } from "../lib/dateLib.js"; | ||
/** | ||
* The default formatter for the name of the weekday. As default, it returns the | ||
* short name of the weekday (e.g. "Mo"). | ||
* Format the weekday name to be displayed in the weekdays header. | ||
* | ||
* @defaultValue `cccccc` (e.g. "Mo" for Monday) | ||
* @group Formatters | ||
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers. As default, it returns the week | ||
* number with a leading zero if the week number is less than 10. | ||
* Format the week number. | ||
* | ||
* @param weekNumber - The week number to format. | ||
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers | ||
* @group Formatters | ||
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the week numbers header. As default, it returns an | ||
* empty string. | ||
* Format the week number header. | ||
* | ||
* @defaultValue `""` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
/** | ||
* The default formatter for the Year dropdown option. As default, it returns | ||
* the year. | ||
* Format the years for the dropdown option label. | ||
* | ||
* @defaultValue `year.toString()` | ||
* @group Formatters | ||
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters |
@@ -13,3 +13,3 @@ import { getDefaultClassNames } from "./getDefaultClassNames"; | ||
disabled: "rdp-disabled", | ||
dropdown_nav: "rdp-dropdown_nav", | ||
dropdowns: "rdp-dropdowns", | ||
dropdown_root: "rdp-dropdown_root", | ||
@@ -16,0 +16,0 @@ dropdown: "rdp-dropdown", |
@@ -38,3 +38,3 @@ import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
if (monthsDiff < numberOfMonths ?? 1) { | ||
if (monthsDiff < numberOfMonths) { | ||
return undefined; | ||
@@ -41,0 +41,0 @@ } |
@@ -27,3 +27,3 @@ import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths ?? 1 : 1; | ||
const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
@@ -30,0 +30,0 @@ if (!calendarStartMonth) { |
@@ -6,3 +6,3 @@ import type { DateLib, LabelOptions } from "../index.js"; | ||
/** | ||
* Return an ARIA label for the day button. | ||
* The ARIA label for the day button. | ||
* | ||
@@ -12,2 +12,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g. | ||
* | ||
* @defaultValue The formatted date. | ||
* @group Labels | ||
@@ -14,0 +15,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -9,2 +9,3 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
* | ||
* @defaultValue `LLLL y` (e.g. "November 2022") | ||
* @group Labels | ||
@@ -11,0 +12,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the months dropdown element. | ||
* The ARIA label for the months dropdown. | ||
* | ||
* @defaultValue `"Choose the Month"` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
/** | ||
* Return an ARIA label for the navigation toolbar, that will be announced when | ||
* entering it (optional). | ||
* The ARIA label for the navigation toolbar. | ||
* | ||
* @defaultValue `""` | ||
* @group Labels | ||
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for next month button. | ||
* | ||
* @defaultValue `"Go to the Next Month"` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for next month button. | ||
* The ARIA label for previous month button. | ||
* | ||
* @defaultValue `"Go to the Previous Month"` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -6,4 +6,5 @@ import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return he default ARIA label for the Weekday colum header. | ||
* The ARIA label for the Weekday column header. | ||
* | ||
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"` | ||
* @group Labels | ||
@@ -10,0 +11,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the week number element. | ||
* The ARIA label for the week number cell (the first cell in the row). | ||
* | ||
* @defaultValue `Week ${weekNumber}` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the week number header element. | ||
* The ARIA label for the week number header element. | ||
* | ||
* @defaultValue `"Week Number"` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the years dropdown. | ||
* The ARIA label for the years dropdown. | ||
* | ||
* @defaultValue `"Choose the Year"` | ||
* @group Labels | ||
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels |
@@ -11,3 +11,3 @@ declare const styles: { | ||
readonly "rdp-dropdown": string; | ||
readonly "rdp-dropdown_nav": string; | ||
readonly "rdp-dropdowns": string; | ||
readonly "rdp-dropdown_root": string; | ||
@@ -14,0 +14,0 @@ readonly "rdp-focusable": string; |
@@ -88,3 +88,3 @@ import React from "react"; | ||
modifiersStyles?: ModifiersStyles; | ||
/** A unique id to replace the React generated id. Used for ARIA labels. */ | ||
/** A unique id to add to the root element. */ | ||
id?: string; | ||
@@ -228,3 +228,3 @@ /** | ||
*/ | ||
hideWeekdayRow?: boolean; | ||
hideWeekdays?: boolean; | ||
/** | ||
@@ -263,3 +263,3 @@ * Show the outside days (days falling in the next or the previous month). | ||
*/ | ||
components?: CustomComponents; | ||
components?: Partial<CustomComponents>; | ||
/** | ||
@@ -266,0 +266,0 @@ * Add a footer to the calendar, acting as live region. |
@@ -45,6 +45,49 @@ /* eslint-disable @typescript-eslint/ban-types */ | ||
* | ||
* @see https://github.com/gpbl/react-day-picker/blob/main/src/components/custom-components.ts | ||
* @see https://daypicker.dev/next/guides/custom-components | ||
*/ | ||
export type CustomComponents = { | ||
[key in keyof typeof components]?: (typeof components)[key]; | ||
/** Render any button element in DayPicker. */ | ||
Button: typeof components.Button; | ||
/** Render the chevron icon used in the navigation buttons and dropdowns. */ | ||
Chevron: typeof components.Chevron; | ||
/** Render the caption label of the month grid. */ | ||
CaptionLabel: typeof components.CaptionLabel; | ||
/** Render the day cell in the month grid. */ | ||
Day: typeof components.Day; | ||
/** Render the button containing the day in the day cell. */ | ||
DayButton: typeof components.DayButton; | ||
/** Render the dropdown element to select years and months. */ | ||
Dropdown: typeof components.Dropdown; | ||
/** Render the container of the dropdowns. */ | ||
DropdownNav: typeof components.DropdownNav; | ||
/** Render the footer element announced by screen readers. */ | ||
Footer: typeof components.Footer; | ||
/** Render the container of the MonthGrid. */ | ||
Month: typeof components.Month; | ||
/** Render the caption of the month grid. */ | ||
MonthCaption: typeof components.MonthCaption; | ||
/** Render the grid of days in a month. */ | ||
MonthGrid: typeof components.MonthGrid; | ||
/** Wrapper of the month grids. */ | ||
Months: typeof components.Months; | ||
/** Render the navigation element with the next and previous buttons. */ | ||
Nav: typeof components.Nav; | ||
/** Render the `<option>` HTML element in the dropdown. */ | ||
Option: typeof components.Option; | ||
/** Render the root element of the calendar. */ | ||
Root: typeof components.Root; | ||
/** Render the select element in the dropdowns. */ | ||
Select: typeof components.Select; | ||
/** Render the weeks section in the month grid. */ | ||
Weeks: typeof components.Weeks; | ||
/** Render the week rows. */ | ||
Week: typeof components.Week; | ||
/** Render the weekday name in the header. */ | ||
Weekday: typeof components.Weekday; | ||
/** Render the row containing the week days. */ | ||
Weekdays: typeof components.Weekdays; | ||
/** Render the cell with the number of the week. */ | ||
WeekNumber: typeof components.WeekNumber; | ||
/** Render the header of the week number column. */ | ||
WeekNumberHeader: typeof components.WeekNumberHeader; | ||
}; | ||
@@ -51,0 +94,0 @@ |
@@ -29,3 +29,3 @@ import type { CustomComponents, ClassNames, Styles } from "./types/index.js"; | ||
/** The container of the dropdown navigation (when enabled). */ | ||
DropdownNav = "dropdown_nav", | ||
Dropdowns = "dropdowns", | ||
/** The dropdown element to select for years and months. */ | ||
@@ -32,0 +32,0 @@ Dropdown = "dropdown", |
@@ -20,5 +20,4 @@ import { useState } from "react"; | ||
focused: CalendarDay | undefined; | ||
/** The date that is target of the focus when tabbing into the month grid. */ | ||
// focusTarget: CalendarDay | undefined; | ||
/** Check if the given day is the focus target when entering the calendar. */ | ||
isFocusTarget: (day: CalendarDay) => boolean; | ||
@@ -34,22 +33,4 @@ | ||
blur: () => void; | ||
/** Focus the day after the focused day. */ | ||
focusDayAfter: () => void; | ||
/** Focus the day before the focused day. */ | ||
focusDayBefore: () => void; | ||
/** Focus the day in the week before the focused day. */ | ||
focusWeekBefore: () => void; | ||
/** Focus the day in the week after the focused day. */ | ||
focusWeekAfter: () => void; | ||
/* Focus the day in the month before the focused day. */ | ||
focusMonthBefore: () => void; | ||
/* Focus the day in the month after the focused day. */ | ||
focusMonthAfter: () => void; | ||
/* Focus the day in the year before the focused day. */ | ||
focusYearBefore: () => void; | ||
/* Focus the day in the year after the focused day. */ | ||
focusYearAfter: () => void; | ||
/* Focus the day at the start of the week of the focused day. */ | ||
focusStartOfWeek: () => void; | ||
/* Focus the day at the end of the week of focused day. */ | ||
focusEndOfWeek: () => void; | ||
moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void; | ||
}; | ||
@@ -121,12 +102,3 @@ | ||
blur, | ||
focusDayAfter: () => moveFocus("day", "after"), | ||
focusDayBefore: () => moveFocus("day", "before"), | ||
focusWeekAfter: () => moveFocus("week", "after"), | ||
focusWeekBefore: () => moveFocus("week", "before"), | ||
focusMonthBefore: () => moveFocus("month", "before"), | ||
focusMonthAfter: () => moveFocus("month", "after"), | ||
focusYearBefore: () => moveFocus("year", "before"), | ||
focusYearAfter: () => moveFocus("year", "after"), | ||
focusStartOfWeek: () => moveFocus("startOfWeek", "before"), | ||
focusEndOfWeek: () => moveFocus("endOfWeek", "after") | ||
moveFocus | ||
}; | ||
@@ -133,0 +105,0 @@ |
@@ -22,3 +22,3 @@ import type { DateLib, Matcher } from "../types/index.js"; | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* {@link Matcher}. | ||
* | ||
@@ -25,0 +25,0 @@ * ```tsx |
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
991719
19209