react-day-picker
Advanced tools
Comparing version 9.0.0-rc.2 to 9.0.0-rc.3
@@ -1,2 +0,2 @@ | ||
import type { DateLib } from "../types"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -11,3 +11,7 @@ * Represent the day displayed in the calendar. | ||
constructor(date: Date, displayMonth: Date, dateLib?: DateLib); | ||
/** The utility functions to manipulate dates. */ | ||
/** | ||
* The utility functions to manipulate dates. | ||
* | ||
* @private | ||
*/ | ||
readonly dateLib: DateLib; | ||
@@ -31,2 +35,4 @@ /** | ||
readonly date: Date; | ||
/** A unique identifier for the day. */ | ||
readonly uid: string; | ||
/** | ||
@@ -33,0 +39,0 @@ * Check if the day is the same as the given day: considering if it is in the |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.CalendarDay = void 0; | ||
const lib_1 = require("../lib"); | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -13,3 +13,3 @@ * Represent the day displayed in the calendar. | ||
class CalendarDay { | ||
constructor(date, displayMonth, dateLib = lib_1.dateLib) { | ||
constructor(date, displayMonth, dateLib = index_js_1.dateLib) { | ||
this.date = date; | ||
@@ -19,2 +19,6 @@ this.displayMonth = displayMonth; | ||
this.dateLib = dateLib; | ||
const { format } = dateLib; | ||
this.uid = | ||
format(date, "yyyyMMdd") + | ||
(this.outside ? `-` + format(displayMonth, "yyyyMMdd") : ""); | ||
} | ||
@@ -21,0 +25,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
import { CalendarWeek } from "./CalendarWeek"; | ||
import { CalendarWeek } from "./CalendarWeek.js"; | ||
/** Represent a month in a calendar year. Contains the weeks within the month. */ | ||
@@ -3,0 +3,0 @@ export declare class CalendarMonth { |
@@ -1,2 +0,2 @@ | ||
import { CalendarDay } from "./CalendarDay"; | ||
import { CalendarDay } from "./CalendarDay.js"; | ||
/** Represent a week in a calendar month. */ | ||
@@ -3,0 +3,0 @@ export declare class CalendarWeek { |
@@ -1,3 +0,3 @@ | ||
export * from "./CalendarDay"; | ||
export * from "./CalendarMonth"; | ||
export * from "./CalendarWeek"; | ||
export * from "./CalendarDay.js"; | ||
export * from "./CalendarMonth.js"; | ||
export * from "./CalendarWeek.js"; |
@@ -17,5 +17,5 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./CalendarDay"), exports); | ||
__exportStar(require("./CalendarMonth"), exports); | ||
__exportStar(require("./CalendarWeek"), exports); | ||
__exportStar(require("./CalendarDay.js"), exports); | ||
__exportStar(require("./CalendarMonth.js"), exports); | ||
__exportStar(require("./CalendarWeek.js"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import React, { type ButtonHTMLAttributes } from "react"; | ||
import React from "react"; | ||
/** | ||
@@ -10,3 +10,3 @@ * Render the button elements in the calendar. | ||
*/ | ||
export declare function Button(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element; | ||
export declare function Button(props: JSX.IntrinsicElements["button"]): React.JSX.Element; | ||
export type ButtonProps = Parameters<typeof Button>[0]; |
@@ -6,3 +6,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Button = void 0; | ||
exports.Button = Button; | ||
const react_1 = __importDefault(require("react")); | ||
@@ -20,3 +20,2 @@ /** | ||
} | ||
exports.Button = Button; | ||
//# sourceMappingURL=Button.js.map |
@@ -8,7 +8,16 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Chevron(props: { | ||
className?: string; | ||
/** | ||
* The size of the chevron. | ||
* | ||
* @defaultValue 24 | ||
*/ | ||
size?: number; | ||
/** Set to `true` to disable the chevron. */ | ||
disabled?: boolean; | ||
/** The orientation of the chevron. */ | ||
orientation?: "up" | "down" | "left" | "right"; | ||
}): React.JSX.Element; |
@@ -6,6 +6,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Chevron = void 0; | ||
exports.Chevron = Chevron; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
/** | ||
@@ -17,14 +15,7 @@ * Render the chevron icon used in the navigation buttons and dropdowns. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Chevron(props) { | ||
const { size = 24, orientation = "left" } = props; | ||
const { classNames, disableNavigation } = (0, contexts_1.useProps)(); | ||
const svgClassName = [ | ||
classNames[UI_1.UI.Chevron], | ||
disableNavigation ? classNames[UI_1.ChevronFlag.disabled] : "" | ||
] | ||
.join(" ") | ||
.trim(); | ||
return (react_1.default.createElement("svg", { className: svgClassName, width: size, height: size, viewBox: "0 0 24 24" }, | ||
const { size = 24, orientation = "left", className } = props; | ||
return (react_1.default.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24" }, | ||
orientation === "up" && (react_1.default.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" })), | ||
@@ -35,3 +26,2 @@ orientation === "down" && (react_1.default.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" })), | ||
} | ||
exports.Chevron = Chevron; | ||
//# sourceMappingURL=Chevron.js.map |
@@ -1,19 +0,22 @@ | ||
export * from "./Button"; | ||
export * from "./Chevron"; | ||
export * from "./Day"; | ||
export * from "./DayDate"; | ||
export * from "./Dropdown"; | ||
export * from "./DropdownNav"; | ||
export * from "./Footer"; | ||
export * from "./Month"; | ||
export * from "./MonthCaption"; | ||
export * from "./Months"; | ||
export * from "./MonthsDropdown"; | ||
export * from "./Nav"; | ||
export * from "./Option"; | ||
export * from "./Select"; | ||
export * from "./Week"; | ||
export * from "./Weekday"; | ||
export * from "./Weekdays"; | ||
export * from "./WeekNumber"; | ||
export * from "./YearsDropdown"; | ||
export * from "./Button.js"; | ||
export * from "./Chevron.js"; | ||
export * from "./CaptionLabel.js"; | ||
export * from "./Day.js"; | ||
export * from "./DayButton.js"; | ||
export * from "./Dropdown.js"; | ||
export * from "./DropdownNav.js"; | ||
export * from "./Footer.js"; | ||
export * from "./Month.js"; | ||
export * from "./MonthCaption.js"; | ||
export * from "./MonthGrid.js"; | ||
export * from "./Months.js"; | ||
export * from "./Nav.js"; | ||
export * from "./Option.js"; | ||
export * from "./Root.js"; | ||
export * from "./Select.js"; | ||
export * from "./Weeks.js"; | ||
export * from "./Week.js"; | ||
export * from "./Weekday.js"; | ||
export * from "./Weekdays.js"; | ||
export * from "./WeekNumber.js"; | ||
export * from "./WeekNumberHeader.js"; |
@@ -17,21 +17,24 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./Button"), exports); | ||
__exportStar(require("./Chevron"), exports); | ||
__exportStar(require("./Day"), exports); | ||
__exportStar(require("./DayDate"), exports); | ||
__exportStar(require("./Dropdown"), exports); | ||
__exportStar(require("./DropdownNav"), exports); | ||
__exportStar(require("./Footer"), exports); | ||
__exportStar(require("./Month"), exports); | ||
__exportStar(require("./MonthCaption"), exports); | ||
__exportStar(require("./Months"), exports); | ||
__exportStar(require("./MonthsDropdown"), exports); | ||
__exportStar(require("./Nav"), exports); | ||
__exportStar(require("./Option"), exports); | ||
__exportStar(require("./Select"), exports); | ||
__exportStar(require("./Week"), exports); | ||
__exportStar(require("./Weekday"), exports); | ||
__exportStar(require("./Weekdays"), exports); | ||
__exportStar(require("./WeekNumber"), exports); | ||
__exportStar(require("./YearsDropdown"), exports); | ||
__exportStar(require("./Button.js"), exports); | ||
__exportStar(require("./Chevron.js"), exports); | ||
__exportStar(require("./CaptionLabel.js"), exports); | ||
__exportStar(require("./Day.js"), exports); | ||
__exportStar(require("./DayButton.js"), exports); | ||
__exportStar(require("./Dropdown.js"), exports); | ||
__exportStar(require("./DropdownNav.js"), exports); | ||
__exportStar(require("./Footer.js"), exports); | ||
__exportStar(require("./Month.js"), exports); | ||
__exportStar(require("./MonthCaption.js"), exports); | ||
__exportStar(require("./MonthGrid.js"), exports); | ||
__exportStar(require("./Months.js"), exports); | ||
__exportStar(require("./Nav.js"), exports); | ||
__exportStar(require("./Option.js"), exports); | ||
__exportStar(require("./Root.js"), exports); | ||
__exportStar(require("./Select.js"), exports); | ||
__exportStar(require("./Weeks.js"), exports); | ||
__exportStar(require("./Week.js"), exports); | ||
__exportStar(require("./Weekday.js"), exports); | ||
__exportStar(require("./Weekdays.js"), exports); | ||
__exportStar(require("./WeekNumber.js"), exports); | ||
__exportStar(require("./WeekNumberHeader.js"), exports); | ||
//# sourceMappingURL=custom-components.js.map |
import React from "react"; | ||
import type { ReactNode } from "react"; | ||
import type { CalendarDay } from "../classes"; | ||
import type { Modifiers } from "../types"; | ||
import type { CalendarDay } from "../classes/index.js"; | ||
import type { Modifiers } from "../types/index.js"; | ||
/** | ||
@@ -19,5 +18,3 @@ * Render the gridcell of a day in the calendar and handle the interaction and | ||
modifiers: Modifiers; | ||
children?: ReactNode; | ||
rootProps: Pick<JSX.IntrinsicElements["div"], "className" | "style" | "tabIndex" | "aria-colindex" | "aria-disabled" | "aria-hidden" | "aria-label" | "aria-selected" | "onClick" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "ref" | "role">; | ||
}): React.JSX.Element; | ||
} & JSX.IntrinsicElements["td"]): React.JSX.Element; | ||
export type DayProps = Parameters<typeof Day>[0]; |
@@ -6,3 +6,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Day = void 0; | ||
exports.Day = Day; | ||
const react_1 = __importDefault(require("react")); | ||
@@ -21,5 +21,5 @@ /** | ||
function Day(props) { | ||
return react_1.default.createElement("div", { ...props.rootProps }, props.children); | ||
const { day, modifiers, ...tdProps } = props; | ||
return react_1.default.createElement("td", { ...tdProps }); | ||
} | ||
exports.Day = Day; | ||
//# sourceMappingURL=Day.js.map |
@@ -1,2 +0,4 @@ | ||
import React, { type SelectHTMLAttributes } from "react"; | ||
import React from "react"; | ||
import { UI } from "../UI.js"; | ||
import type { ClassNames, CustomComponents } from "../types/index.js"; | ||
/** An option to use in the dropdown. Maps to the `<option>` HTML element. */ | ||
@@ -20,8 +22,9 @@ export type DropdownOption = { | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Dropdown(props: { | ||
components: Pick<Required<CustomComponents>, "Select" | "Option" | "Chevron">; | ||
classNames: Pick<ClassNames, UI.DropdownRoot | UI.Dropdown | UI.CaptionLabel | UI.Chevron>; | ||
options?: DropdownOption[] | undefined; | ||
rootClassName?: string; | ||
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element; | ||
} & Omit<JSX.IntrinsicElements["select"], "children">): React.JSX.Element; | ||
export type DropdownProps = Parameters<typeof Dropdown>[0]; |
@@ -6,9 +6,5 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Dropdown = void 0; | ||
exports.Dropdown = Dropdown; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
const Chevron_1 = require("./Chevron"); | ||
const Option_1 = require("./Option"); | ||
const Select_1 = require("./Select"); | ||
const UI_js_1 = require("../UI.js"); | ||
/** | ||
@@ -20,20 +16,15 @@ * Render a dropdown component to use in the navigation bar. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Dropdown(props) { | ||
const { options, rootClassName, className, ...selectProps } = props; | ||
const { classNames, components } = (0, contexts_1.useProps)(); | ||
const cssClassRoot = [classNames[UI_1.UI.DropdownRoot], rootClassName].join(" "); | ||
const cssClassSelect = [classNames[UI_1.UI.Dropdown], className].join(" "); | ||
const Select = components?.Select ?? Select_1.Select; | ||
const Option = components?.Option ?? Option_1.Option; | ||
const Chevron = components?.Chevron ?? Chevron_1.Chevron; | ||
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 }, | ||
react_1.default.createElement(Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (react_1.default.createElement(Option, { key: value, value: value, disabled: disabled }, label)))), | ||
react_1.default.createElement("span", { className: classNames[UI_1.UI.CaptionLabel], "aria-hidden": true }, | ||
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)))), | ||
react_1.default.createElement("span", { className: classNames[UI_js_1.UI.CaptionLabel], "aria-hidden": true }, | ||
selectedOption?.label, | ||
react_1.default.createElement(Chevron, { orientation: "down", size: 18 })))); | ||
react_1.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI_js_1.UI.Chevron] })))); | ||
} | ||
exports.Dropdown = Dropdown; | ||
//# sourceMappingURL=Dropdown.js.map |
import React from "react"; | ||
import type { CalendarMonth } from "../classes"; | ||
/** | ||
* Render the dropdowns to navigate between months. | ||
* Render the the navigation dropdowns. | ||
* | ||
@@ -9,14 +8,5 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function DropdownNav(props: { | ||
/** The month where the dropdown navigation is displayed. */ | ||
month: CalendarMonth; | ||
/** Whether the user can change the month. */ | ||
showMonths?: boolean; | ||
/** Whether the user can change the year. */ | ||
showYears?: boolean; | ||
/** The index where this month is displayed. */ | ||
index: number; | ||
}): React.JSX.Element; | ||
export declare function DropdownNav(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type DropdownNavProps = Parameters<typeof DropdownNav>[0]; |
@@ -6,10 +6,6 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DropdownNav = void 0; | ||
exports.DropdownNav = DropdownNav; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
const MonthsDropdown_1 = require("./MonthsDropdown"); | ||
const YearsDropdown_1 = require("./YearsDropdown"); | ||
/** | ||
* Render the dropdowns to navigate between months. | ||
* Render the the navigation dropdowns. | ||
* | ||
@@ -19,11 +15,7 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function DropdownNav(props) { | ||
const { classNames, styles, formatters: { formatMonthDropdown, formatYearDropdown } } = (0, contexts_1.useProps)(); | ||
return (react_1.default.createElement("div", { className: classNames[UI_1.UI.DropdownNav], style: styles?.[UI_1.UI.DropdownNav] }, | ||
props.showMonths ? (react_1.default.createElement(MonthsDropdown_1.MonthsDropdown, { month: props.month })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(props.month.date.getMonth()))), | ||
props.showYears ? (react_1.default.createElement(YearsDropdown_1.YearsDropdown, { month: props.month })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(props.month.date.getFullYear()))))); | ||
return react_1.default.createElement("div", { ...props }); | ||
} | ||
exports.DropdownNav = DropdownNav; | ||
//# sourceMappingURL=DropdownNav.js.map |
@@ -1,2 +0,2 @@ | ||
import React, { type HTMLProps } from "react"; | ||
import React from "react"; | ||
/** | ||
@@ -8,5 +8,5 @@ * Component wrapping the footer. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Footer(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element; | ||
export declare function Footer(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type FooterProps = Parameters<typeof Footer>[0]; |
@@ -6,3 +6,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Footer = void 0; | ||
exports.Footer = Footer; | ||
const react_1 = __importDefault(require("react")); | ||
@@ -15,8 +15,7 @@ /** | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Footer(props) { | ||
return react_1.default.createElement("div", { ...props }, props.children); | ||
return react_1.default.createElement("div", { ...props }); | ||
} | ||
exports.Footer = Footer; | ||
//# sourceMappingURL=Footer.js.map |
import React from "react"; | ||
import type { CalendarMonth } from "../classes/CalendarMonth"; | ||
import type { CalendarMonth } from "../classes/CalendarMonth.js"; | ||
/** | ||
@@ -10,10 +10,10 @@ * Render the grid with the weekday header row and the weeks for the given | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Month(props: { | ||
/** The month where the grid is displayed. */ | ||
month: CalendarMonth; | ||
calendarMonth: CalendarMonth; | ||
/** The index where this month is displayed. */ | ||
index: number; | ||
}): React.JSX.Element; | ||
displayIndex: number; | ||
} & JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthProps = Parameters<typeof Month>[0]; |
@@ -6,9 +6,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Month = void 0; | ||
exports.Month = Month; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
const MonthCaption_1 = require("./MonthCaption"); | ||
const Week_1 = require("./Week"); | ||
const Weekdays_1 = require("./Weekdays"); | ||
/** | ||
@@ -21,19 +16,8 @@ * Render the grid with the weekday header row and the weeks for the given | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Month(props) { | ||
const { id, mode, hideWeekdayRow, components, classNames, styles } = (0, contexts_1.useProps)(); | ||
const reactId = react_1.default.useId(); | ||
const captionId = id ? `${id}-caption-${props.index}` : reactId; | ||
const gridId = id ? `${id}-grid-${props.index}` : reactId; | ||
const Weekdays = components?.Weekdays ?? Weekdays_1.Weekdays; | ||
const MonthCaption = components?.MonthCaption ?? MonthCaption_1.MonthCaption; | ||
const Week = components?.Week ?? Week_1.Week; | ||
return (react_1.default.createElement("div", { className: classNames[UI_1.UI.MonthWrapper], style: styles?.[UI_1.UI.MonthWrapper] }, | ||
react_1.default.createElement(MonthCaption, { id: captionId, month: props.month, index: props.index }), | ||
react_1.default.createElement("div", { id: gridId, role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-labelledby": captionId, className: classNames[UI_1.UI.Month], style: styles?.[UI_1.UI.Month] }, | ||
react_1.default.createElement(Weekdays, null), | ||
react_1.default.createElement("div", { role: "rowgroup", className: classNames[UI_1.UI.Weeks], style: styles?.[UI_1.UI.Weeks] }, props.month.weeks.map((week, i) => (react_1.default.createElement(Week, { key: week.weekNumber, week: week, "aria-rowindex": i + (hideWeekdayRow ? 1 : 2) }))))))); | ||
const { calendarMonth, displayIndex, ...divProps } = props; | ||
return react_1.default.createElement("div", { ...divProps }, props.children); | ||
} | ||
exports.Month = Month; | ||
//# sourceMappingURL=Month.js.map |
import React from "react"; | ||
import type { CalendarMonth } from "../classes"; | ||
import type { CalendarMonth } from "../classes/index.js"; | ||
/** | ||
@@ -9,12 +9,10 @@ * Render the caption of a month in the calendar. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function MonthCaption(props: { | ||
/** The month where the grid is displayed. */ | ||
month: CalendarMonth; | ||
/** Used for the aria-label. */ | ||
id: string; | ||
calendarMonth: CalendarMonth; | ||
/** The index where this month is displayed. */ | ||
index: number; | ||
}): React.JSX.Element; | ||
displayIndex: number; | ||
} & JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthCaptionProps = Parameters<typeof MonthCaption>[0]; |
@@ -6,7 +6,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.MonthCaption = void 0; | ||
exports.MonthCaption = MonthCaption; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
const DropdownNav_1 = require("./DropdownNav"); | ||
/** | ||
@@ -18,9 +15,8 @@ * Render the caption of a month in the calendar. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function MonthCaption(props) { | ||
const { classNames, captionLayout, dateLib, formatters: { formatCaption }, labels: { labelCaption }, locale, styles } = (0, contexts_1.useProps)(); | ||
return (react_1.default.createElement("div", { id: props.id, className: classNames[UI_1.UI.MonthCaption], style: styles?.[UI_1.UI.MonthCaption] }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(DropdownNav_1.DropdownNav, { month: props.month, index: props.index, showMonths: captionLayout === "dropdown" || captionLayout === "dropdown-months", showYears: captionLayout === "dropdown" || captionLayout === "dropdown-years" })) : (react_1.default.createElement("span", { className: classNames[UI_1.UI.CaptionLabel], role: "status", "aria-live": "polite", "aria-label": labelCaption(props.month.date, { locale }, dateLib) ?? undefined }, formatCaption(props.month.date, { locale }, dateLib))))); | ||
const { calendarMonth, displayIndex, ...divProps } = props; | ||
return react_1.default.createElement("div", { ...divProps }); | ||
} | ||
exports.MonthCaption = MonthCaption; | ||
//# sourceMappingURL=MonthCaption.js.map |
import React from "react"; | ||
import type { HTMLProps } from "react"; | ||
/** | ||
* Component wrapping the month grids. | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Months(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element; | ||
export declare function Months(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthsProps = Parameters<typeof Months>[0]; |
@@ -6,3 +6,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Months = void 0; | ||
exports.Months = Months; | ||
const react_1 = __importDefault(require("react")); | ||
@@ -12,11 +12,8 @@ /** | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Months(props) { | ||
return react_1.default.createElement("div", { ...props }, props.children); | ||
return react_1.default.createElement("div", { ...props }); | ||
} | ||
exports.Months = Months; | ||
//# sourceMappingURL=Months.js.map |
import React from "react"; | ||
/** | ||
* Render the navigation buttons to change the month. | ||
* Render the toolbar with the navigation button. | ||
* | ||
@@ -8,4 +8,5 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Nav(): React.JSX.Element; | ||
export declare function Nav(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type NavProps = Parameters<typeof Nav>[0]; |
@@ -6,10 +6,6 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Nav = void 0; | ||
exports.Nav = Nav; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
const Button_1 = require("./Button"); | ||
const Chevron_1 = require("./Chevron"); | ||
/** | ||
* Render the navigation buttons to change the month. | ||
* Render the toolbar with the navigation button. | ||
* | ||
@@ -19,28 +15,7 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Nav() { | ||
const { classNames, styles, labels: { labelNext, labelPrevious }, locale, components, id, onNextClick, onPrevClick } = (0, contexts_1.useProps)(); | ||
const calendar = (0, contexts_1.useCalendar)(); | ||
const handlePreviousClick = () => { | ||
if (!calendar.previousMonth) | ||
return; | ||
calendar.goToPreviousMonth(); | ||
onPrevClick?.(calendar.previousMonth); | ||
}; | ||
const handleNextClick = () => { | ||
if (!calendar.nextMonth) | ||
return; | ||
calendar.goToNextMonth(); | ||
onNextClick?.(calendar.nextMonth); | ||
}; | ||
const Button = components?.Button ?? Button_1.Button; | ||
const Chevron = components?.Chevron ?? Chevron_1.Chevron; | ||
return (react_1.default.createElement("div", { role: "toolbar", className: classNames[UI_1.UI.Nav], style: styles?.[UI_1.UI.Nav] }, | ||
react_1.default.createElement(Button, { type: "button", name: "previous-month", className: classNames[UI_1.UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(calendar.previousMonth, { locale }), "aria-controls": id, onClick: handlePreviousClick }, | ||
react_1.default.createElement(Chevron, null)), | ||
react_1.default.createElement(Button, { type: "button", name: "next-month", className: classNames[UI_1.UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, { locale }), "aria-controls": id, onClick: handleNextClick }, | ||
react_1.default.createElement(Chevron, { orientation: "right" })))); | ||
function Nav(props) { | ||
return react_1.default.createElement("div", { ...props }); | ||
} | ||
exports.Nav = Nav; | ||
//# sourceMappingURL=Nav.js.map |
import React from "react"; | ||
import type { OptionHTMLAttributes } from "react"; | ||
/** | ||
@@ -9,5 +8,5 @@ * Render the `option` element. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element; | ||
export declare function Option(props: JSX.IntrinsicElements["option"]): React.JSX.Element; | ||
export type OptionProps = Parameters<typeof Option>[0]; |
@@ -6,3 +6,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Option = void 0; | ||
exports.Option = Option; | ||
const react_1 = __importDefault(require("react")); | ||
@@ -15,3 +15,3 @@ /** | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -21,3 +21,2 @@ function Option(props) { | ||
} | ||
exports.Option = Option; | ||
//# sourceMappingURL=Option.js.map |
import React from "react"; | ||
import type { SelectHTMLAttributes } from "react"; | ||
/** | ||
@@ -9,5 +8,5 @@ * Render the `select` element. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element; | ||
export declare function Select(props: JSX.IntrinsicElements["select"]): React.JSX.Element; | ||
export type SelectProps = Parameters<typeof Select>[0]; |
@@ -6,3 +6,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Select = void 0; | ||
exports.Select = Select; | ||
const react_1 = __importDefault(require("react")); | ||
@@ -15,3 +15,3 @@ /** | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -21,3 +21,2 @@ function Select(props) { | ||
} | ||
exports.Select = Select; | ||
//# sourceMappingURL=Select.js.map |
import React from "react"; | ||
import type { CalendarWeek } from "../classes"; | ||
import type { CalendarWeek } from "../classes/index.js"; | ||
/** | ||
@@ -9,8 +9,7 @@ * Render a row in the calendar, with the days and the week number. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Week(props: { | ||
["aria-rowindex"]: number; | ||
week: CalendarWeek; | ||
}): React.JSX.Element; | ||
} & JSX.IntrinsicElements["tr"]): React.JSX.Element; | ||
export type WeekProps = Parameters<typeof Week>[0]; |
@@ -6,8 +6,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Week = void 0; | ||
exports.Week = Week; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
const DayWrapper_1 = require("./DayWrapper"); | ||
const WeekNumber_1 = require("./WeekNumber"); | ||
/** | ||
@@ -19,12 +15,8 @@ * Render a row in the calendar, with the days and the week number. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Week(props) { | ||
const { styles, classNames, showWeekNumber, components, dateLib: { getUnixTime } } = (0, contexts_1.useProps)(); | ||
const WeekNumber = components?.WeekNumber ?? WeekNumber_1.WeekNumber; | ||
return (react_1.default.createElement("div", { role: "row", "aria-rowindex": props["aria-rowindex"], className: classNames[UI_1.UI.Week], style: styles?.[UI_1.UI.Week] }, | ||
showWeekNumber && react_1.default.createElement(WeekNumber, { week: props.week }), | ||
props.week.days.map((day, i) => (react_1.default.createElement(DayWrapper_1.DayWrapper, { day: day, "aria-colindex": showWeekNumber ? i + 2 : i + 1, key: getUnixTime(day.date) }))))); | ||
const { week, ...trProps } = props; | ||
return react_1.default.createElement("tr", { ...trProps }); | ||
} | ||
exports.Week = Week; | ||
//# sourceMappingURL=Week.js.map |
@@ -8,9 +8,5 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Weekday(props: { | ||
["aria-colindex"]?: number | undefined; | ||
["aria-label"]?: string | undefined; | ||
weekday?: Date; | ||
}): React.JSX.Element; | ||
export declare function Weekday(props: JSX.IntrinsicElements["th"]): React.JSX.Element; | ||
export type WeekdayProps = Parameters<typeof Weekday>[0]; |
@@ -6,6 +6,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Weekday = void 0; | ||
exports.Weekday = Weekday; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
/** | ||
@@ -17,14 +15,7 @@ * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.). | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Weekday(props) { | ||
const { classNames, dateLib, formatters: { formatWeekdayName }, labels: { labelWeekday, labelWeekNumberHeader }, locale, hideWeekdayRow, styles } = (0, contexts_1.useProps)(); | ||
return (react_1.default.createElement("span", { role: "columnheader", "aria-colindex": props["aria-colindex"], "aria-label": props.weekday | ||
? labelWeekday(props.weekday, { locale }, dateLib) | ||
: labelWeekNumberHeader({ locale }), className: classNames[UI_1.UI.Weekday], style: styles?.[UI_1.UI.Weekday] }, !hideWeekdayRow && | ||
(props.weekday | ||
? formatWeekdayName(props.weekday, { locale }, dateLib) | ||
: "#"))); | ||
return react_1.default.createElement("th", { ...props }); | ||
} | ||
exports.Weekday = Weekday; | ||
//# sourceMappingURL=Weekday.js.map |
@@ -8,4 +8,5 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Weekdays(): React.JSX.Element; | ||
export declare function Weekdays(props: JSX.IntrinsicElements["tr"]): React.JSX.Element; | ||
export type WeekdaysProps = Parameters<typeof Weekdays>[0]; |
@@ -6,8 +6,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Weekdays = void 0; | ||
exports.Weekdays = Weekdays; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
const getWeekdays_1 = require("../helpers/getWeekdays"); | ||
const Weekday_1 = require("./Weekday"); | ||
/** | ||
@@ -19,13 +15,8 @@ * Render the row with the weekday names. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
function Weekdays() { | ||
const { classNames, components, dateLib, hideWeekdayRow, ISOWeek, locale, showWeekNumber, styles, weekStartsOn } = (0, contexts_1.useProps)(); | ||
const weekdays = (0, getWeekdays_1.getWeekdays)(locale, weekStartsOn, ISOWeek, dateLib); | ||
const Weekday = components?.Weekday ?? Weekday_1.Weekday; | ||
return (react_1.default.createElement("div", { role: "row", hidden: hideWeekdayRow, "aria-rowindex": 1, style: styles?.[UI_1.UI.Weekdays], className: classNames[UI_1.UI.Weekdays], onClick: (e) => e.stopPropagation() }, | ||
showWeekNumber && react_1.default.createElement(Weekday, { "aria-colindex": 1 }), | ||
weekdays.map((weekday, i) => (react_1.default.createElement(Weekday, { key: i, weekday: weekday, "aria-colindex": showWeekNumber ? i + 2 : i + 1 }))))); | ||
function Weekdays(props) { | ||
return (react_1.default.createElement("thead", null, | ||
react_1.default.createElement("tr", { ...props }))); | ||
} | ||
exports.Weekdays = Weekdays; | ||
//# sourceMappingURL=Weekdays.js.map |
import React from "react"; | ||
import type { CalendarWeek } from "../classes"; | ||
import type { CalendarWeek } from "../classes/index.js"; | ||
/** | ||
@@ -12,4 +12,5 @@ * Render the cell with the number of the week. | ||
export declare function WeekNumber(props: { | ||
/** The week to render. */ | ||
week: CalendarWeek; | ||
}): React.JSX.Element; | ||
} & JSX.IntrinsicElements["td"]): React.JSX.Element; | ||
export type WeekNumberProps = Parameters<typeof WeekNumber>[0]; |
@@ -6,6 +6,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.WeekNumber = void 0; | ||
exports.WeekNumber = WeekNumber; | ||
const react_1 = __importDefault(require("react")); | ||
const UI_1 = require("../UI"); | ||
const contexts_1 = require("../contexts"); | ||
/** | ||
@@ -20,10 +18,5 @@ * Render the cell with the number of the week. | ||
function WeekNumber(props) { | ||
const { classNames, formatters: { formatWeekNumber }, labels: { labelWeekNumber }, locale, styles, onWeekNumberClick } = (0, contexts_1.useProps)(); | ||
const isInteractive = Boolean(onWeekNumberClick); | ||
return (react_1.default.createElement("div", { role: "rowheader", "aria-colindex": 1, "aria-label": labelWeekNumber(props.week.weekNumber, { locale }), className: [ | ||
classNames[UI_1.UI.WeekNumber], | ||
isInteractive ? classNames[UI_1.WeekNumberFlag.week_number_interactive] : "" | ||
].join(" "), style: styles?.[UI_1.UI.WeekNumber], tabIndex: isInteractive ? 0 : undefined, onClick: (e) => onWeekNumberClick?.(props.week.weekNumber, props.week.days.map((day) => day.date), e) }, formatWeekNumber(props.week.weekNumber))); | ||
const { week, ...tdProps } = props; | ||
return react_1.default.createElement("td", { ...tdProps }); | ||
} | ||
exports.WeekNumber = WeekNumber; | ||
//# sourceMappingURL=WeekNumber.js.map |
import React from "react"; | ||
import type { DayPickerProps } from "./types"; | ||
import type { DayPickerProps } from "./types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * Render the date picker calendar. |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
var desc = Object.getOwnPropertyDescriptor(m, k); | ||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { | ||
desc = { enumerable: true, get: function() { return m[k]; } }; | ||
} | ||
Object.defineProperty(o, k2, desc); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { | ||
Object.defineProperty(o, "default", { enumerable: true, value: v }); | ||
}) : function(o, v) { | ||
o["default"] = v; | ||
}); | ||
var __importStar = (this && this.__importStar) || function (mod) { | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); | ||
__setModuleDefault(result, mod); | ||
return result; | ||
}; | ||
var __importDefault = (this && this.__importDefault) || function (mod) { | ||
@@ -6,6 +29,21 @@ return (mod && mod.__esModule) ? mod : { "default": mod }; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DayPicker = void 0; | ||
exports.DayPicker = DayPicker; | ||
const react_1 = __importDefault(require("react")); | ||
const Calendar_1 = require("./components/Calendar"); | ||
const providers_1 = require("./contexts/providers"); | ||
const UI_js_1 = require("./UI.js"); | ||
const getClassNamesForModifiers_js_1 = require("./helpers/getClassNamesForModifiers.js"); | ||
const getComponents_js_1 = require("./helpers/getComponents.js"); | ||
const getDataAttributes_js_1 = require("./helpers/getDataAttributes.js"); | ||
const getDateLib_js_1 = require("./helpers/getDateLib.js"); | ||
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 getStyleForModifiers_js_1 = require("./helpers/getStyleForModifiers.js"); | ||
const getWeekdays_js_1 = require("./helpers/getWeekdays.js"); | ||
const defaultLabels = __importStar(require("./labels/index.js")); | ||
const useCalendar_js_1 = require("./useCalendar.js"); | ||
const useDayPicker_js_1 = require("./useDayPicker.js"); | ||
const useFocus_js_1 = require("./useFocus.js"); | ||
const useModifiers_js_1 = require("./useModifiers.js"); | ||
const useSelection_js_1 = require("./useSelection.js"); | ||
/** | ||
@@ -18,6 +56,196 @@ * Render the date picker calendar. | ||
function DayPicker(props) { | ||
return (react_1.default.createElement(providers_1.ContextProviders, { ...props }, | ||
react_1.default.createElement(Calendar_1.Calendar, null))); | ||
const reactId = react_1.default.useId(); | ||
const id = props.id ?? reactId; | ||
const dateLib = (0, getDateLib_js_1.getDateLib)(props.dateLib); | ||
const components = (0, getComponents_js_1.getComponents)(props.components); | ||
const formatters = (0, getFormatters_js_1.getFormatters)(props.formatters); | ||
const labels = { ...defaultLabels, ...props.labels }; | ||
const classNames = { ...(0, getDefaultClassNames_js_1.getDefaultClassNames)(), ...props.classNames }; | ||
const numberOfMonths = props.numberOfMonths ?? 1; | ||
const calendar = (0, useCalendar_js_1.useCalendar)(props, dateLib); | ||
const modifiers = (0, useModifiers_js_1.useModifiers)(props, calendar, dateLib); | ||
const selection = (0, useSelection_js_1.useSelection)(props, dateLib); | ||
const focus = (0, useFocus_js_1.useFocus)(props, calendar, modifiers, dateLib); | ||
const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = props; | ||
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters; | ||
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels; | ||
const weekdays = (0, getWeekdays_js_1.getWeekdays)(locale, weekStartsOn, ISOWeek, dateLib); | ||
const isInteractive = mode !== undefined || onDayClick !== undefined; | ||
const handlePreviousClick = () => { | ||
if (!calendar.previousMonth) | ||
return; | ||
calendar.goToPreviousMonth(); | ||
onPrevClick?.(calendar.previousMonth); | ||
}; | ||
const handleNextClick = () => { | ||
if (!calendar.nextMonth) | ||
return; | ||
calendar.goToNextMonth(); | ||
onNextClick?.(calendar.nextMonth); | ||
}; | ||
const handleDayClick = (day, m) => { | ||
return (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
selection?.handleSelect(day.date, m, e); | ||
focus.setFocused(day); | ||
onDayClick?.(day.date, m, e); | ||
}; | ||
}; | ||
const handleDayFocus = (day, m) => { | ||
return (e) => { | ||
focus.setFocused(day); | ||
onDayFocus?.(day.date, m, e); | ||
}; | ||
}; | ||
const handleDayBlur = (day, m) => { | ||
return (e) => { | ||
focus.blur(); | ||
onDayBlur?.(day.date, m, e); | ||
}; | ||
}; | ||
const handleDayKeyDown = (day, m) => { | ||
return (e) => { | ||
switch (e.key) { | ||
case "ArrowLeft": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focus.focusDayAfter() : focus.focusDayBefore(); | ||
break; | ||
case "ArrowRight": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focus.focusDayBefore() : focus.focusDayAfter(); | ||
break; | ||
case "ArrowDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusWeekAfter(); | ||
break; | ||
case "ArrowUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusWeekBefore(); | ||
break; | ||
case " ": | ||
case "Enter": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
selection?.handleSelect(day.date, m, e); | ||
break; | ||
case "PageUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focus.focusYearBefore() : focus.focusMonthBefore(); | ||
break; | ||
case "PageDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focus.focusYearAfter() : focus.focusMonthAfter(); | ||
break; | ||
case "Home": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusStartOfWeek(); | ||
break; | ||
case "End": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusEndOfWeek(); | ||
break; | ||
} | ||
onDayKeyDown?.(day.date, m, e); | ||
}; | ||
}; | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn, | ||
firstWeekContainsDate, | ||
useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: { ...calendar, ...selection, ...modifiers } }, | ||
react_1.default.createElement("div", { className: [classNames[UI_js_1.UI.Root], props.className] | ||
.filter(Boolean) | ||
.join(" "), style: { ...styles?.[UI_js_1.UI.Root], ...props.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, ...(0, getDataAttributes_js_1.getDataAttributes)(props) }, | ||
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: "toolbar", 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(calendar.previousMonth, { | ||
locale | ||
}), "aria-controls": id, onClick: handlePreviousClick }, | ||
react_1.default.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: "left" })), | ||
react_1.default.createElement(components.Button, { type: "button", className: classNames[UI_js_1.UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, labelOptions), "aria-controls": id, onClick: handleNextClick }, | ||
react_1.default.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, orientation: "right", className: classNames[UI_js_1.UI.Chevron] })))), | ||
calendar.months.map((calendarMonth, displayIndex) => { | ||
const captionId = `${id}-caption-${displayIndex}`; | ||
const handleMonthChange = (e) => { | ||
const selectedMonth = Number(e.target.value); | ||
const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth); | ||
calendar.goToMonth(month); | ||
}; | ||
const handleYearChange = (e) => { | ||
const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value)); | ||
calendar.goToMonth(month); | ||
}; | ||
const dropdownMonths = (0, getDropdownMonths_js_1.getDropdownMonths)(calendarMonth.date, calendar.navigationStartMonth, calendar.navigationEndMonth, formatters, locale, dateLib); | ||
const dropdownYears = (0, getDropdownYears_js_1.getDropdownYears)(calendar.months[0].date, calendar.navigationStartMonth, calendar.navigationEndMonth, 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 }, | ||
react_1.default.createElement(components.MonthCaption, { className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], id: captionId, 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] }, | ||
captionLayout === "dropdown" || | ||
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()))), | ||
captionLayout === "dropdown" || | ||
captionLayout === "dropdown-years" ? (react_1.default.createElement(components.Dropdown, { "aria-label": labelYearDropdown(labelOptions), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange, options: dropdownYears, style: styles?.[UI_js_1.UI.Dropdown], value: calendarMonth.date.getFullYear() })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(calendarMonth.date.getFullYear()))))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, formatOptions, dateLib)))), | ||
react_1.default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, labelOptions, dateLib) || | ||
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))))), | ||
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) => { | ||
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 }, | ||
showWeekNumber && (react_1.default.createElement(components.WeekNumber, { week: week, role: "rowheader", style: styles?.[UI_js_1.UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, { | ||
locale | ||
}), className: classNames[UI_js_1.UI.WeekNumber] }, formatWeekNumber(week.weekNumber))), | ||
week.days.map((day, dayIndex) => { | ||
const m = modifiers.getModifiers(day); | ||
if (!m.disabled) { | ||
if (selection?.isSelected(day.date) && | ||
!m.disabled) { | ||
m[UI_js_1.SelectionState.selected] = true; | ||
} | ||
if (mode === "range") { | ||
const { isRangeEnd, isRangeStart, isRangeMiddle } = selection; | ||
if (isRangeStart(day.date)) { | ||
m[UI_js_1.SelectionState.range_start] = true; | ||
} | ||
if (isRangeMiddle(day.date)) { | ||
m[UI_js_1.SelectionState.range_middle] = true; | ||
} | ||
if (isRangeEnd(day.date)) { | ||
m[UI_js_1.SelectionState.range_end] = true; | ||
} | ||
} | ||
} | ||
const isFocused = Boolean(focus.focused?.isEqualTo(day)); | ||
const style = { | ||
...(0, getStyleForModifiers_js_1.getStyleForModifiers)(m, modifiersStyles), | ||
...styles?.[UI_js_1.UI.Day] | ||
}; | ||
const className = [ | ||
classNames[UI_js_1.UI.Day], | ||
...(0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(m, classNames, modifiersClassNames), | ||
...(isFocused | ||
? [classNames[UI_js_1.DayFlag.focused]] | ||
: []) | ||
]; | ||
return (react_1.default.createElement(components.Day, { key: `${dateLib.format(day.date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: m, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": m.hidden || undefined, "aria-selected": m.selected || undefined, "aria-label": !isInteractive | ||
? labelGridcell(day.date, m, labelOptions, dateLib) | ||
: undefined, "data-day": dateLib.format(day.date, "yyyy-MM-dd"), "data-month": numberOfMonths > 1 | ||
? dateLib.format(day.date, "yyyy-MM") | ||
: undefined, "data-selected": m.selected || undefined, "data-disabled": m.disabled || undefined, "data-hidden": m.hidden || undefined, "data-focused": isFocused || undefined }, isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], day: day, modifiers: m, disabled: m.disabled || undefined, tabIndex: focus.isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(day.date, m, labelOptions, dateLib), onClick: handleDayClick(day, m), onBlur: handleDayBlur(day, m), onFocus: handleDayFocus(day, m), onKeyDown: handleDayKeyDown(day, m) }, formatDay(day.date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib)))); | ||
}))); | ||
}))))); | ||
})), | ||
props.footer && (react_1.default.createElement(components.Footer, { className: classNames[UI_js_1.UI.Footer], style: styles?.[UI_js_1.UI.Footer], role: "status", "aria-live": "polite" }, props.footer))))); | ||
} | ||
exports.DayPicker = DayPicker; | ||
//# sourceMappingURL=DayPicker.js.map |
@@ -1,3 +0,3 @@ | ||
import { FormatOptions } from "../lib"; | ||
import type { DateLib } from "../types"; | ||
import { FormatOptions } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * The default formatter for the caption element. |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.formatMonthCaption = exports.formatCaption = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.formatMonthCaption = void 0; | ||
exports.formatCaption = formatCaption; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -10,6 +11,5 @@ * The default formatter for the caption element. | ||
*/ | ||
function formatCaption(month, options, dateLib = lib_1.dateLib) { | ||
function formatCaption(month, options, dateLib = index_js_1.dateLib) { | ||
return dateLib.format(month, "LLLL y", options); | ||
} | ||
exports.formatCaption = formatCaption; | ||
/** | ||
@@ -16,0 +16,0 @@ * @private |
@@ -1,3 +0,3 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * The default formatter for the day grid cell element. |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.formatDay = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.formatDay = formatDay; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -10,6 +10,5 @@ * The default formatter for the day grid cell element. | ||
*/ | ||
function formatDay(date, options, dateLib = lib_1.dateLib) { | ||
function formatDay(date, options, dateLib = index_js_1.dateLib) { | ||
return dateLib.format(date, "d", options); | ||
} | ||
exports.formatDay = formatDay; | ||
//# sourceMappingURL=formatDay.js.map |
@@ -10,2 +10,2 @@ /** | ||
/** The locale to use for formatting. */ | ||
locale?: import("date-fns/locale/types").Locale): string; | ||
locale?: import("date-fns").Locale): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.formatMonthDropdown = void 0; | ||
const locales_1 = require("../lib/locales"); | ||
exports.formatMonthDropdown = formatMonthDropdown; | ||
const locales_js_1 = require("../lib/locales.js"); | ||
/** | ||
@@ -14,7 +14,6 @@ * The default formatter for the month dropdown value. | ||
/** The locale to use for formatting. */ | ||
locale = locales_1.enUS) { | ||
locale = locales_js_1.enUS) { | ||
return (locale.localize?.month(monthNumber) ?? | ||
monthNumber.toString()); | ||
} | ||
exports.formatMonthDropdown = formatMonthDropdown; | ||
//# sourceMappingURL=formatMonthDropdown.js.map |
@@ -1,3 +0,3 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * The default formatter for the name of the weekday. |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.formatWeekdayName = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.formatWeekdayName = formatWeekdayName; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -10,6 +10,5 @@ * The default formatter for the name of the weekday. | ||
*/ | ||
function formatWeekdayName(weekday, options, dateLib = lib_1.dateLib) { | ||
function formatWeekdayName(weekday, options, dateLib = index_js_1.dateLib) { | ||
return dateLib.format(weekday, "cccccc", options); | ||
} | ||
exports.formatWeekdayName = formatWeekdayName; | ||
//# sourceMappingURL=formatWeekdayName.js.map |
/** | ||
* The default formatter for the week numbers. | ||
* | ||
* @param weekNumber - The week number to format. `0` when heading of the week | ||
* numbers. | ||
* @group Formatters | ||
*/ | ||
export declare function formatWeekNumber(weekNumber: number): string; | ||
export declare function formatWeekNumber(weekNumber: number | 0): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.formatWeekNumber = void 0; | ||
exports.formatWeekNumber = formatWeekNumber; | ||
/** | ||
* The default formatter for the week numbers. | ||
* | ||
* @param weekNumber - The week number to format. `0` when heading of the week | ||
* numbers. | ||
* @group Formatters | ||
*/ | ||
function formatWeekNumber(weekNumber) { | ||
if (weekNumber === 0) { | ||
return `#`; | ||
} | ||
if (weekNumber < 10) { | ||
return `0${weekNumber.toLocaleString()}`; | ||
} | ||
return `${weekNumber.toLocaleString()}`; | ||
} | ||
exports.formatWeekNumber = formatWeekNumber; | ||
//# sourceMappingURL=formatWeekNumber.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.formatYearCaption = exports.formatYearDropdown = void 0; | ||
exports.formatYearCaption = void 0; | ||
exports.formatYearDropdown = formatYearDropdown; | ||
/** | ||
@@ -12,3 +13,2 @@ * The default formatter for the Year caption. | ||
} | ||
exports.formatYearDropdown = formatYearDropdown; | ||
/** | ||
@@ -15,0 +15,0 @@ * @private |
@@ -1,6 +0,7 @@ | ||
export * from "./formatCaption"; | ||
export * from "./formatDay"; | ||
export * from "./formatMonthDropdown"; | ||
export * from "./formatWeekNumber"; | ||
export * from "./formatWeekdayName"; | ||
export * from "./formatYearDropdown"; | ||
export * from "./formatCaption.js"; | ||
export * from "./formatDay.js"; | ||
export * from "./formatMonthDropdown.js"; | ||
export * from "./formatWeekNumber.js"; | ||
export * from "./formatWeekNumberHeader.js"; | ||
export * from "./formatWeekdayName.js"; | ||
export * from "./formatYearDropdown.js"; |
@@ -17,8 +17,9 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./formatCaption"), exports); | ||
__exportStar(require("./formatDay"), exports); | ||
__exportStar(require("./formatMonthDropdown"), exports); | ||
__exportStar(require("./formatWeekNumber"), exports); | ||
__exportStar(require("./formatWeekdayName"), exports); | ||
__exportStar(require("./formatYearDropdown"), exports); | ||
__exportStar(require("./formatCaption.js"), exports); | ||
__exportStar(require("./formatDay.js"), exports); | ||
__exportStar(require("./formatMonthDropdown.js"), exports); | ||
__exportStar(require("./formatWeekNumber.js"), exports); | ||
__exportStar(require("./formatWeekNumberHeader.js"), exports); | ||
__exportStar(require("./formatWeekdayName.js"), exports); | ||
__exportStar(require("./formatYearDropdown.js"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import type { ModifiersClassNames, ClassNames } from "../types"; | ||
export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, modifiersClassNames: ModifiersClassNames, classNames: ClassNames): string[]; | ||
import type { ModifiersClassNames, ClassNames } from "../types/index.js"; | ||
export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, classNames: ClassNames, modifiersClassNames?: ModifiersClassNames): string[]; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getClassNamesForModifiers = void 0; | ||
const UI_1 = require("../UI"); | ||
function getClassNamesForModifiers(modifiers, modifiersClassNames, classNames) { | ||
exports.getClassNamesForModifiers = getClassNamesForModifiers; | ||
const UI_js_1 = require("../UI.js"); | ||
function getClassNamesForModifiers(modifiers, classNames, modifiersClassNames = {}) { | ||
const modifierClassNames = Object.entries(modifiers) | ||
@@ -12,7 +12,7 @@ .filter(([, active]) => active === true) | ||
} | ||
else if (classNames[UI_1.DayFlag[key]]) { | ||
previousValue.push(classNames[UI_1.DayFlag[key]]); | ||
else if (classNames[UI_js_1.DayFlag[key]]) { | ||
previousValue.push(classNames[UI_js_1.DayFlag[key]]); | ||
} | ||
else if (classNames[UI_1.SelectionState[key]]) { | ||
previousValue.push(classNames[UI_1.SelectionState[key]]); | ||
else if (classNames[UI_js_1.SelectionState[key]]) { | ||
previousValue.push(classNames[UI_js_1.SelectionState[key]]); | ||
} | ||
@@ -23,3 +23,2 @@ return previousValue; | ||
} | ||
exports.getClassNamesForModifiers = getClassNamesForModifiers; | ||
//# sourceMappingURL=getClassNamesForModifiers.js.map |
@@ -1,3 +0,3 @@ | ||
import type { DayPickerProps } from "../types"; | ||
import type { DayPickerProps } from "../types/index.js"; | ||
/** Return the `data-` attributes from the props. */ | ||
export declare function getDataAttributes(props: DayPickerProps): Record<string, unknown>; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDataAttributes = void 0; | ||
exports.getDataAttributes = getDataAttributes; | ||
/** Return the `data-` attributes from the props. */ | ||
function getDataAttributes(props) { | ||
const dataAttributes = {}; | ||
const dataAttributes = { | ||
"data-mode": props.mode ?? undefined, | ||
"data-required": "required" in props ? props.required : undefined | ||
}; | ||
Object.entries(props).forEach(([key, val]) => { | ||
@@ -14,3 +17,2 @@ if (key.startsWith("data-")) { | ||
} | ||
exports.getDataAttributes = getDataAttributes; | ||
//# sourceMappingURL=getDataAttributes.js.map |
@@ -1,3 +0,3 @@ | ||
import { PropsContextValue } from "../contexts"; | ||
import { DateLib, DayPickerProps } from "../index.js"; | ||
/** Return all the dates to display in the calendar. */ | ||
export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<PropsContextValue, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | "dateLib">): Date[]; | ||
export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn">, dateLib: DateLib): Date[]; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDates = void 0; | ||
exports.getDates = getDates; | ||
/** The number of days in a month when having 6 weeks. */ | ||
const NrOfDaysWithFixedWeeks = 42; | ||
/** Return all the dates to display in the calendar. */ | ||
function getDates(displayMonths, maxDate, props) { | ||
function getDates(displayMonths, maxDate, props, dateLib) { | ||
const firstMonth = displayMonths[0]; | ||
const lastMonth = displayMonths[displayMonths.length - 1]; | ||
const { ISOWeek, fixedWeeks, locale, weekStartsOn } = props ?? {}; | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = props.dateLib; | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = dateLib; | ||
const startWeekFirstDate = ISOWeek | ||
@@ -44,3 +44,2 @@ ? startOfISOWeek(firstMonth) | ||
} | ||
exports.getDates = getDates; | ||
//# sourceMappingURL=getDates.js.map |
@@ -1,2 +0,2 @@ | ||
import type { CalendarDay, CalendarMonth } from "../classes"; | ||
import type { CalendarDay, CalendarMonth } from "../classes/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Returns all the days belonging to the calendar by merging the days in the |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDays = void 0; | ||
exports.getDays = getDays; | ||
/** | ||
@@ -18,3 +18,2 @@ * Returns all the days belonging to the calendar by merging the days in the | ||
} | ||
exports.getDays = getDays; | ||
//# sourceMappingURL=getDays.js.map |
@@ -1,2 +0,2 @@ | ||
import type { ClassNames } from "../types"; | ||
import type { ClassNames } from "../types/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Get the default class names for the UI elements. |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDefaultClassNames = void 0; | ||
const UI_1 = require("../UI"); | ||
exports.getDefaultClassNames = getDefaultClassNames; | ||
const UI_js_1 = require("../UI.js"); | ||
/** | ||
@@ -12,29 +12,16 @@ * Get the default class names for the UI elements. | ||
const classNames = {}; | ||
for (const key in UI_1.UI) { | ||
classNames[UI_1.UI[key]] = | ||
`rdp-${UI_1.UI[key]}`; | ||
for (const key in UI_js_1.UI) { | ||
classNames[UI_js_1.UI[key]] = | ||
`rdp-${UI_js_1.UI[key]}`; | ||
} | ||
for (const key in UI_1.CalendarFlag) { | ||
classNames[UI_1.CalendarFlag[key]] = | ||
`rdp-${UI_1.CalendarFlag[key]}`; | ||
for (const key in UI_js_1.DayFlag) { | ||
classNames[UI_js_1.DayFlag[key]] = | ||
`rdp-${UI_js_1.DayFlag[key]}`; | ||
} | ||
for (const key in UI_1.ChevronFlag) { | ||
classNames[UI_1.ChevronFlag[key]] = | ||
`rdp-${UI_1.ChevronFlag[key]}`; | ||
for (const key in UI_js_1.SelectionState) { | ||
classNames[UI_js_1.SelectionState[key]] = | ||
`rdp-${UI_js_1.SelectionState[key]}`; | ||
} | ||
for (const key in UI_1.WeekNumberFlag) { | ||
classNames[UI_1.WeekNumberFlag[key]] = | ||
`rdp-${UI_1.WeekNumberFlag[key]}`; | ||
} | ||
for (const key in UI_1.DayFlag) { | ||
classNames[UI_1.DayFlag[key]] = | ||
`rdp-${UI_1.DayFlag[key]}`; | ||
} | ||
for (const key in UI_1.SelectionState) { | ||
classNames[UI_1.SelectionState[key]] = | ||
`rdp-${UI_1.SelectionState[key]}`; | ||
} | ||
return classNames; | ||
} | ||
exports.getDefaultClassNames = getDefaultClassNames; | ||
//# sourceMappingURL=getDefaultClassNames.js.map |
@@ -1,2 +0,2 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
export declare function getDisplayMonths(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "numberOfMonths" | "endMonth" | "dateLib">): Date[]; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
export declare function getDisplayMonths(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "numberOfMonths">, dateLib: DateLib): Date[]; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDisplayMonths = void 0; | ||
function getDisplayMonths(firstDisplayedMonth, props) { | ||
exports.getDisplayMonths = getDisplayMonths; | ||
function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) { | ||
const { numberOfMonths = 1 } = props; | ||
const months = []; | ||
for (let i = 0; i < props.numberOfMonths; i++) { | ||
const month = props.dateLib.addMonths(firstDisplayedMonth, i); | ||
if (props.endMonth && month > props.endMonth) { | ||
for (let i = 0; i < numberOfMonths; i++) { | ||
const month = dateLib.addMonths(firstDisplayedMonth, i); | ||
if (calendarEndMonth && month > calendarEndMonth) { | ||
break; | ||
@@ -15,3 +16,2 @@ } | ||
} | ||
exports.getDisplayMonths = getDisplayMonths; | ||
//# sourceMappingURL=getDisplayMonths.js.map |
@@ -1,4 +0,5 @@ | ||
import { DropdownOption } from "../components/Dropdown"; | ||
import { PropsContextValue } from "../contexts"; | ||
import { DropdownOption } from "../components/Dropdown.js"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import type { DateLib, Formatters } from "../types/index.js"; | ||
/** Return the months to show in the dropdown. */ | ||
export declare function getDropdownMonths(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined; | ||
export declare function getDropdownMonths(displayMonth: Date, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, formatters: Pick<Formatters, "formatMonthDropdown">, locale: Locale | undefined, dateLib: DateLib): DropdownOption[] | undefined; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDropdownMonths = void 0; | ||
exports.getDropdownMonths = getDropdownMonths; | ||
/** Return the months to show in the dropdown. */ | ||
function getDropdownMonths(displayMonth, props) { | ||
const { startMonth, endMonth } = props; | ||
if (!startMonth) | ||
function getDropdownMonths(displayMonth, calendarStartMonth, calendarEndMonth, formatters, locale, dateLib) { | ||
if (!calendarStartMonth) | ||
return undefined; | ||
if (!endMonth) | ||
if (!calendarEndMonth) | ||
return undefined; | ||
const { addMonths, startOfMonth, isBefore, Date } = props.dateLib; | ||
const { addMonths, startOfMonth, isBefore, Date } = dateLib; | ||
const year = displayMonth.getFullYear(); | ||
const navStartMonth = startOfMonth(startMonth); | ||
const navEndMonth = startOfMonth(endMonth); | ||
const navStartMonth = startOfMonth(calendarStartMonth); | ||
const navEndMonth = startOfMonth(calendarEndMonth); | ||
const months = []; | ||
@@ -25,5 +24,7 @@ let month = navStartMonth; | ||
const options = sortedMonths.map((value) => { | ||
const label = props.formatters.formatMonthDropdown(value, props.locale); | ||
const disabled = (startMonth && new Date(year, value) < startOfMonth(startMonth)) || | ||
(endMonth && new Date(year, value) > startOfMonth(endMonth)) || | ||
const label = formatters.formatMonthDropdown(value, locale); | ||
const disabled = (calendarStartMonth && | ||
new Date(year, value) < startOfMonth(calendarStartMonth)) || | ||
(calendarEndMonth && | ||
new Date(year, value) > startOfMonth(calendarEndMonth)) || | ||
false; | ||
@@ -34,3 +35,2 @@ return { value, label, disabled }; | ||
} | ||
exports.getDropdownMonths = getDropdownMonths; | ||
//# sourceMappingURL=getDropdownMonths.js.map |
@@ -1,4 +0,4 @@ | ||
import { DropdownOption } from "../components/Dropdown"; | ||
import { PropsContextValue } from "../contexts"; | ||
import { DropdownOption } from "../components/Dropdown.js"; | ||
import type { DateLib, Formatters } from "../types/index.js"; | ||
/** Return the years to show in the dropdown. */ | ||
export declare function getDropdownYears(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined; | ||
export declare function getDropdownYears(displayMonth: Date, calendarStart: Date | undefined, calendarEnd: Date | undefined, formatters: Pick<Formatters, "formatYearDropdown">, dateLib: DateLib): DropdownOption[] | undefined; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDropdownYears = void 0; | ||
exports.getDropdownYears = getDropdownYears; | ||
/** Return the years to show in the dropdown. */ | ||
function getDropdownYears(displayMonth, props) { | ||
const { startMonth, endMonth } = props; | ||
if (!startMonth) | ||
function getDropdownYears(displayMonth, calendarStart, calendarEnd, formatters, dateLib) { | ||
if (!calendarStart) | ||
return undefined; | ||
if (!endMonth) | ||
if (!calendarEnd) | ||
return undefined; | ||
const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = props.dateLib; | ||
const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = dateLib; | ||
const month = displayMonth.getMonth(); | ||
const firstNavYear = startOfYear(startMonth); | ||
const lastNavYear = endOfYear(endMonth); | ||
const firstNavYear = startOfYear(calendarStart); | ||
const lastNavYear = endOfYear(calendarEnd); | ||
const years = []; | ||
@@ -22,6 +21,8 @@ let year = firstNavYear; | ||
return years.map((value) => { | ||
const disabled = (startMonth && new Date(value, month) < startOfMonth(startMonth)) || | ||
(month && endMonth && new Date(value, month) > startOfMonth(endMonth)) || | ||
const disabled = (calendarStart && new Date(value, month) < startOfMonth(calendarStart)) || | ||
(month && | ||
calendarEnd && | ||
new Date(value, month) > startOfMonth(calendarEnd)) || | ||
false; | ||
const label = props.formatters.formatYearDropdown(value); | ||
const label = formatters.formatYearDropdown(value); | ||
return { | ||
@@ -34,3 +35,2 @@ value, | ||
} | ||
exports.getDropdownYears = getDropdownYears; | ||
//# sourceMappingURL=getDropdownYears.js.map |
@@ -1,9 +0,9 @@ | ||
import * as defaultFormatters from "../formatters"; | ||
import type { DayPickerProps } from "../types"; | ||
import * as defaultFormatters from "../formatters/index.js"; | ||
import type { DayPickerProps } from "../types/index.js"; | ||
/** Return the formatters from the props merged with the default formatters. */ | ||
export declare function getFormatters(customFormatters: DayPickerProps["formatters"]): { | ||
formatCaption: typeof defaultFormatters.formatCaption; | ||
formatMonthCaption: typeof defaultFormatters.formatCaption; | ||
formatMonthCaption: typeof defaultFormatters.formatMonthCaption; | ||
formatMonthDropdown: typeof defaultFormatters.formatMonthDropdown; | ||
formatYearCaption: typeof defaultFormatters.formatYearDropdown; | ||
formatYearCaption: typeof defaultFormatters.formatYearCaption; | ||
formatYearDropdown: typeof defaultFormatters.formatYearDropdown; | ||
@@ -13,2 +13,3 @@ formatDay: typeof defaultFormatters.formatDay; | ||
formatWeekdayName: typeof defaultFormatters.formatWeekdayName; | ||
formatWeekNumberHeader(): string; | ||
}; |
@@ -26,4 +26,4 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getFormatters = void 0; | ||
const defaultFormatters = __importStar(require("../formatters")); | ||
exports.getFormatters = getFormatters; | ||
const defaultFormatters = __importStar(require("../formatters/index.js")); | ||
/** Return the formatters from the props merged with the default formatters. */ | ||
@@ -43,3 +43,2 @@ function getFormatters(customFormatters) { | ||
} | ||
exports.getFormatters = getFormatters; | ||
//# sourceMappingURL=getFormatters.js.map |
@@ -1,3 +0,3 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../index.js"; | ||
/** Return the start month based on the props passed to DayPicker. */ | ||
export declare function getInitialMonth(props: Pick<PropsContextValue, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "dateLib">): Date; | ||
export declare function getInitialMonth(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths">, dateLib: DateLib): Date; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getInitialMonth = void 0; | ||
exports.getInitialMonth = getInitialMonth; | ||
/** Return the start month based on the props passed to DayPicker. */ | ||
function getInitialMonth(props) { | ||
const { month, defaultMonth, dateLib: { Date }, today, numberOfMonths = 1, endMonth, startMonth } = props; | ||
let initialMonth = month || defaultMonth || today || new Date(); | ||
const { differenceInCalendarMonths, addMonths, startOfMonth } = props.dateLib; | ||
function getInitialMonth(props, dateLib) { | ||
const { month, defaultMonth, today = new dateLib.Date(), numberOfMonths = 1, endMonth, startMonth } = props; | ||
let initialMonth = month || defaultMonth || today; | ||
const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib; | ||
// Fix the initialMonth if is after the to-date | ||
@@ -20,3 +20,2 @@ if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) { | ||
} | ||
exports.getInitialMonth = getInitialMonth; | ||
//# sourceMappingURL=getInitialMonth.js.map |
@@ -1,3 +0,3 @@ | ||
import { CalendarMonth } from "../classes"; | ||
import type { PropsContextValue } from "../contexts"; | ||
import { CalendarMonth } from "../classes/index.js"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** Return the months to display in the calendar. */ | ||
@@ -10,2 +10,2 @@ export declare function getMonths( | ||
/** Options from the props context. */ | ||
props: Pick<PropsContextValue, "dateLib" | "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">): CalendarMonth[]; | ||
options: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[]; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getMonths = void 0; | ||
const classes_1 = require("../classes"); | ||
exports.getMonths = getMonths; | ||
const index_js_1 = require("../classes/index.js"); | ||
/** Return the months to display in the calendar. */ | ||
@@ -12,16 +12,16 @@ function getMonths( | ||
/** Options from the props context. */ | ||
props) { | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = props.dateLib; | ||
options, dateLib) { | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = dateLib; | ||
const dayPickerMonths = displayMonths.reduce((months, month) => { | ||
const firstDateOfFirstWeek = props.ISOWeek | ||
const firstDateOfFirstWeek = options.ISOWeek | ||
? startOfISOWeek(month) | ||
: startOfWeek(month, { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
}); | ||
const lastDateOfLastWeek = props.ISOWeek | ||
const lastDateOfLastWeek = options.ISOWeek | ||
? endOfISOWeek(endOfMonth(month)) | ||
: endOfWeek(endOfMonth(month), { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
}); | ||
@@ -32,3 +32,3 @@ /** The dates to display in the month. */ | ||
}); | ||
if (props.fixedWeeks && monthDates.length < 42) { | ||
if (options.fixedWeeks && monthDates.length < 42) { | ||
const extraDates = dates.filter((date) => { | ||
@@ -40,13 +40,13 @@ return (date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7)); | ||
const weeks = monthDates.reduce((weeks, date) => { | ||
const weekNumber = props.ISOWeek | ||
const weekNumber = options.ISOWeek | ||
? getISOWeek(date) | ||
: getWeek(date, { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn, | ||
firstWeekContainsDate: options.firstWeekContainsDate | ||
}); | ||
const week = weeks.find((week) => week.weekNumber === weekNumber); | ||
const day = new classes_1.CalendarDay(date, month, props.dateLib); | ||
const day = new index_js_1.CalendarDay(date, month, dateLib); | ||
if (!week) { | ||
weeks.push(new classes_1.CalendarWeek(weekNumber, [day])); | ||
weeks.push(new index_js_1.CalendarWeek(weekNumber, [day])); | ||
} | ||
@@ -58,7 +58,7 @@ else { | ||
}, []); | ||
const dayPickerMonth = new classes_1.CalendarMonth(month, weeks); | ||
const dayPickerMonth = new index_js_1.CalendarMonth(month, weeks); | ||
months.push(dayPickerMonth); | ||
return months; | ||
}, []); | ||
if (!props.reverseMonths) { | ||
if (!options.reverseMonths) { | ||
return dayPickerMonths; | ||
@@ -70,3 +70,2 @@ } | ||
} | ||
exports.getMonths = getMonths; | ||
//# sourceMappingURL=getMonths.js.map |
@@ -1,7 +0,5 @@ | ||
import { CalendarDay } from "../classes"; | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { MoveFocusBy, MoveFocusDir } from "../types"; | ||
export type Options = Pick<PropsContextValue, "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">; | ||
import { CalendarDay } from "../classes/index.js"; | ||
import type { DateLib, DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js"; | ||
export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir, | ||
/** The date that is currently focused. */ | ||
focused: CalendarDay, options: Pick<PropsContextValue, "dateLib" | "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">, attempt?: number): CalendarDay | undefined; | ||
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getNextFocus = void 0; | ||
const classes_1 = require("../classes"); | ||
const dateMatchModifiers_1 = require("../utils/dateMatchModifiers"); | ||
const getPossibleFocusDate_1 = require("./getPossibleFocusDate"); | ||
exports.getNextFocus = getNextFocus; | ||
const index_js_1 = require("../classes/index.js"); | ||
const dateMatchModifiers_js_1 = require("../utils/dateMatchModifiers.js"); | ||
const getFocusableDate_js_1 = require("./getFocusableDate.js"); | ||
function getNextFocus(moveBy, moveDir, | ||
/** The date that is currently focused. */ | ||
focused, options, attempt = 0) { | ||
refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) { | ||
if (attempt > 365) { | ||
@@ -14,9 +14,9 @@ // Limit the recursion to 365 attempts | ||
} | ||
const possibleFocusDate = (0, getPossibleFocusDate_1.getPossibleFocusDate)(moveBy, moveDir, focused.date, options); | ||
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_1.dateMatchModifiers)(possibleFocusDate, options.disabled, options.dateLib)); | ||
const isHidden = Boolean(options.hidden && | ||
(0, dateMatchModifiers_1.dateMatchModifiers)(possibleFocusDate, options.hidden, options.dateLib)); | ||
const targetMonth = possibleFocusDate; | ||
const focusDay = new classes_1.CalendarDay(possibleFocusDate, targetMonth, options.dateLib); | ||
(0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.disabled, dateLib)); | ||
const isHidden = Boolean(options.hidden && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.hidden, dateLib)); | ||
const targetMonth = focusableDate; | ||
const focusDay = new index_js_1.CalendarDay(focusableDate, targetMonth, dateLib); | ||
if (!isDisabled && !isHidden) { | ||
@@ -26,5 +26,4 @@ return focusDay; | ||
// Recursively attempt to find the next focusable date | ||
return getNextFocus(moveBy, moveDir, focusDay, options, attempt + 1); | ||
return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1); | ||
} | ||
exports.getNextFocus = getNextFocus; | ||
//# sourceMappingURL=getNextFocus.js.map |
@@ -1,2 +0,2 @@ | ||
import { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** | ||
@@ -8,5 +8,5 @@ * Return the next month the user can navigate to according to the given | ||
* | ||
* - If after the `endMonth` range, is `undefined`; | ||
* - If after the `calendarEndMonth` range, is `undefined`; | ||
* - If the navigation is paged , is the number of months displayed ahead. | ||
*/ | ||
export declare function getNextMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "endMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined; | ||
export declare function getNextMonth(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getNextMonth = void 0; | ||
exports.getNextMonth = getNextMonth; | ||
/** | ||
@@ -10,18 +10,18 @@ * Return the next month the user can navigate to according to the given | ||
* | ||
* - If after the `endMonth` range, is `undefined`; | ||
* - If after the `calendarEndMonth` range, is `undefined`; | ||
* - If the navigation is paged , is the number of months displayed ahead. | ||
*/ | ||
function getNextMonth(firstDisplayedMonth, props) { | ||
if (props.disableNavigation) { | ||
function getNextMonth(firstDisplayedMonth, calendarEndMonth, options, dateLib) { | ||
if (options.disableNavigation) { | ||
return undefined; | ||
} | ||
const { pagedNavigation, numberOfMonths } = props; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib; | ||
const { pagedNavigation, numberOfMonths = 1 } = options; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
if (!props.endMonth) { | ||
if (!calendarEndMonth) { | ||
return addMonths(month, offset); | ||
} | ||
const monthsDiff = differenceInCalendarMonths(props.endMonth, firstDisplayedMonth); | ||
if (monthsDiff < numberOfMonths) { | ||
const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth); | ||
if (monthsDiff < numberOfMonths ?? 1) { | ||
return undefined; | ||
@@ -32,3 +32,2 @@ } | ||
} | ||
exports.getNextMonth = getNextMonth; | ||
//# sourceMappingURL=getNextMonth.js.map |
@@ -1,2 +0,2 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** | ||
@@ -9,5 +9,5 @@ * Return the next previous the user can navigate to, according to the given | ||
* | ||
* - If before the `startMonth` date, is `undefined`; | ||
* - If before the `calendarStartMonth` date, is `undefined`; | ||
* - If the navigation is paged, is the number of months displayed before. | ||
*/ | ||
export declare function getPreviousMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined; | ||
export declare function getPreviousMonth(firstDisplayedMonth: Date, calendarStartMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getPreviousMonth = void 0; | ||
exports.getPreviousMonth = getPreviousMonth; | ||
/** | ||
@@ -11,17 +11,17 @@ * Return the next previous the user can navigate to, according to the given | ||
* | ||
* - If before the `startMonth` date, is `undefined`; | ||
* - If before the `calendarStartMonth` date, is `undefined`; | ||
* - If the navigation is paged, is the number of months displayed before. | ||
*/ | ||
function getPreviousMonth(firstDisplayedMonth, props) { | ||
if (props.disableNavigation) { | ||
function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, dateLib) { | ||
if (options.disableNavigation) { | ||
return undefined; | ||
} | ||
const { pagedNavigation, numberOfMonths } = props; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib; | ||
const offset = pagedNavigation ? numberOfMonths : 1; | ||
const { pagedNavigation, numberOfMonths } = options; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths ?? 1 : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
if (!props.startMonth) { | ||
if (!calendarStartMonth) { | ||
return addMonths(month, -offset); | ||
} | ||
const monthsDiff = differenceInCalendarMonths(month, props.startMonth); | ||
const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth); | ||
if (monthsDiff <= 0) { | ||
@@ -32,3 +32,2 @@ return undefined; | ||
} | ||
exports.getPreviousMonth = getPreviousMonth; | ||
//# sourceMappingURL=getPreviousMonth.js.map |
import type { CSSProperties } from "react"; | ||
import type { Modifiers, ModifiersStyles, Styles } from "../types"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles: Partial<ModifiersStyles>, styles: Partial<Styles>): CSSProperties; | ||
import type { Modifiers, ModifiersStyles } from "../types/index.js"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getStyleForModifiers = void 0; | ||
const UI_1 = require("../UI"); | ||
function getStyleForModifiers(dayModifiers, modifiersStyles, styles) { | ||
let style = { ...styles[UI_1.UI.Day] }; | ||
exports.getStyleForModifiers = getStyleForModifiers; | ||
function getStyleForModifiers(dayModifiers, modifiersStyles = {}) { | ||
let style = {}; | ||
Object.entries(dayModifiers) | ||
@@ -17,3 +16,2 @@ .filter(([, active]) => active === true) | ||
} | ||
exports.getStyleForModifiers = getStyleForModifiers; | ||
//# sourceMappingURL=getStyleForModifiers.js.map |
@@ -1,3 +0,3 @@ | ||
import type { Locale } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * Generate a series of 7 days, starting from the week, to use for formatting |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getWeekdays = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.getWeekdays = getWeekdays; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -13,3 +13,3 @@ * Generate a series of 7 days, starting from the week, to use for formatting | ||
/** Use ISOWeek instead of locale/ */ | ||
ISOWeek, dateLib = lib_1.dateLib) { | ||
ISOWeek, dateLib = index_js_1.dateLib) { | ||
const start = ISOWeek | ||
@@ -25,3 +25,2 @@ ? dateLib.startOfISOWeek(new dateLib.Date()) | ||
} | ||
exports.getWeekdays = getWeekdays; | ||
//# sourceMappingURL=getWeekdays.js.map |
@@ -1,3 +0,3 @@ | ||
import type { CalendarMonth, CalendarWeek } from "../classes"; | ||
import type { CalendarMonth, CalendarWeek } from "../classes/index.js"; | ||
/** Returns an array of calendar weeks from an array of calendar months. */ | ||
export declare function getWeeks(months: CalendarMonth[]): CalendarWeek[]; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getWeeks = void 0; | ||
exports.getWeeks = getWeeks; | ||
/** Returns an array of calendar weeks from an array of calendar months. */ | ||
@@ -11,3 +11,2 @@ function getWeeks(months) { | ||
} | ||
exports.getWeeks = getWeeks; | ||
//# sourceMappingURL=getWeeks.js.map |
@@ -1,1 +0,1 @@ | ||
export * from "./getDefaultClassNames"; | ||
export * from "./getDefaultClassNames.js"; |
@@ -18,3 +18,3 @@ "use strict"; | ||
// Only export helpers that can be useful to other developers. | ||
__exportStar(require("./getDefaultClassNames"), exports); | ||
__exportStar(require("./getDefaultClassNames.js"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,1 @@ | ||
/// <reference types="react" /> | ||
export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>; | ||
@@ -3,0 +2,0 @@ /** |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useControlledValue = void 0; | ||
exports.useControlledValue = useControlledValue; | ||
const react_1 = require("react"); | ||
@@ -22,3 +22,2 @@ /** | ||
} | ||
exports.useControlledValue = useControlledValue; | ||
//# sourceMappingURL=useControlledValue.js.map |
@@ -1,12 +0,11 @@ | ||
export * from "./DayPicker"; | ||
export * from "./types"; | ||
export * from "./classes"; | ||
export * from "./components/custom-components"; | ||
export * from "./contexts"; | ||
export * from "./selection"; | ||
export * from "./lib"; | ||
export * from "./formatters"; | ||
export * from "./helpers"; | ||
export * from "./labels"; | ||
export * from "./utils"; | ||
export * from "./UI"; | ||
export * from "./DayPicker.js"; | ||
export * from "./types/index.js"; | ||
export * from "./classes/index.js"; | ||
export * from "./components/custom-components.js"; | ||
export * from "./lib/index.js"; | ||
export * from "./formatters/index.js"; | ||
export * from "./helpers/index.js"; | ||
export * from "./labels/index.js"; | ||
export * from "./utils/index.js"; | ||
export * from "./UI.js"; | ||
export * from "./useDayPicker.js"; |
@@ -17,14 +17,13 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./DayPicker"), exports); | ||
__exportStar(require("./types"), exports); | ||
__exportStar(require("./classes"), exports); | ||
__exportStar(require("./components/custom-components"), exports); | ||
__exportStar(require("./contexts"), exports); | ||
__exportStar(require("./selection"), exports); | ||
__exportStar(require("./lib"), exports); | ||
__exportStar(require("./formatters"), exports); | ||
__exportStar(require("./helpers"), exports); | ||
__exportStar(require("./labels"), exports); | ||
__exportStar(require("./utils"), exports); | ||
__exportStar(require("./UI"), exports); | ||
__exportStar(require("./DayPicker.js"), exports); | ||
__exportStar(require("./types/index.js"), exports); | ||
__exportStar(require("./classes/index.js"), exports); | ||
__exportStar(require("./components/custom-components.js"), exports); | ||
__exportStar(require("./lib/index.js"), exports); | ||
__exportStar(require("./formatters/index.js"), exports); | ||
__exportStar(require("./helpers/index.js"), exports); | ||
__exportStar(require("./labels/index.js"), exports); | ||
__exportStar(require("./utils/index.js"), exports); | ||
__exportStar(require("./UI.js"), exports); | ||
__exportStar(require("./useDayPicker.js"), exports); | ||
//# sourceMappingURL=index.js.map |
import React from "react"; | ||
import { type DayPickerProps } from "./"; | ||
import { type DayPickerProps } from "./index.js"; | ||
export declare function DayPicker(props: DayPickerProps): React.JSX.Element; |
@@ -29,10 +29,9 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DayPicker = void 0; | ||
exports.DayPicker = DayPicker; | ||
const react_1 = __importDefault(require("react")); | ||
const jalaliDateLib = __importStar(require("date-fns-jalali")); | ||
const _1 = require("./"); | ||
const index_js_1 = require("./index.js"); | ||
function DayPicker(props) { | ||
return react_1.default.createElement(_1.DayPicker, { dateLib: jalaliDateLib, ...props }); | ||
return react_1.default.createElement(index_js_1.DayPicker, { dateLib: jalaliDateLib, ...props }); | ||
} | ||
exports.DayPicker = DayPicker; | ||
//# sourceMappingURL=jalali.js.map |
@@ -1,9 +0,12 @@ | ||
export * from "./labelDay"; | ||
export * from "./labelCaption"; | ||
export * from "./labelMonthDropdown"; | ||
export * from "./labelNext"; | ||
export * from "./labelPrevious"; | ||
export * from "./labelWeekday"; | ||
export * from "./labelWeekNumber"; | ||
export * from "./labelWeekNumberHeader"; | ||
export * from "./labelYearDropdown"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelGridcell.js"; | ||
export * from "./labelDayButton.js"; | ||
export * from "./labelNav.js"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelMonthDropdown.js"; | ||
export * from "./labelNext.js"; | ||
export * from "./labelPrevious.js"; | ||
export * from "./labelWeekday.js"; | ||
export * from "./labelWeekNumber.js"; | ||
export * from "./labelWeekNumberHeader.js"; | ||
export * from "./labelYearDropdown.js"; |
@@ -17,11 +17,14 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./labelDay"), exports); | ||
__exportStar(require("./labelCaption"), exports); | ||
__exportStar(require("./labelMonthDropdown"), exports); | ||
__exportStar(require("./labelNext"), exports); | ||
__exportStar(require("./labelPrevious"), exports); | ||
__exportStar(require("./labelWeekday"), exports); | ||
__exportStar(require("./labelWeekNumber"), exports); | ||
__exportStar(require("./labelWeekNumberHeader"), exports); | ||
__exportStar(require("./labelYearDropdown"), exports); | ||
__exportStar(require("./labelGrid.js"), exports); | ||
__exportStar(require("./labelGridcell.js"), exports); | ||
__exportStar(require("./labelDayButton.js"), exports); | ||
__exportStar(require("./labelNav.js"), exports); | ||
__exportStar(require("./labelGrid.js"), exports); | ||
__exportStar(require("./labelMonthDropdown.js"), exports); | ||
__exportStar(require("./labelNext.js"), exports); | ||
__exportStar(require("./labelPrevious.js"), exports); | ||
__exportStar(require("./labelWeekday.js"), exports); | ||
__exportStar(require("./labelWeekNumber.js"), exports); | ||
__exportStar(require("./labelWeekNumberHeader.js"), exports); | ||
__exportStar(require("./labelYearDropdown.js"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,8 +0,14 @@ | ||
import type { FormatOptions } from "date-fns"; | ||
import type { DateLib } from "../types"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import { DateLib } from "../types/index.js"; | ||
/** | ||
* Return the default ARIA label for the month grid. | ||
* Return an ARIA label for the month grid, that will be announced when entering | ||
* the grid. | ||
* | ||
* @group Labels | ||
*/ | ||
export declare function labelGrid(month: Date, options?: FormatOptions, dateLib?: DateLib): string; | ||
export declare function labelGrid(date: Date, options?: LabelOptions, dateLib?: DateLib): string; | ||
/** | ||
* @deprecated Use {@link labelGrid} instead. | ||
* @protected | ||
*/ | ||
export declare const labelCaption: typeof labelGrid; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelGrid = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.labelCaption = void 0; | ||
exports.labelGrid = labelGrid; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
* Return the default ARIA label for the month grid. | ||
* Return an ARIA label for the month grid, that will be announced when entering | ||
* the grid. | ||
* | ||
* @group Labels | ||
*/ | ||
function labelGrid(month, options, dateLib = lib_1.dateLib) { | ||
return dateLib.format(month, "LLLL y", options); | ||
function labelGrid(date, options, dateLib = index_js_1.dateLib) { | ||
return dateLib.format(date, "LLLL y", options); | ||
} | ||
exports.labelGrid = labelGrid; | ||
/** | ||
* @deprecated Use {@link labelGrid} instead. | ||
* @protected | ||
*/ | ||
exports.labelCaption = labelGrid; | ||
//# sourceMappingURL=labelGrid.js.map |
@@ -1,7 +0,7 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the WeekNumber element. | ||
* Return the default ARIA label for the months dropdown element. | ||
* | ||
* @group Labels | ||
*/ | ||
export declare function labelMonthDropdown(options?: FormatOptions): string; | ||
export declare function labelMonthDropdown(options?: LabelOptions): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelMonthDropdown = void 0; | ||
exports.labelMonthDropdown = labelMonthDropdown; | ||
/** | ||
* Return the default ARIA label for the WeekNumber element. | ||
* Return the default ARIA label for the months dropdown element. | ||
* | ||
@@ -13,3 +13,2 @@ * @group Labels | ||
} | ||
exports.labelMonthDropdown = labelMonthDropdown; | ||
//# sourceMappingURL=labelMonthDropdown.js.map |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button. | ||
/** Undefined where there's no next month no navigate to. */ | ||
month: Date | undefined, options?: FormatOptions): string; | ||
month: Date | undefined, options?: LabelOptions): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelNext = void 0; | ||
exports.labelNext = labelNext; | ||
/** | ||
@@ -17,3 +17,2 @@ * Return the default ARIA label for next month button. | ||
} | ||
exports.labelNext = labelNext; | ||
//# sourceMappingURL=labelNext.js.map |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button. | ||
/** Undefined where there's no previous month no navigate to. */ | ||
month: Date | undefined, options?: FormatOptions): string; | ||
month: Date | undefined, options?: LabelOptions): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelPrevious = void 0; | ||
exports.labelPrevious = labelPrevious; | ||
/** | ||
@@ -17,3 +17,2 @@ * Return the default ARIA label for next month button. | ||
} | ||
exports.labelPrevious = labelPrevious; | ||
//# sourceMappingURL=labelPrevious.js.map |
@@ -1,3 +0,3 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -8,2 +8,2 @@ * Return he default ARIA label for the Weekday element. | ||
*/ | ||
export declare function labelWeekday(date: Date, options?: FormatOptions, dateLib?: DateLib): string; | ||
export declare function labelWeekday(date: Date, options?: LabelOptions, dateLib?: DateLib): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelWeekday = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.labelWeekday = labelWeekday; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -10,6 +10,5 @@ * Return he default ARIA label for the Weekday element. | ||
*/ | ||
function labelWeekday(date, options, dateLib = lib_1.dateLib) { | ||
function labelWeekday(date, options, dateLib = index_js_1.dateLib) { | ||
return dateLib.format(date, "cccc", options); | ||
} | ||
exports.labelWeekday = labelWeekday; | ||
//# sourceMappingURL=labelWeekday.js.map |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number element. | ||
*/ | ||
export declare function labelWeekNumber(weekNumber: number, options?: FormatOptions): string; | ||
export declare function labelWeekNumber(weekNumber: number, options?: LabelOptions): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelWeekNumber = void 0; | ||
exports.labelWeekNumber = labelWeekNumber; | ||
/** | ||
@@ -14,3 +14,2 @@ * Return the default ARIA label for the week number element. | ||
} | ||
exports.labelWeekNumber = labelWeekNumber; | ||
//# sourceMappingURL=labelWeekNumber.js.map |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number header element. | ||
*/ | ||
export declare function labelWeekNumberHeader(options?: FormatOptions): string; | ||
export declare function labelWeekNumberHeader(options?: LabelOptions): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelWeekNumberHeader = void 0; | ||
exports.labelWeekNumberHeader = labelWeekNumberHeader; | ||
/** | ||
@@ -14,3 +14,2 @@ * Return the default ARIA label for the week number header element. | ||
} | ||
exports.labelWeekNumberHeader = labelWeekNumberHeader; | ||
//# sourceMappingURL=labelWeekNumberHeader.js.map |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -7,2 +7,2 @@ * Return the default ARIA label for the years dropdown. | ||
*/ | ||
export declare function labelYearDropdown(options?: FormatOptions): string; | ||
export declare function labelYearDropdown(options?: LabelOptions): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.labelYearDropdown = void 0; | ||
exports.labelYearDropdown = labelYearDropdown; | ||
/** | ||
@@ -13,3 +13,2 @@ * Return the default ARIA label for the years dropdown. | ||
} | ||
exports.labelYearDropdown = labelYearDropdown; | ||
//# sourceMappingURL=labelYearDropdown.js.map |
import { GenericDateConstructor } from "date-fns"; | ||
import type { FormatOptions as DateFnsFormatOptions, Locale as DateFnsLocale } from "date-fns"; | ||
import { addDays } from "date-fns/addDays"; | ||
@@ -14,3 +15,2 @@ import { addMonths } from "date-fns/addMonths"; | ||
import { getISOWeek } from "date-fns/getISOWeek"; | ||
import { getUnixTime } from "date-fns/getUnixTime"; | ||
import { getWeek } from "date-fns/getWeek"; | ||
@@ -32,12 +32,18 @@ import { isAfter } from "date-fns/isAfter"; | ||
import { startOfYear } from "date-fns/startOfYear"; | ||
/** @private */ | ||
export type { Locale } from "date-fns"; | ||
/** @private */ | ||
export type { FormatOptions } from "date-fns"; | ||
/** @private */ | ||
/** The options for the {@link Formatters}. */ | ||
export type FormatOptions = DateFnsFormatOptions; | ||
/** The options for the {@link Labels}. */ | ||
export type LabelOptions = DateFnsFormatOptions; | ||
/** The locale used within DayPicker. */ | ||
export type Locale = DateFnsLocale; | ||
export type { Month as DateFnsMonth } from "date-fns"; | ||
/** The default date library to use with the date picker. */ | ||
/** | ||
* The default date library to use with the date picker. | ||
* | ||
* @private | ||
* @internal | ||
*/ | ||
export declare const dateLib: { | ||
/** The constructor of the date object. */ | ||
Date: GenericDateConstructor<Date>; | ||
Date: GenericDateConstructor; | ||
addDays: typeof addDays; | ||
@@ -55,3 +61,2 @@ addMonths: typeof addMonths; | ||
getISOWeek: typeof getISOWeek; | ||
getUnixTime: typeof getUnixTime; | ||
getWeek: typeof getWeek; | ||
@@ -58,0 +63,0 @@ isAfter: typeof isAfter; |
@@ -16,3 +16,2 @@ "use strict"; | ||
const getISOWeek_1 = require("date-fns/getISOWeek"); | ||
const getUnixTime_1 = require("date-fns/getUnixTime"); | ||
const getWeek_1 = require("date-fns/getWeek"); | ||
@@ -34,3 +33,8 @@ const isAfter_1 = require("date-fns/isAfter"); | ||
const startOfYear_1 = require("date-fns/startOfYear"); | ||
/** The default date library to use with the date picker. */ | ||
/** | ||
* The default date library to use with the date picker. | ||
* | ||
* @private | ||
* @internal | ||
*/ | ||
exports.dateLib = { | ||
@@ -51,3 +55,2 @@ /** The constructor of the date object. */ | ||
getISOWeek: getISOWeek_1.getISOWeek, | ||
getUnixTime: getUnixTime_1.getUnixTime, | ||
getWeek: getWeek_1.getWeek, | ||
@@ -54,0 +57,0 @@ isAfter: isAfter_1.isAfter, |
@@ -1,1 +0,1 @@ | ||
export * from "./dateLib"; | ||
export * from "./dateLib.js"; |
@@ -17,3 +17,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./dateLib"), exports); | ||
__exportStar(require("./dateLib.js"), exports); | ||
//# sourceMappingURL=index.js.map |
import React from "react"; | ||
import type { Modifiers, PropsMulti } from "../types"; | ||
export type MultiContextValue<T> = { | ||
setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined; | ||
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; | ||
@@ -13,14 +13,4 @@ } & (T extends { | ||
}); | ||
/** @private */ | ||
export declare function MultiProvider(props: React.PropsWithChildren<PropsMulti>): React.JSX.Element; | ||
/** | ||
* Access to the multi context to get the selected dates or update them. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare function useMulti<T extends { | ||
required: boolean; | ||
}>(): MultiContextValue<T>; | ||
export declare function useMulti<T extends DayPickerProps>(props: T extends { | ||
mode: "multiple"; | ||
} ? PropsMulti | PropsMultiRequired : object, dateLib: DateLib): UseMulti<T>; |
@@ -6,10 +6,8 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useMulti = exports.MultiProvider = void 0; | ||
exports.useMulti = useMulti; | ||
const react_1 = __importDefault(require("react")); | ||
const contexts_1 = require("../contexts"); | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
const MultiContext = react_1.default.createContext(undefined); | ||
function useMultiContextValue({ required = false, min = undefined, max = undefined, selected, onSelect }) { | ||
const { mode, dateLib: { isSameDay, Date } } = (0, contexts_1.useProps)(); | ||
const [dates, setDates] = react_1.default.useState(selected); | ||
function useMulti(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [dates, setDates] = react_1.default.useState(mode !== "multiple" ? undefined : selected); | ||
const { isSameDay, Date } = dateLib; | ||
// Update the selected date if the required flag is set. | ||
@@ -32,2 +30,3 @@ react_1.default.useEffect(() => { | ||
}; | ||
const { min, max } = props; | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
@@ -62,28 +61,6 @@ let newDates = [...(dates ?? [])]; | ||
selected: dates, | ||
setSelected, | ||
handleSelect: setSelected, | ||
isSelected | ||
}; | ||
} | ||
/** @private */ | ||
function MultiProvider(props) { | ||
const value = useMultiContextValue(props); | ||
return (react_1.default.createElement(MultiContext.Provider, { value: value }, props.children)); | ||
} | ||
exports.MultiProvider = MultiProvider; | ||
/** | ||
* Access to the multi context to get the selected dates or update them. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
function useMulti() { | ||
const context = react_1.default.useContext(MultiContext); | ||
if (!context) { | ||
throw new Error("useMulti() must be used within a MultiContextProvider."); | ||
} | ||
return context; | ||
} | ||
exports.useMulti = useMulti; | ||
//# sourceMappingURL=useMulti.js.map |
import React from "react"; | ||
import { DateRange, Modifiers, PropsRange } from "../types"; | ||
export type RangeContextValue<T> = { | ||
setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined; | ||
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 { | ||
@@ -13,14 +16,4 @@ required: true; | ||
}); | ||
/** @private */ | ||
export declare function RangeProvider(props: React.PropsWithChildren<PropsRange>): React.JSX.Element; | ||
/** | ||
* Access to the range context to get the selected range or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare function useRange<T extends { | ||
required: boolean; | ||
}>(): RangeContextValue<T>; | ||
export declare function useRange<T extends DayPickerProps>(props: T extends { | ||
mode: "range"; | ||
} ? PropsRange | PropsRangeRequired : object, dateLib: DateLib): UseRange<T>; |
@@ -6,16 +6,13 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useRange = exports.RangeProvider = void 0; | ||
exports.useRange = useRange; | ||
const react_1 = __importDefault(require("react")); | ||
const contexts_1 = require("../contexts"); | ||
const utils_1 = require("../utils"); | ||
const isDateInRange_1 = require("../utils/isDateInRange"); | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
const RangeContext = react_1.default.createContext(undefined); | ||
function useRangeContextValue({ required, min, max, selected, onSelect }) { | ||
const { dateLib, mode } = (0, contexts_1.useProps)(); | ||
const index_js_1 = require("../utils/index.js"); | ||
const isDateInRange_js_1 = require("../utils/isDateInRange.js"); | ||
function useRange(props, dateLib) { | ||
const { mode, disabled, selected, required, onSelect } = props; | ||
const { differenceInCalendarDays } = dateLib; | ||
const [range, setRange] = react_1.default.useState(selected); | ||
const [range, setRange] = react_1.default.useState(mode === "range" ? selected : undefined); | ||
// Update the selected date if the required flag is set. | ||
react_1.default.useEffect(() => { | ||
if (mode !== "multiple") | ||
if (mode !== "range") | ||
return; | ||
@@ -30,11 +27,14 @@ if (required && range === undefined) { | ||
return; | ||
if (range === selected) | ||
return; | ||
setRange(selected); | ||
}, [mode, selected]); | ||
const isSelected = required | ||
? (date) => (0, isDateInRange_1.isDateInRange)(date, range, dateLib) | ||
: (date) => range && (0, isDateInRange_1.isDateInRange)(date, range, dateLib); | ||
}, [mode, range, selected]); | ||
const isSelected = (date) => range && (0, isDateInRange_js_1.isDateInRange)(date, range, dateLib); | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "range") | ||
return; | ||
const newRange = triggerDate | ||
? (0, utils_1.addToRange)(triggerDate, range, dateLib) | ||
? (0, index_js_1.addToRange)(triggerDate, range, dateLib) | ||
: undefined; | ||
const { min, max } = props; | ||
if (min) { | ||
@@ -56,2 +56,13 @@ if (newRange?.from && | ||
} | ||
if (newRange?.from && newRange.to) { | ||
let newDate = newRange.from; | ||
while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) { | ||
newDate = dateLib.addDays(newDate, 1); | ||
if (disabled && (0, index_js_1.dateMatchModifiers)(newDate, disabled, dateLib)) { | ||
newRange.from = triggerDate; | ||
newRange.to = undefined; | ||
break; | ||
} | ||
} | ||
} | ||
setRange(newRange); | ||
@@ -61,30 +72,25 @@ onSelect?.(newRange, triggerDate, modifiers, e); | ||
}; | ||
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, | ||
setSelected, | ||
isSelected | ||
handleSelect: setSelected, | ||
isSelected, | ||
isRangeStart, | ||
isRangeEnd, | ||
isRangeMiddle | ||
}; | ||
} | ||
/** @private */ | ||
function RangeProvider(props) { | ||
const value = useRangeContextValue(props); | ||
return (react_1.default.createElement(RangeContext.Provider, { value: value }, props.children)); | ||
} | ||
exports.RangeProvider = RangeProvider; | ||
/** | ||
* Access to the range context to get the selected range or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
function useRange() { | ||
const context = react_1.default.useContext(RangeContext); | ||
if (!context) { | ||
throw new Error("useRange() must be used within a RangeContextProvider."); | ||
} | ||
return context; | ||
} | ||
exports.useRange = useRange; | ||
//# sourceMappingURL=useRange.js.map |
import React from "react"; | ||
import { Modifiers, PropsSingle } from "../types"; | ||
export type SingleContextValue<T> = { | ||
setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
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; | ||
isSelected: (date: Date) => boolean; | ||
@@ -13,12 +13,4 @@ } & (T extends { | ||
}); | ||
/** @private */ | ||
export declare function SingleProvider(props: React.PropsWithChildren<PropsSingle>): React.JSX.Element; | ||
/** | ||
* Access to the single context to get the selected date or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare function useSingle(): SingleContextValue<any>; | ||
export declare function useSingle<T extends DayPickerProps>(props: T extends { | ||
mode: "single"; | ||
} ? PropsSingle | PropsSingleRequired : object, dateLib: DateLib): UseSingle<T>; |
@@ -6,16 +6,16 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useSingle = exports.SingleProvider = void 0; | ||
exports.useSingle = useSingle; | ||
const react_1 = __importDefault(require("react")); | ||
const contexts_1 = require("../contexts"); | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
const SingleContext = react_1.default.createContext(undefined); | ||
function useSingleContextValue({ required = false, selected, onSelect }) { | ||
const [date, setDate] = react_1.default.useState(selected); | ||
const { dateLib: { isSameDay }, today, mode } = (0, contexts_1.useProps)(); | ||
function useSingle(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [date, setDate] = react_1.default.useState(mode !== "single" ? undefined : selected); | ||
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(today); | ||
setDate(startOfDay(new Date())); | ||
} | ||
}, [required, date, today]); | ||
}, [required, date, Date, startOfDay, mode]); | ||
// Update the selected date if the `selected` value changes. | ||
@@ -31,2 +31,4 @@ react_1.default.useEffect(() => { | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "single") | ||
return; | ||
let newDate = triggerDate; | ||
@@ -38,29 +40,16 @@ if (!required && date && date && isSameDay(triggerDate, date)) { | ||
setDate(newDate); | ||
onSelect?.(newDate, triggerDate, modifiers, e); | ||
if (required) { | ||
onSelect?.(newDate, triggerDate, modifiers, e); | ||
} | ||
else { | ||
onSelect?.(newDate, triggerDate, modifiers, e); | ||
} | ||
return newDate; | ||
}; | ||
return { selected: date, setSelected, isSelected }; | ||
return { | ||
selected: date, | ||
handleSelect: setSelected, | ||
isSelected | ||
}; | ||
} | ||
/** @private */ | ||
function SingleProvider(props) { | ||
const value = useSingleContextValue(props); | ||
return (react_1.default.createElement(SingleContext.Provider, { value: value }, props.children)); | ||
} | ||
exports.SingleProvider = SingleProvider; | ||
/** | ||
* Access to the single context to get the selected date or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
function useSingle() { | ||
const context = react_1.default.useContext(SingleContext); | ||
if (!context) { | ||
throw new Error("useSingle() must be used within a SingleContextProvider"); | ||
} | ||
return context; | ||
} | ||
exports.useSingle = useSingle; | ||
//# sourceMappingURL=useSingle.js.map |
@@ -1,10 +0,7 @@ | ||
/// <reference types="react" /> | ||
import { Calendar } from "../components/Calendar"; | ||
import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption"; | ||
import { Week, type WeekProps } from "../components/Week"; | ||
import { useCalendar } from "../contexts"; | ||
import { useProps, type PropsContextValue } from "../contexts"; | ||
import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels"; | ||
import type { PropsMulti, PropsRange, PropsSingle } from "./props"; | ||
import type { Mode, DayEventHandler } from "./shared"; | ||
import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption.js"; | ||
import { Week, type WeekProps } from "../components/Week.js"; | ||
import { labelDayButton, labelNext, labelWeekday, labelWeekNumber } from "../labels/index.js"; | ||
import { useDayPicker } from "../useDayPicker.js"; | ||
import type { PropsMulti, PropsRange, PropsSingle } from "./props.js"; | ||
import type { Mode, DayEventHandler } from "./shared.js"; | ||
/** | ||
@@ -21,13 +18,6 @@ * @deprecated This type will be removed. | ||
/** | ||
* @deprecated This type has been renamed. Use `Calendar` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare const Root: typeof Calendar; | ||
/** | ||
* @deprecated This component has been renamed. Use `MonthCaption` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -44,3 +34,3 @@ export declare const Caption: typeof MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -52,3 +42,3 @@ export type HeadRow = any; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -113,18 +103,12 @@ export declare const Row: typeof Week; | ||
/** | ||
* @deprecated This type has been renamed to `useProps`. | ||
* @deprecated This type has been removed to `useDayPicker`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export declare const useDayPicker: typeof useProps; | ||
export declare const useNavigation: typeof useDayPicker; | ||
/** | ||
* @deprecated This type has been renamed to `useCalendar`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export declare const useNavigation: typeof useCalendar; | ||
/** | ||
* @deprecated This hook has been removed. Use a custom `Day` component instead. | ||
* @protected | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -138,6 +122,6 @@ export type useDayRender = any; | ||
/** | ||
* @deprecated Use `typeof labelDay` instead. | ||
* @deprecated Use `typeof labelDayButton` instead. | ||
* @protected | ||
*/ | ||
export type DayLabel = typeof labelDay; | ||
export type DayLabel = typeof labelDayButton; | ||
/** | ||
@@ -193,6 +177,1 @@ * @deprecated Use `typeof labelNext` or `typeof labelPrevious` instead. | ||
export type DayTouchEventHandler = DayEventHandler<React.TouchEvent>; | ||
/** | ||
* @deprecated The type has been renamed. Use `PropsContext` instead. | ||
* @protected | ||
*/ | ||
export type DayPickerContext = PropsContextValue; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useNavigation = exports.useDayPicker = exports.Row = exports.Caption = exports.Root = void 0; | ||
exports.useNavigation = exports.Row = exports.Caption = void 0; | ||
/* eslint-disable @typescript-eslint/no-explicit-any */ | ||
const Calendar_1 = require("../components/Calendar"); | ||
const MonthCaption_1 = require("../components/MonthCaption"); | ||
const Week_1 = require("../components/Week"); | ||
const contexts_1 = require("../contexts"); | ||
const contexts_2 = require("../contexts"); | ||
const MonthCaption_js_1 = require("../components/MonthCaption.js"); | ||
const Week_js_1 = require("../components/Week.js"); | ||
const useDayPicker_js_1 = require("../useDayPicker.js"); | ||
/** | ||
* @deprecated This type has been renamed. Use `Calendar` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
exports.Root = Calendar_1.Calendar; | ||
/** | ||
* @deprecated This component has been renamed. Use `MonthCaption` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
exports.Caption = MonthCaption_1.MonthCaption; | ||
exports.Caption = MonthCaption_js_1.MonthCaption; | ||
/** | ||
@@ -28,17 +19,11 @@ * @deprecated This component has been renamed. Use `Week` instead. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
exports.Row = Week_1.Week; | ||
exports.Row = Week_js_1.Week; | ||
/** | ||
* @deprecated This type has been renamed to `useProps`. | ||
* @deprecated This type has been removed to `useDayPicker`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
exports.useDayPicker = contexts_2.useProps; | ||
/** | ||
* @deprecated This type has been renamed to `useCalendar`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
exports.useNavigation = contexts_1.useCalendar; | ||
exports.useNavigation = useDayPicker_js_1.useDayPicker; | ||
//# sourceMappingURL=deprecated.js.map |
@@ -1,3 +0,3 @@ | ||
export * from "./deprecated"; | ||
export * from "./shared"; | ||
export * from "./props"; | ||
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; |
@@ -17,5 +17,5 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./deprecated"), exports); | ||
__exportStar(require("./shared"), exports); | ||
__exportStar(require("./props"), exports); | ||
__exportStar(require("./deprecated.js"), exports); | ||
__exportStar(require("./shared.js"), exports); | ||
__exportStar(require("./props.js"), exports); | ||
//# sourceMappingURL=index.js.map |
import React from "react"; | ||
import type { Locale } from "../lib/dateLib"; | ||
import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, WeekNumberMouseEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared.js"; | ||
/** | ||
@@ -177,5 +177,12 @@ * The props for the `<DayPicker />` component. | ||
components?: CustomComponents; | ||
/** Content to add to the grid as footer element. */ | ||
footer?: React.ReactNode; | ||
/** | ||
* Add a footer to the calendar, acting as live region. | ||
* | ||
* Use this prop to communicate the calendar's status to screen readers. | ||
* Prefer strings over complex UI elements. | ||
* | ||
* @see https://daypicker.dev/next/using-daypicker/accessibility | ||
*/ | ||
footer?: React.ReactNode | string; | ||
/** | ||
* When a selection mode is set, DayPicker will focus the first selected day | ||
@@ -261,2 +268,12 @@ * (if set) or the today's date (if not disabled). | ||
onMonthChange?: MonthChangeEventHandler; | ||
/** Event handler when the next month button is clicked. */ | ||
onNextClick?: MonthChangeEventHandler; | ||
/** Event handler when the previous month button is clicked. */ | ||
onPrevClick?: MonthChangeEventHandler; | ||
/** | ||
* Event handler when a week number is clicked | ||
* | ||
* @deprecated Use a custom `WeekNumber` component instead. | ||
*/ | ||
onWeekNumberClick?: any; | ||
/** Event handler when a day is clicked. */ | ||
@@ -268,38 +285,52 @@ onDayClick?: DayEventHandler<React.MouseEvent>; | ||
onDayBlur?: DayEventHandler<React.FocusEvent>; | ||
/** Event handler when the mouse enters a day. */ | ||
onDayMouseEnter?: DayEventHandler<React.MouseEvent>; | ||
/** Event handler when the mouse leaves a day. */ | ||
onDayMouseLeave?: DayEventHandler<React.MouseEvent>; | ||
/** Event handler when a key is pressed on a day. */ | ||
onDayKeyDown?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a key is released on a day. */ | ||
/** | ||
* Replace the default date library with a custom one. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @experimental | ||
*/ | ||
dateLib?: Partial<DateLib> | undefined; | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayKeyUp?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a key is pressed and released on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayKeyPress?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a pointer enters a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayPointerEnter?: DayEventHandler<React.PointerEvent>; | ||
/** Event handler when a pointer leaves a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayPointerLeave?: DayEventHandler<React.PointerEvent>; | ||
/** Event handler when a touch is cancelled on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchCancel?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch ends on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchEnd?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch moves on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchMove?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch starts on a day. */ | ||
onDayTouchStart?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when the next month button is clicked. */ | ||
onNextClick?: MonthChangeEventHandler; | ||
/** Event handler when the previous month button is clicked. */ | ||
onPrevClick?: MonthChangeEventHandler; | ||
/** Event handler when a week number is clicked */ | ||
onWeekNumberClick?: WeekNumberMouseEventHandler; | ||
/** | ||
* Replace the default date library with a custom one. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @experimental | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
dateLib?: Partial<DateLib> | undefined; | ||
onDayTouchStart?: DayEventHandler<React.TouchEvent>; | ||
} | ||
@@ -376,2 +407,3 @@ /** | ||
selected?: DateRange | undefined; | ||
disabled?: Matcher | Matcher[] | undefined; | ||
onSelect?: (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined; | ||
@@ -378,0 +410,0 @@ min?: number; |
@@ -1,7 +0,7 @@ | ||
import type { MouseEvent, CSSProperties } from "react"; | ||
import { UI, DayFlag, CalendarFlag, ChevronFlag, WeekNumberFlag, SelectionState } from "../UI"; | ||
import * as components from "../components/custom-components"; | ||
import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters"; | ||
import { labelDay, labelCaption, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels"; | ||
import { dateLib } from "../lib"; | ||
import type { CSSProperties } from "react"; | ||
import { UI, DayFlag, SelectionState } from "../UI.js"; | ||
import * as components from "../components/custom-components.js"; | ||
import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters/index.js"; | ||
import { labelDayButton, labelNav, labelGrid, labelGridcell, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels/index.js"; | ||
import { dateLib } from "../lib/index.js"; | ||
/** | ||
@@ -42,3 +42,3 @@ * Selection modes supported by DayPicker. | ||
formatWeekNumber: typeof formatWeekNumber; | ||
/** Format the week day name in the header */ | ||
/** Format the week day name in the header. */ | ||
formatWeekdayName: typeof formatWeekdayName; | ||
@@ -48,17 +48,23 @@ }; | ||
export type Labels = { | ||
/** Return the label for the month dropdown. */ | ||
labelCaption: typeof labelCaption; | ||
/** Return the label for the month dropdown. */ | ||
/** The label for the navigation toolbar. */ | ||
labelNav: typeof labelNav; | ||
/** The label for the month grid. */ | ||
labelGrid: typeof labelGrid; | ||
/** The label for the gridcell, when the calendar is not interactive. */ | ||
labelGridcell: typeof labelGridcell; | ||
/** The label for the month dropdown. */ | ||
labelMonthDropdown: typeof labelMonthDropdown; | ||
/** Return the label for the year dropdown. */ | ||
/** The label for the year dropdown. */ | ||
labelYearDropdown: typeof labelYearDropdown; | ||
/** Return the label for the next month button. */ | ||
/** The label for the "next month" button. */ | ||
labelNext: typeof labelNext; | ||
/** Return the label for the previous month button. */ | ||
/** The label for the "previous month" button. */ | ||
labelPrevious: typeof labelPrevious; | ||
/** Return the label for the day cell. */ | ||
labelDay: typeof labelDay; | ||
/** Return the label for the weekday. */ | ||
/** The label for the day button.. */ | ||
labelDayButton: typeof labelDayButton; | ||
/** @deprecated Use {@link labelDayButton} instead. */ | ||
labelDay: typeof labelDayButton; | ||
/** The label for the weekday. */ | ||
labelWeekday: typeof labelWeekday; | ||
/** Return the label for the week number. */ | ||
/** The label for the week number. */ | ||
labelWeekNumber: typeof labelWeekNumber; | ||
@@ -172,17 +178,9 @@ /** | ||
export type MonthChangeEventHandler = (month: Date) => void; | ||
/** The event handler when the week number is clicked. */ | ||
export type WeekNumberMouseEventHandler = ( | ||
/** The week number that has been clicked. */ | ||
weekNumber: number, | ||
/** The dates in the clicked week. */ | ||
dates: Date[], | ||
/** The mouse event that triggered this event. */ | ||
e: MouseEvent) => void; | ||
/** Maps user interface elements, selection states, and flags to a CSS style. */ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: CSSProperties | undefined; | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** Defines the class names for various UI components and states. */ | ||
export type ClassNames = { | ||
[key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: string; | ||
[key in UI | SelectionState | DayFlag]: string; | ||
}; | ||
@@ -189,0 +187,0 @@ /** The flags that are matching a day in the calendar. */ |
@@ -11,9 +11,6 @@ /** | ||
ButtonPrevious = "button_previous", | ||
/** The next button the navigation */ | ||
/** The next button the navigation. */ | ||
ButtonNext = "button_next", | ||
/** | ||
* The calendar element: the root component displaying the months and the | ||
* navigation bar. Extended by {@link CalendarFlag}. | ||
*/ | ||
Calendar = "calendar", | ||
/** The root component displaying the months and the navigation bar. */ | ||
Root = "root", | ||
/** The Chevron SVG element used by navigation buttons and dropdowns. */ | ||
@@ -26,4 +23,4 @@ Chevron = "chevron", | ||
Day = "day", | ||
/** The element containing the formatted day's date, inside the grid cell. */ | ||
DayDate = "day_date", | ||
/** The button containing the formatted day's date, inside the grid cell. */ | ||
DayButton = "day_button", | ||
/** The caption label of the month (when not showing the dropdown navigation). */ | ||
@@ -40,3 +37,3 @@ CaptionLabel = "caption_label", | ||
/** The month grid. */ | ||
Month = "month", | ||
MonthGrid = "month_grid", | ||
/** Contains the dropdown navigation or the caption label. */ | ||
@@ -46,7 +43,7 @@ MonthCaption = "month_caption", | ||
MonthsDropdown = "months_dropdown", | ||
/** Wrapper of the {@link} grid. */ | ||
MonthWrapper = "month_wrapper", | ||
/** Wrapper of the month grid. */ | ||
Month = "month", | ||
/** The container of the displayed months. */ | ||
Months = "months", | ||
/** The navigation bar with the previous and next buttons */ | ||
/** The navigation bar with the previous and next buttons. */ | ||
Nav = "nav", | ||
@@ -61,7 +58,6 @@ /** The row containing the week. */ | ||
Weekdays = "weekdays", | ||
/** | ||
* The row header containing the week number. Extended by | ||
* {@link WeekNumberFlag}. | ||
*/ | ||
/** The row header containing the week number. */ | ||
WeekNumber = "week_number", | ||
/** The row header containing the week number. */ | ||
WeekNumberHeader = "week_number_header", | ||
/** The dropdown with the years. */ | ||
@@ -72,10 +68,8 @@ YearsDropdown = "years_dropdown" | ||
export declare enum DayFlag { | ||
/** The day is disabled */ | ||
/** The day is disabled. */ | ||
disabled = "disabled", | ||
/** The day is hidden */ | ||
/** The day is hidden. */ | ||
hidden = "hidden", | ||
/** The day is outside the current month */ | ||
/** The day is outside the current month. */ | ||
outside = "outside", | ||
/** The day is focusable. */ | ||
focusable = "focusable", | ||
/** The day is focused. */ | ||
@@ -100,23 +94,1 @@ focused = "focused", | ||
} | ||
/** Flags that can be applied to the {@link UI.Calendar} element. */ | ||
export declare enum CalendarFlag { | ||
/** Assigned when the week numbers are show. */ | ||
has_week_numbers = "has_week_numbers", | ||
/** Assigned when the weekdays are hidden. */ | ||
no_weekdays = "no_weekdays", | ||
/** Assigned when the calendar has multiple months. */ | ||
has_multiple_months = "has_multiple_months" | ||
} | ||
/** Flags that can be applied to the {@link UI.Chevron} element. */ | ||
export declare enum ChevronFlag { | ||
/** Assigned when the week numbers are show. */ | ||
disabled = "chevron_disabled" | ||
} | ||
/** Flags that can be applied to the {@link UI.WeekNumber} element. */ | ||
export declare enum WeekNumberFlag { | ||
/** | ||
* Assigned when the week number is interactive, i.e. has an | ||
* `onWeekNumberClick` event attached to it. | ||
*/ | ||
week_number_interactive = "week_number_interactive" | ||
} |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.WeekNumberFlag = exports.ChevronFlag = exports.CalendarFlag = exports.SelectionState = exports.DayFlag = exports.UI = void 0; | ||
exports.SelectionState = exports.DayFlag = exports.UI = void 0; | ||
/** | ||
@@ -15,9 +15,6 @@ * The UI elements composing DayPicker. These elements are mapped to | ||
UI["ButtonPrevious"] = "button_previous"; | ||
/** The next button the navigation */ | ||
/** The next button the navigation. */ | ||
UI["ButtonNext"] = "button_next"; | ||
/** | ||
* The calendar element: the root component displaying the months and the | ||
* navigation bar. Extended by {@link CalendarFlag}. | ||
*/ | ||
UI["Calendar"] = "calendar"; | ||
/** The root component displaying the months and the navigation bar. */ | ||
UI["Root"] = "root"; | ||
/** The Chevron SVG element used by navigation buttons and dropdowns. */ | ||
@@ -30,4 +27,4 @@ UI["Chevron"] = "chevron"; | ||
UI["Day"] = "day"; | ||
/** The element containing the formatted day's date, inside the grid cell. */ | ||
UI["DayDate"] = "day_date"; | ||
/** The button containing the formatted day's date, inside the grid cell. */ | ||
UI["DayButton"] = "day_button"; | ||
/** The caption label of the month (when not showing the dropdown navigation). */ | ||
@@ -44,3 +41,3 @@ UI["CaptionLabel"] = "caption_label"; | ||
/** The month grid. */ | ||
UI["Month"] = "month"; | ||
UI["MonthGrid"] = "month_grid"; | ||
/** Contains the dropdown navigation or the caption label. */ | ||
@@ -50,7 +47,7 @@ UI["MonthCaption"] = "month_caption"; | ||
UI["MonthsDropdown"] = "months_dropdown"; | ||
/** Wrapper of the {@link} grid. */ | ||
UI["MonthWrapper"] = "month_wrapper"; | ||
/** Wrapper of the month grid. */ | ||
UI["Month"] = "month"; | ||
/** The container of the displayed months. */ | ||
UI["Months"] = "months"; | ||
/** The navigation bar with the previous and next buttons */ | ||
/** The navigation bar with the previous and next buttons. */ | ||
UI["Nav"] = "nav"; | ||
@@ -65,7 +62,6 @@ /** The row containing the week. */ | ||
UI["Weekdays"] = "weekdays"; | ||
/** | ||
* The row header containing the week number. Extended by | ||
* {@link WeekNumberFlag}. | ||
*/ | ||
/** The row header containing the week number. */ | ||
UI["WeekNumber"] = "week_number"; | ||
/** The row header containing the week number. */ | ||
UI["WeekNumberHeader"] = "week_number_header"; | ||
/** The dropdown with the years. */ | ||
@@ -77,10 +73,8 @@ UI["YearsDropdown"] = "years_dropdown"; | ||
(function (DayFlag) { | ||
/** The day is disabled */ | ||
/** The day is disabled. */ | ||
DayFlag["disabled"] = "disabled"; | ||
/** The day is hidden */ | ||
/** The day is hidden. */ | ||
DayFlag["hidden"] = "hidden"; | ||
/** The day is outside the current month */ | ||
/** The day is outside the current month. */ | ||
DayFlag["outside"] = "outside"; | ||
/** The day is focusable. */ | ||
DayFlag["focusable"] = "focusable"; | ||
/** The day is focused. */ | ||
@@ -106,27 +100,2 @@ DayFlag["focused"] = "focused"; | ||
})(SelectionState || (exports.SelectionState = SelectionState = {})); | ||
/** Flags that can be applied to the {@link UI.Calendar} element. */ | ||
var CalendarFlag; | ||
(function (CalendarFlag) { | ||
/** Assigned when the week numbers are show. */ | ||
CalendarFlag["has_week_numbers"] = "has_week_numbers"; | ||
/** Assigned when the weekdays are hidden. */ | ||
CalendarFlag["no_weekdays"] = "no_weekdays"; | ||
/** Assigned when the calendar has multiple months. */ | ||
CalendarFlag["has_multiple_months"] = "has_multiple_months"; | ||
})(CalendarFlag || (exports.CalendarFlag = CalendarFlag = {})); | ||
/** Flags that can be applied to the {@link UI.Chevron} element. */ | ||
var ChevronFlag; | ||
(function (ChevronFlag) { | ||
/** Assigned when the week numbers are show. */ | ||
ChevronFlag["disabled"] = "chevron_disabled"; | ||
})(ChevronFlag || (exports.ChevronFlag = ChevronFlag = {})); | ||
/** Flags that can be applied to the {@link UI.WeekNumber} element. */ | ||
var WeekNumberFlag; | ||
(function (WeekNumberFlag) { | ||
/** | ||
* Assigned when the week number is interactive, i.e. has an | ||
* `onWeekNumberClick` event attached to it. | ||
*/ | ||
WeekNumberFlag["week_number_interactive"] = "week_number_interactive"; | ||
})(WeekNumberFlag || (exports.WeekNumberFlag = WeekNumberFlag = {})); | ||
//# sourceMappingURL=UI.js.map |
import React from "react"; | ||
import { type DayPickerProps } from "./"; | ||
import { type DayPickerProps } from "./index.js"; | ||
export declare function DayPicker(props: DayPickerProps): React.JSX.Element; |
@@ -6,10 +6,9 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DayPicker = void 0; | ||
exports.DayPicker = DayPicker; | ||
const react_1 = __importDefault(require("react")); | ||
const utc_1 = require("@date-fns/utc"); | ||
const _1 = require("./"); | ||
const index_js_1 = require("./index.js"); | ||
function DayPicker(props) { | ||
return react_1.default.createElement(_1.DayPicker, { dateLib: { Date: utc_1.UTCDate }, ...props }); | ||
return react_1.default.createElement(index_js_1.DayPicker, { dateLib: { Date: utc_1.UTCDate }, ...props }); | ||
} | ||
exports.DayPicker = DayPicker; | ||
//# sourceMappingURL=utc.js.map |
@@ -1,2 +0,2 @@ | ||
import type { DateRange, DateLib } from "../types"; | ||
import type { DateRange, DateLib } from "../types/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Add a day to an existing range. |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.addToRange = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.addToRange = addToRange; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -13,3 +13,3 @@ * Add a day to an existing range. | ||
*/ | ||
function addToRange(date, range, dateLib = lib_1.dateLib) { | ||
function addToRange(date, range, dateLib = index_js_1.dateLib) { | ||
const { from, to } = range || {}; | ||
@@ -49,3 +49,2 @@ const { isSameDay, isAfter, isBefore } = dateLib; | ||
} | ||
exports.addToRange = addToRange; | ||
//# sourceMappingURL=addToRange.js.map |
@@ -1,4 +0,7 @@ | ||
import type { DateLib, Matcher } from "../types"; | ||
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[]; | ||
/** | ||
* Returns whether a day matches against at least one of the given Matchers. | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* | ||
@@ -20,2 +23,2 @@ * ```tsx | ||
*/ | ||
export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateUtils?: DateLib): boolean; | ||
export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateLib: DateLib): boolean; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.dateMatchModifiers = void 0; | ||
const lib_1 = require("../lib"); | ||
const isDateInRange_1 = require("./isDateInRange"); | ||
const typeguards_1 = require("./typeguards"); | ||
/** Returns true if `value` is a Date type. */ | ||
function isDateType(value) { | ||
return lib_1.dateLib.isDate(value); | ||
} | ||
exports.isDatesArray = isDatesArray; | ||
exports.dateMatchModifiers = dateMatchModifiers; | ||
const isDateInRange_js_1 = require("./isDateInRange.js"); | ||
const typeguards_js_1 = require("./typeguards.js"); | ||
/** Returns true if `value` is an array of valid dates. */ | ||
function isArrayOfDates(value) { | ||
return Array.isArray(value) && value.every(lib_1.dateLib.isDate); | ||
function isDatesArray(value, dateLib) { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
/** | ||
* Returns whether a day matches against at least one of the given Matchers. | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* | ||
@@ -33,5 +30,5 @@ * ```tsx | ||
*/ | ||
function dateMatchModifiers(date, matchers, dateUtils = lib_1.dateLib) { | ||
function dateMatchModifiers(date, matchers, dateLib) { | ||
const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers; | ||
const { isSameDay, differenceInCalendarDays, isAfter } = dateUtils; | ||
const { isSameDay, differenceInCalendarDays, isAfter } = dateLib; | ||
return matchersArr.some((matcher) => { | ||
@@ -41,15 +38,15 @@ if (typeof matcher === "boolean") { | ||
} | ||
if (isDateType(matcher)) { | ||
if (dateLib.isDate(matcher)) { | ||
return isSameDay(date, matcher); | ||
} | ||
if (isArrayOfDates(matcher)) { | ||
if (isDatesArray(matcher, dateLib)) { | ||
return matcher.includes(date); | ||
} | ||
if ((0, typeguards_1.isDateRange)(matcher)) { | ||
return (0, isDateInRange_1.isDateInRange)(date, matcher, dateUtils); | ||
if ((0, typeguards_js_1.isDateRange)(matcher)) { | ||
return (0, isDateInRange_js_1.isDateInRange)(date, matcher, dateLib); | ||
} | ||
if ((0, typeguards_1.isDayOfWeekType)(matcher)) { | ||
if ((0, typeguards_js_1.isDayOfWeekType)(matcher)) { | ||
return matcher.dayOfWeek.includes(date.getDay()); | ||
} | ||
if ((0, typeguards_1.isDateInterval)(matcher)) { | ||
if ((0, typeguards_js_1.isDateInterval)(matcher)) { | ||
const diffBefore = differenceInCalendarDays(matcher.before, date); | ||
@@ -67,6 +64,6 @@ const diffAfter = differenceInCalendarDays(matcher.after, date); | ||
} | ||
if ((0, typeguards_1.isDateAfterType)(matcher)) { | ||
if ((0, typeguards_js_1.isDateAfterType)(matcher)) { | ||
return differenceInCalendarDays(date, matcher.after) > 0; | ||
} | ||
if ((0, typeguards_1.isDateBeforeType)(matcher)) { | ||
if ((0, typeguards_js_1.isDateBeforeType)(matcher)) { | ||
return differenceInCalendarDays(matcher.before, date) > 0; | ||
@@ -80,3 +77,2 @@ } | ||
} | ||
exports.dateMatchModifiers = dateMatchModifiers; | ||
//# sourceMappingURL=dateMatchModifiers.js.map |
@@ -1,4 +0,4 @@ | ||
export * from "./addToRange"; | ||
export * from "./dateMatchModifiers"; | ||
export * from "./isDateInRange"; | ||
export * from "./typeguards"; | ||
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./typeguards.js"; |
@@ -17,6 +17,6 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./addToRange"), exports); | ||
__exportStar(require("./dateMatchModifiers"), exports); | ||
__exportStar(require("./isDateInRange"), exports); | ||
__exportStar(require("./typeguards"), exports); | ||
__exportStar(require("./addToRange.js"), exports); | ||
__exportStar(require("./dateMatchModifiers.js"), exports); | ||
__exportStar(require("./isDateInRange.js"), exports); | ||
__exportStar(require("./typeguards.js"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import type { DateRange, DateLib } from "../types"; | ||
import type { DateRange, DateLib } from "../types/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Determines whether a given date is inside a specified date range. |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.isDateInRange = void 0; | ||
const lib_1 = require("../lib"); | ||
exports.isDateInRange = isDateInRange; | ||
const index_js_1 = require("../lib/index.js"); | ||
/** | ||
@@ -10,3 +10,3 @@ * Determines whether a given date is inside a specified date range. | ||
*/ | ||
function isDateInRange(date, range, dateLib = lib_1.dateLib) { | ||
function isDateInRange(date, range, dateLib = index_js_1.dateLib) { | ||
let { from, to } = range; | ||
@@ -31,3 +31,2 @@ const { differenceInCalendarDays, isSameDay } = dateLib; | ||
} | ||
exports.isDateInRange = isDateInRange; | ||
//# sourceMappingURL=isDateInRange.js.map |
@@ -1,2 +0,2 @@ | ||
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types"; | ||
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types/index.js"; | ||
/** | ||
@@ -27,8 +27,2 @@ * Returns true if `matcher` is of type `DateInterval`. | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isDayOfWeekType(value: unknown): value is DayOfWeek; | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
@@ -62,2 +56,8 @@ * | ||
/** | ||
* 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. | ||
@@ -64,0 +64,0 @@ * @protected |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.isDayPickerRange = exports.isRange = exports.isDayPickerMultiple = exports.isMulti = exports.isDayPickerSingle = exports.isSingle = exports.isDayOfWeekType = exports.isDateBeforeType = exports.isDateAfterType = exports.isDateRange = exports.isDateInterval = void 0; | ||
exports.isDayPickerRange = exports.isDayPickerMultiple = exports.isDayPickerSingle = void 0; | ||
exports.isDateInterval = isDateInterval; | ||
exports.isDateRange = isDateRange; | ||
exports.isDateAfterType = isDateAfterType; | ||
exports.isDateBeforeType = isDateBeforeType; | ||
exports.isSingle = isSingle; | ||
exports.isMulti = isMulti; | ||
exports.isRange = isRange; | ||
exports.isDayOfWeekType = isDayOfWeekType; | ||
/** | ||
@@ -15,3 +23,2 @@ * Returns true if `matcher` is of type `DateInterval`. | ||
} | ||
exports.isDateInterval = isDateInterval; | ||
/** | ||
@@ -25,3 +32,2 @@ * Returns true if `value` is a `DateRange` type. | ||
} | ||
exports.isDateRange = isDateRange; | ||
/** | ||
@@ -35,3 +41,2 @@ * Returns true if `value` is of type `DateAfter`. | ||
} | ||
exports.isDateAfterType = isDateAfterType; | ||
/** | ||
@@ -45,13 +50,3 @@ * Returns true if `value` is of type `DateBefore`. | ||
} | ||
exports.isDateBeforeType = isDateBeforeType; | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
function isDayOfWeekType(value) { | ||
return Boolean(value && typeof value === "object" && "dayOfWeek" in value); | ||
} | ||
exports.isDayOfWeekType = isDayOfWeekType; | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
@@ -64,3 +59,2 @@ * | ||
} | ||
exports.isSingle = isSingle; | ||
/** | ||
@@ -79,3 +73,2 @@ * @deprecated This function has been renamed Use `isSingle` instead. | ||
} | ||
exports.isMulti = isMulti; | ||
/** | ||
@@ -94,4 +87,11 @@ * @deprecated This function has been renamed Use `isMulti` instead. | ||
} | ||
exports.isRange = isRange; | ||
/** | ||
* 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. | ||
@@ -98,0 +98,0 @@ * @protected |
@@ -1,2 +0,2 @@ | ||
import type { DateLib } from "../types"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -11,3 +11,7 @@ * Represent the day displayed in the calendar. | ||
constructor(date: Date, displayMonth: Date, dateLib?: DateLib); | ||
/** The utility functions to manipulate dates. */ | ||
/** | ||
* The utility functions to manipulate dates. | ||
* | ||
* @private | ||
*/ | ||
readonly dateLib: DateLib; | ||
@@ -31,2 +35,4 @@ /** | ||
readonly date: Date; | ||
/** A unique identifier for the day. */ | ||
readonly uid: string; | ||
/** | ||
@@ -33,0 +39,0 @@ * Check if the day is the same as the given day: considering if it is in the |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -15,2 +15,6 @@ * Represent the day displayed in the calendar. | ||
this.dateLib = dateLib; | ||
const { format } = dateLib; | ||
this.uid = | ||
format(date, "yyyyMMdd") + | ||
(this.outside ? `-` + format(displayMonth, "yyyyMMdd") : ""); | ||
} | ||
@@ -17,0 +21,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
import { CalendarWeek } from "./CalendarWeek"; | ||
import { CalendarWeek } from "./CalendarWeek.js"; | ||
/** Represent a month in a calendar year. Contains the weeks within the month. */ | ||
@@ -3,0 +3,0 @@ export declare class CalendarMonth { |
@@ -1,2 +0,2 @@ | ||
import { CalendarDay } from "./CalendarDay"; | ||
import { CalendarDay } from "./CalendarDay.js"; | ||
/** Represent a week in a calendar month. */ | ||
@@ -3,0 +3,0 @@ export declare class CalendarWeek { |
@@ -1,3 +0,3 @@ | ||
export * from "./CalendarDay"; | ||
export * from "./CalendarMonth"; | ||
export * from "./CalendarWeek"; | ||
export * from "./CalendarDay.js"; | ||
export * from "./CalendarMonth.js"; | ||
export * from "./CalendarWeek.js"; |
@@ -1,4 +0,4 @@ | ||
export * from "./CalendarDay"; | ||
export * from "./CalendarMonth"; | ||
export * from "./CalendarWeek"; | ||
export * from "./CalendarDay.js"; | ||
export * from "./CalendarMonth.js"; | ||
export * from "./CalendarWeek.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import React, { type ButtonHTMLAttributes } from "react"; | ||
import React from "react"; | ||
/** | ||
@@ -10,3 +10,3 @@ * Render the button elements in the calendar. | ||
*/ | ||
export declare function Button(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element; | ||
export declare function Button(props: JSX.IntrinsicElements["button"]): React.JSX.Element; | ||
export type ButtonProps = Parameters<typeof Button>[0]; |
@@ -8,7 +8,16 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Chevron(props: { | ||
className?: string; | ||
/** | ||
* The size of the chevron. | ||
* | ||
* @defaultValue 24 | ||
*/ | ||
size?: number; | ||
/** Set to `true` to disable the chevron. */ | ||
disabled?: boolean; | ||
/** The orientation of the chevron. */ | ||
orientation?: "up" | "down" | "left" | "right"; | ||
}): React.JSX.Element; |
import React from "react"; | ||
import { ChevronFlag, UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
/** | ||
@@ -10,14 +8,7 @@ * Render the chevron icon used in the navigation buttons and dropdowns. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Chevron(props) { | ||
const { size = 24, orientation = "left" } = props; | ||
const { classNames, disableNavigation } = useProps(); | ||
const svgClassName = [ | ||
classNames[UI.Chevron], | ||
disableNavigation ? classNames[ChevronFlag.disabled] : "" | ||
] | ||
.join(" ") | ||
.trim(); | ||
return (React.createElement("svg", { className: svgClassName, width: size, height: size, viewBox: "0 0 24 24" }, | ||
const { size = 24, orientation = "left", className } = props; | ||
return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24" }, | ||
orientation === "up" && (React.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" })), | ||
@@ -24,0 +15,0 @@ orientation === "down" && (React.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" })), |
@@ -1,19 +0,22 @@ | ||
export * from "./Button"; | ||
export * from "./Chevron"; | ||
export * from "./Day"; | ||
export * from "./DayDate"; | ||
export * from "./Dropdown"; | ||
export * from "./DropdownNav"; | ||
export * from "./Footer"; | ||
export * from "./Month"; | ||
export * from "./MonthCaption"; | ||
export * from "./Months"; | ||
export * from "./MonthsDropdown"; | ||
export * from "./Nav"; | ||
export * from "./Option"; | ||
export * from "./Select"; | ||
export * from "./Week"; | ||
export * from "./Weekday"; | ||
export * from "./Weekdays"; | ||
export * from "./WeekNumber"; | ||
export * from "./YearsDropdown"; | ||
export * from "./Button.js"; | ||
export * from "./Chevron.js"; | ||
export * from "./CaptionLabel.js"; | ||
export * from "./Day.js"; | ||
export * from "./DayButton.js"; | ||
export * from "./Dropdown.js"; | ||
export * from "./DropdownNav.js"; | ||
export * from "./Footer.js"; | ||
export * from "./Month.js"; | ||
export * from "./MonthCaption.js"; | ||
export * from "./MonthGrid.js"; | ||
export * from "./Months.js"; | ||
export * from "./Nav.js"; | ||
export * from "./Option.js"; | ||
export * from "./Root.js"; | ||
export * from "./Select.js"; | ||
export * from "./Weeks.js"; | ||
export * from "./Week.js"; | ||
export * from "./Weekday.js"; | ||
export * from "./Weekdays.js"; | ||
export * from "./WeekNumber.js"; | ||
export * from "./WeekNumberHeader.js"; |
@@ -1,20 +0,23 @@ | ||
export * from "./Button"; | ||
export * from "./Chevron"; | ||
export * from "./Day"; | ||
export * from "./DayDate"; | ||
export * from "./Dropdown"; | ||
export * from "./DropdownNav"; | ||
export * from "./Footer"; | ||
export * from "./Month"; | ||
export * from "./MonthCaption"; | ||
export * from "./Months"; | ||
export * from "./MonthsDropdown"; | ||
export * from "./Nav"; | ||
export * from "./Option"; | ||
export * from "./Select"; | ||
export * from "./Week"; | ||
export * from "./Weekday"; | ||
export * from "./Weekdays"; | ||
export * from "./WeekNumber"; | ||
export * from "./YearsDropdown"; | ||
export * from "./Button.js"; | ||
export * from "./Chevron.js"; | ||
export * from "./CaptionLabel.js"; | ||
export * from "./Day.js"; | ||
export * from "./DayButton.js"; | ||
export * from "./Dropdown.js"; | ||
export * from "./DropdownNav.js"; | ||
export * from "./Footer.js"; | ||
export * from "./Month.js"; | ||
export * from "./MonthCaption.js"; | ||
export * from "./MonthGrid.js"; | ||
export * from "./Months.js"; | ||
export * from "./Nav.js"; | ||
export * from "./Option.js"; | ||
export * from "./Root.js"; | ||
export * from "./Select.js"; | ||
export * from "./Weeks.js"; | ||
export * from "./Week.js"; | ||
export * from "./Weekday.js"; | ||
export * from "./Weekdays.js"; | ||
export * from "./WeekNumber.js"; | ||
export * from "./WeekNumberHeader.js"; | ||
//# sourceMappingURL=custom-components.js.map |
import React from "react"; | ||
import type { ReactNode } from "react"; | ||
import type { CalendarDay } from "../classes"; | ||
import type { Modifiers } from "../types"; | ||
import type { CalendarDay } from "../classes/index.js"; | ||
import type { Modifiers } from "../types/index.js"; | ||
/** | ||
@@ -19,5 +18,3 @@ * Render the gridcell of a day in the calendar and handle the interaction and | ||
modifiers: Modifiers; | ||
children?: ReactNode; | ||
rootProps: Pick<JSX.IntrinsicElements["div"], "className" | "style" | "tabIndex" | "aria-colindex" | "aria-disabled" | "aria-hidden" | "aria-label" | "aria-selected" | "onClick" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "ref" | "role">; | ||
}): React.JSX.Element; | ||
} & JSX.IntrinsicElements["td"]): React.JSX.Element; | ||
export type DayProps = Parameters<typeof Day>[0]; |
@@ -14,4 +14,5 @@ import React from "react"; | ||
export function Day(props) { | ||
return React.createElement("div", { ...props.rootProps }, props.children); | ||
const { day, modifiers, ...tdProps } = props; | ||
return React.createElement("td", { ...tdProps }); | ||
} | ||
//# sourceMappingURL=Day.js.map |
@@ -1,2 +0,4 @@ | ||
import React, { type SelectHTMLAttributes } from "react"; | ||
import React from "react"; | ||
import { UI } from "../UI.js"; | ||
import type { ClassNames, CustomComponents } from "../types/index.js"; | ||
/** An option to use in the dropdown. Maps to the `<option>` HTML element. */ | ||
@@ -20,8 +22,9 @@ export type DropdownOption = { | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Dropdown(props: { | ||
components: Pick<Required<CustomComponents>, "Select" | "Option" | "Chevron">; | ||
classNames: Pick<ClassNames, UI.DropdownRoot | UI.Dropdown | UI.CaptionLabel | UI.Chevron>; | ||
options?: DropdownOption[] | undefined; | ||
rootClassName?: string; | ||
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element; | ||
} & Omit<JSX.IntrinsicElements["select"], "children">): React.JSX.Element; | ||
export type DropdownProps = Parameters<typeof Dropdown>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
import { Chevron as DefaultChevron } from "./Chevron"; | ||
import { Option as DefaultOption } from "./Option"; | ||
import { Select as DefaultSelect } from "./Select"; | ||
import { UI } from "../UI.js"; | ||
/** | ||
@@ -13,19 +9,15 @@ * Render a dropdown component to use in the navigation bar. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Dropdown(props) { | ||
const { options, rootClassName, className, ...selectProps } = props; | ||
const { classNames, components } = useProps(); | ||
const cssClassRoot = [classNames[UI.DropdownRoot], rootClassName].join(" "); | ||
const { options, className, components, classNames, ...selectProps } = props; | ||
const cssClassRoot = [classNames[UI.DropdownRoot]].join(" "); | ||
const cssClassSelect = [classNames[UI.Dropdown], className].join(" "); | ||
const Select = components?.Select ?? DefaultSelect; | ||
const Option = components?.Option ?? DefaultOption; | ||
const Chevron = components?.Chevron ?? DefaultChevron; | ||
const selectedOption = options?.find(({ value }) => value === selectProps.value); | ||
return (React.createElement("span", { className: cssClassRoot }, | ||
React.createElement(Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (React.createElement(Option, { key: value, value: value, disabled: disabled }, label)))), | ||
React.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (React.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))), | ||
React.createElement("span", { className: classNames[UI.CaptionLabel], "aria-hidden": true }, | ||
selectedOption?.label, | ||
React.createElement(Chevron, { orientation: "down", size: 18 })))); | ||
React.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron] })))); | ||
} | ||
//# sourceMappingURL=Dropdown.js.map |
import React from "react"; | ||
import type { CalendarMonth } from "../classes"; | ||
/** | ||
* Render the dropdowns to navigate between months. | ||
* Render the the navigation dropdowns. | ||
* | ||
@@ -9,14 +8,5 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function DropdownNav(props: { | ||
/** The month where the dropdown navigation is displayed. */ | ||
month: CalendarMonth; | ||
/** Whether the user can change the month. */ | ||
showMonths?: boolean; | ||
/** Whether the user can change the year. */ | ||
showYears?: boolean; | ||
/** The index where this month is displayed. */ | ||
index: number; | ||
}): React.JSX.Element; | ||
export declare function DropdownNav(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type DropdownNavProps = Parameters<typeof DropdownNav>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
import { MonthsDropdown } from "./MonthsDropdown"; | ||
import { YearsDropdown } from "./YearsDropdown"; | ||
/** | ||
* Render the dropdowns to navigate between months. | ||
* Render the the navigation dropdowns. | ||
* | ||
@@ -12,10 +8,7 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function DropdownNav(props) { | ||
const { classNames, styles, formatters: { formatMonthDropdown, formatYearDropdown } } = useProps(); | ||
return (React.createElement("div", { className: classNames[UI.DropdownNav], style: styles?.[UI.DropdownNav] }, | ||
props.showMonths ? (React.createElement(MonthsDropdown, { month: props.month })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(props.month.date.getMonth()))), | ||
props.showYears ? (React.createElement(YearsDropdown, { month: props.month })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(props.month.date.getFullYear()))))); | ||
return React.createElement("div", { ...props }); | ||
} | ||
//# sourceMappingURL=DropdownNav.js.map |
@@ -1,2 +0,2 @@ | ||
import React, { type HTMLProps } from "react"; | ||
import React from "react"; | ||
/** | ||
@@ -8,5 +8,5 @@ * Component wrapping the footer. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Footer(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element; | ||
export declare function Footer(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type FooterProps = Parameters<typeof Footer>[0]; |
@@ -8,7 +8,7 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Footer(props) { | ||
return React.createElement("div", { ...props }, props.children); | ||
return React.createElement("div", { ...props }); | ||
} | ||
//# sourceMappingURL=Footer.js.map |
import React from "react"; | ||
import type { CalendarMonth } from "../classes/CalendarMonth"; | ||
import type { CalendarMonth } from "../classes/CalendarMonth.js"; | ||
/** | ||
@@ -10,10 +10,10 @@ * Render the grid with the weekday header row and the weeks for the given | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Month(props: { | ||
/** The month where the grid is displayed. */ | ||
month: CalendarMonth; | ||
calendarMonth: CalendarMonth; | ||
/** The index where this month is displayed. */ | ||
index: number; | ||
}): React.JSX.Element; | ||
displayIndex: number; | ||
} & JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthProps = Parameters<typeof Month>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
import { MonthCaption as DefaultMonthCaption } from "./MonthCaption"; | ||
import { Week as DefaultWeek } from "./Week"; | ||
import { Weekdays as DefaultWeekdays } from "./Weekdays"; | ||
/** | ||
@@ -14,18 +9,8 @@ * Render the grid with the weekday header row and the weeks for the given | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Month(props) { | ||
const { id, mode, hideWeekdayRow, components, classNames, styles } = useProps(); | ||
const reactId = React.useId(); | ||
const captionId = id ? `${id}-caption-${props.index}` : reactId; | ||
const gridId = id ? `${id}-grid-${props.index}` : reactId; | ||
const Weekdays = components?.Weekdays ?? DefaultWeekdays; | ||
const MonthCaption = components?.MonthCaption ?? DefaultMonthCaption; | ||
const Week = components?.Week ?? DefaultWeek; | ||
return (React.createElement("div", { className: classNames[UI.MonthWrapper], style: styles?.[UI.MonthWrapper] }, | ||
React.createElement(MonthCaption, { id: captionId, month: props.month, index: props.index }), | ||
React.createElement("div", { id: gridId, role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-labelledby": captionId, className: classNames[UI.Month], style: styles?.[UI.Month] }, | ||
React.createElement(Weekdays, null), | ||
React.createElement("div", { role: "rowgroup", className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, props.month.weeks.map((week, i) => (React.createElement(Week, { key: week.weekNumber, week: week, "aria-rowindex": i + (hideWeekdayRow ? 1 : 2) }))))))); | ||
const { calendarMonth, displayIndex, ...divProps } = props; | ||
return React.createElement("div", { ...divProps }, props.children); | ||
} | ||
//# sourceMappingURL=Month.js.map |
import React from "react"; | ||
import type { CalendarMonth } from "../classes"; | ||
import type { CalendarMonth } from "../classes/index.js"; | ||
/** | ||
@@ -9,12 +9,10 @@ * Render the caption of a month in the calendar. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function MonthCaption(props: { | ||
/** The month where the grid is displayed. */ | ||
month: CalendarMonth; | ||
/** Used for the aria-label. */ | ||
id: string; | ||
calendarMonth: CalendarMonth; | ||
/** The index where this month is displayed. */ | ||
index: number; | ||
}): React.JSX.Element; | ||
displayIndex: number; | ||
} & JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthCaptionProps = Parameters<typeof MonthCaption>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
import { DropdownNav } from "./DropdownNav"; | ||
/** | ||
@@ -11,8 +8,8 @@ * Render the caption of a month in the calendar. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function MonthCaption(props) { | ||
const { classNames, captionLayout, dateLib, formatters: { formatCaption }, labels: { labelCaption }, locale, styles } = useProps(); | ||
return (React.createElement("div", { id: props.id, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption] }, captionLayout?.startsWith("dropdown") ? (React.createElement(DropdownNav, { month: props.month, index: props.index, showMonths: captionLayout === "dropdown" || captionLayout === "dropdown-months", showYears: captionLayout === "dropdown" || captionLayout === "dropdown-years" })) : (React.createElement("span", { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite", "aria-label": labelCaption(props.month.date, { locale }, dateLib) ?? undefined }, formatCaption(props.month.date, { locale }, dateLib))))); | ||
const { calendarMonth, displayIndex, ...divProps } = props; | ||
return React.createElement("div", { ...divProps }); | ||
} | ||
//# sourceMappingURL=MonthCaption.js.map |
import React from "react"; | ||
import type { HTMLProps } from "react"; | ||
/** | ||
* Component wrapping the month grids. | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Months(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element; | ||
export declare function Months(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type MonthsProps = Parameters<typeof Months>[0]; |
@@ -5,10 +5,8 @@ import React from "react"; | ||
* | ||
* Use the `components` prop to swap this component with a custom one. | ||
* | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Months(props) { | ||
return React.createElement("div", { ...props }, props.children); | ||
return React.createElement("div", { ...props }); | ||
} | ||
//# sourceMappingURL=Months.js.map |
import React from "react"; | ||
/** | ||
* Render the navigation buttons to change the month. | ||
* Render the toolbar with the navigation button. | ||
* | ||
@@ -8,4 +8,5 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Nav(): React.JSX.Element; | ||
export declare function Nav(props: JSX.IntrinsicElements["div"]): React.JSX.Element; | ||
export type NavProps = Parameters<typeof Nav>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useCalendar, useProps } from "../contexts"; | ||
import { Button as DefaultButton } from "./Button"; | ||
import { Chevron as DefaultChevron } from "./Chevron"; | ||
/** | ||
* Render the navigation buttons to change the month. | ||
* Render the toolbar with the navigation button. | ||
* | ||
@@ -12,27 +8,7 @@ * Use the `components` prop to swap this component with a custom one. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Nav() { | ||
const { classNames, styles, labels: { labelNext, labelPrevious }, locale, components, id, onNextClick, onPrevClick } = useProps(); | ||
const calendar = useCalendar(); | ||
const handlePreviousClick = () => { | ||
if (!calendar.previousMonth) | ||
return; | ||
calendar.goToPreviousMonth(); | ||
onPrevClick?.(calendar.previousMonth); | ||
}; | ||
const handleNextClick = () => { | ||
if (!calendar.nextMonth) | ||
return; | ||
calendar.goToNextMonth(); | ||
onNextClick?.(calendar.nextMonth); | ||
}; | ||
const Button = components?.Button ?? DefaultButton; | ||
const Chevron = components?.Chevron ?? DefaultChevron; | ||
return (React.createElement("div", { role: "toolbar", className: classNames[UI.Nav], style: styles?.[UI.Nav] }, | ||
React.createElement(Button, { type: "button", name: "previous-month", className: classNames[UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(calendar.previousMonth, { locale }), "aria-controls": id, onClick: handlePreviousClick }, | ||
React.createElement(Chevron, null)), | ||
React.createElement(Button, { type: "button", name: "next-month", className: classNames[UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, { locale }), "aria-controls": id, onClick: handleNextClick }, | ||
React.createElement(Chevron, { orientation: "right" })))); | ||
export function Nav(props) { | ||
return React.createElement("div", { ...props }); | ||
} | ||
//# sourceMappingURL=Nav.js.map |
import React from "react"; | ||
import type { OptionHTMLAttributes } from "react"; | ||
/** | ||
@@ -9,5 +8,5 @@ * Render the `option` element. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element; | ||
export declare function Option(props: JSX.IntrinsicElements["option"]): React.JSX.Element; | ||
export type OptionProps = Parameters<typeof Option>[0]; |
@@ -8,3 +8,3 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -11,0 +11,0 @@ export function Option(props) { |
import React from "react"; | ||
import type { SelectHTMLAttributes } from "react"; | ||
/** | ||
@@ -9,5 +8,5 @@ * Render the `select` element. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element; | ||
export declare function Select(props: JSX.IntrinsicElements["select"]): React.JSX.Element; | ||
export type SelectProps = Parameters<typeof Select>[0]; |
@@ -8,3 +8,3 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -11,0 +11,0 @@ export function Select(props) { |
import React from "react"; | ||
import type { CalendarWeek } from "../classes"; | ||
import type { CalendarWeek } from "../classes/index.js"; | ||
/** | ||
@@ -9,8 +9,7 @@ * Render a row in the calendar, with the days and the week number. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Week(props: { | ||
["aria-rowindex"]: number; | ||
week: CalendarWeek; | ||
}): React.JSX.Element; | ||
} & JSX.IntrinsicElements["tr"]): React.JSX.Element; | ||
export type WeekProps = Parameters<typeof Week>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
import { DayWrapper } from "./DayWrapper"; | ||
import { WeekNumber as DefaultWeekNumber } from "./WeekNumber"; | ||
/** | ||
@@ -12,11 +8,8 @@ * Render a row in the calendar, with the days and the week number. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Week(props) { | ||
const { styles, classNames, showWeekNumber, components, dateLib: { getUnixTime } } = useProps(); | ||
const WeekNumber = components?.WeekNumber ?? DefaultWeekNumber; | ||
return (React.createElement("div", { role: "row", "aria-rowindex": props["aria-rowindex"], className: classNames[UI.Week], style: styles?.[UI.Week] }, | ||
showWeekNumber && React.createElement(WeekNumber, { week: props.week }), | ||
props.week.days.map((day, i) => (React.createElement(DayWrapper, { day: day, "aria-colindex": showWeekNumber ? i + 2 : i + 1, key: getUnixTime(day.date) }))))); | ||
const { week, ...trProps } = props; | ||
return React.createElement("tr", { ...trProps }); | ||
} | ||
//# sourceMappingURL=Week.js.map |
@@ -8,9 +8,5 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Weekday(props: { | ||
["aria-colindex"]?: number | undefined; | ||
["aria-label"]?: string | undefined; | ||
weekday?: Date; | ||
}): React.JSX.Element; | ||
export declare function Weekday(props: JSX.IntrinsicElements["th"]): React.JSX.Element; | ||
export type WeekdayProps = Parameters<typeof Weekday>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
/** | ||
@@ -10,13 +8,7 @@ * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.). | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Weekday(props) { | ||
const { classNames, dateLib, formatters: { formatWeekdayName }, labels: { labelWeekday, labelWeekNumberHeader }, locale, hideWeekdayRow, styles } = useProps(); | ||
return (React.createElement("span", { role: "columnheader", "aria-colindex": props["aria-colindex"], "aria-label": props.weekday | ||
? labelWeekday(props.weekday, { locale }, dateLib) | ||
: labelWeekNumberHeader({ locale }), className: classNames[UI.Weekday], style: styles?.[UI.Weekday] }, !hideWeekdayRow && | ||
(props.weekday | ||
? formatWeekdayName(props.weekday, { locale }, dateLib) | ||
: "#"))); | ||
return React.createElement("th", { ...props }); | ||
} | ||
//# sourceMappingURL=Weekday.js.map |
@@ -8,4 +8,5 @@ import React from "react"; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export declare function Weekdays(): React.JSX.Element; | ||
export declare function Weekdays(props: JSX.IntrinsicElements["tr"]): React.JSX.Element; | ||
export type WeekdaysProps = Parameters<typeof Weekdays>[0]; |
import React from "react"; | ||
import { UI } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
import { getWeekdays } from "../helpers/getWeekdays"; | ||
import { Weekday as DefaultWeekday } from "./Weekday"; | ||
/** | ||
@@ -12,12 +8,8 @@ * Render the row with the weekday names. | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export function Weekdays() { | ||
const { classNames, components, dateLib, hideWeekdayRow, ISOWeek, locale, showWeekNumber, styles, weekStartsOn } = useProps(); | ||
const weekdays = getWeekdays(locale, weekStartsOn, ISOWeek, dateLib); | ||
const Weekday = components?.Weekday ?? DefaultWeekday; | ||
return (React.createElement("div", { role: "row", hidden: hideWeekdayRow, "aria-rowindex": 1, style: styles?.[UI.Weekdays], className: classNames[UI.Weekdays], onClick: (e) => e.stopPropagation() }, | ||
showWeekNumber && React.createElement(Weekday, { "aria-colindex": 1 }), | ||
weekdays.map((weekday, i) => (React.createElement(Weekday, { key: i, weekday: weekday, "aria-colindex": showWeekNumber ? i + 2 : i + 1 }))))); | ||
export function Weekdays(props) { | ||
return (React.createElement("thead", null, | ||
React.createElement("tr", { ...props }))); | ||
} | ||
//# sourceMappingURL=Weekdays.js.map |
import React from "react"; | ||
import type { CalendarWeek } from "../classes"; | ||
import type { CalendarWeek } from "../classes/index.js"; | ||
/** | ||
@@ -12,4 +12,5 @@ * Render the cell with the number of the week. | ||
export declare function WeekNumber(props: { | ||
/** The week to render. */ | ||
week: CalendarWeek; | ||
}): React.JSX.Element; | ||
} & JSX.IntrinsicElements["td"]): React.JSX.Element; | ||
export type WeekNumberProps = Parameters<typeof WeekNumber>[0]; |
import React from "react"; | ||
import { UI, WeekNumberFlag } from "../UI"; | ||
import { useProps } from "../contexts"; | ||
/** | ||
@@ -13,9 +11,5 @@ * Render the cell with the number of the week. | ||
export function WeekNumber(props) { | ||
const { classNames, formatters: { formatWeekNumber }, labels: { labelWeekNumber }, locale, styles, onWeekNumberClick } = useProps(); | ||
const isInteractive = Boolean(onWeekNumberClick); | ||
return (React.createElement("div", { role: "rowheader", "aria-colindex": 1, "aria-label": labelWeekNumber(props.week.weekNumber, { locale }), className: [ | ||
classNames[UI.WeekNumber], | ||
isInteractive ? classNames[WeekNumberFlag.week_number_interactive] : "" | ||
].join(" "), style: styles?.[UI.WeekNumber], tabIndex: isInteractive ? 0 : undefined, onClick: (e) => onWeekNumberClick?.(props.week.weekNumber, props.week.days.map((day) => day.date), e) }, formatWeekNumber(props.week.weekNumber))); | ||
const { week, ...tdProps } = props; | ||
return React.createElement("td", { ...tdProps }); | ||
} | ||
//# sourceMappingURL=WeekNumber.js.map |
import React from "react"; | ||
import type { DayPickerProps } from "./types"; | ||
import type { DayPickerProps } from "./types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * Render the date picker calendar. |
import React from "react"; | ||
import { Calendar } from "./components/Calendar"; | ||
import { ContextProviders } from "./contexts/providers"; | ||
import { UI, DayFlag, SelectionState } from "./UI.js"; | ||
import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js"; | ||
import { getComponents } from "./helpers/getComponents.js"; | ||
import { getDataAttributes } from "./helpers/getDataAttributes.js"; | ||
import { getDateLib } from "./helpers/getDateLib.js"; | ||
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 { getStyleForModifiers } from "./helpers/getStyleForModifiers.js"; | ||
import { getWeekdays } from "./helpers/getWeekdays.js"; | ||
import * as defaultLabels from "./labels/index.js"; | ||
import { useCalendar } from "./useCalendar.js"; | ||
import { dayPickerContext } from "./useDayPicker.js"; | ||
import { useFocus } from "./useFocus.js"; | ||
import { useModifiers } from "./useModifiers.js"; | ||
import { useSelection } from "./useSelection.js"; | ||
/** | ||
@@ -11,5 +26,196 @@ * Render the date picker calendar. | ||
export function DayPicker(props) { | ||
return (React.createElement(ContextProviders, { ...props }, | ||
React.createElement(Calendar, null))); | ||
const reactId = React.useId(); | ||
const id = props.id ?? reactId; | ||
const dateLib = getDateLib(props.dateLib); | ||
const components = getComponents(props.components); | ||
const formatters = getFormatters(props.formatters); | ||
const labels = { ...defaultLabels, ...props.labels }; | ||
const classNames = { ...getDefaultClassNames(), ...props.classNames }; | ||
const numberOfMonths = props.numberOfMonths ?? 1; | ||
const calendar = useCalendar(props, dateLib); | ||
const modifiers = useModifiers(props, calendar, dateLib); | ||
const selection = useSelection(props, dateLib); | ||
const focus = useFocus(props, calendar, modifiers, dateLib); | ||
const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = props; | ||
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters; | ||
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels; | ||
const weekdays = getWeekdays(locale, weekStartsOn, ISOWeek, dateLib); | ||
const isInteractive = mode !== undefined || onDayClick !== undefined; | ||
const handlePreviousClick = () => { | ||
if (!calendar.previousMonth) | ||
return; | ||
calendar.goToPreviousMonth(); | ||
onPrevClick?.(calendar.previousMonth); | ||
}; | ||
const handleNextClick = () => { | ||
if (!calendar.nextMonth) | ||
return; | ||
calendar.goToNextMonth(); | ||
onNextClick?.(calendar.nextMonth); | ||
}; | ||
const handleDayClick = (day, m) => { | ||
return (e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
selection?.handleSelect(day.date, m, e); | ||
focus.setFocused(day); | ||
onDayClick?.(day.date, m, e); | ||
}; | ||
}; | ||
const handleDayFocus = (day, m) => { | ||
return (e) => { | ||
focus.setFocused(day); | ||
onDayFocus?.(day.date, m, e); | ||
}; | ||
}; | ||
const handleDayBlur = (day, m) => { | ||
return (e) => { | ||
focus.blur(); | ||
onDayBlur?.(day.date, m, e); | ||
}; | ||
}; | ||
const handleDayKeyDown = (day, m) => { | ||
return (e) => { | ||
switch (e.key) { | ||
case "ArrowLeft": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focus.focusDayAfter() : focus.focusDayBefore(); | ||
break; | ||
case "ArrowRight": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
dir === "rtl" ? focus.focusDayBefore() : focus.focusDayAfter(); | ||
break; | ||
case "ArrowDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusWeekAfter(); | ||
break; | ||
case "ArrowUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusWeekBefore(); | ||
break; | ||
case " ": | ||
case "Enter": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
selection?.handleSelect(day.date, m, e); | ||
break; | ||
case "PageUp": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focus.focusYearBefore() : focus.focusMonthBefore(); | ||
break; | ||
case "PageDown": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
e.shiftKey ? focus.focusYearAfter() : focus.focusMonthAfter(); | ||
break; | ||
case "Home": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusStartOfWeek(); | ||
break; | ||
case "End": | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
focus.focusEndOfWeek(); | ||
break; | ||
} | ||
onDayKeyDown?.(day.date, m, e); | ||
}; | ||
}; | ||
const formatOptions = { | ||
locale, | ||
weekStartsOn, | ||
firstWeekContainsDate, | ||
useAdditionalWeekYearTokens, | ||
useAdditionalDayOfYearTokens | ||
}; | ||
const labelOptions = formatOptions; | ||
return (React.createElement(dayPickerContext.Provider, { value: { ...calendar, ...selection, ...modifiers } }, | ||
React.createElement("div", { className: [classNames[UI.Root], props.className] | ||
.filter(Boolean) | ||
.join(" "), style: { ...styles?.[UI.Root], ...props.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, ...getDataAttributes(props) }, | ||
React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] }, | ||
!props.hideNavigation && (React.createElement(components.Nav, { role: "toolbar", 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(calendar.previousMonth, { | ||
locale | ||
}), "aria-controls": id, onClick: handlePreviousClick }, | ||
React.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: "left" })), | ||
React.createElement(components.Button, { type: "button", className: classNames[UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, labelOptions), "aria-controls": id, onClick: handleNextClick }, | ||
React.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, orientation: "right", className: classNames[UI.Chevron] })))), | ||
calendar.months.map((calendarMonth, displayIndex) => { | ||
const captionId = `${id}-caption-${displayIndex}`; | ||
const handleMonthChange = (e) => { | ||
const selectedMonth = Number(e.target.value); | ||
const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth); | ||
calendar.goToMonth(month); | ||
}; | ||
const handleYearChange = (e) => { | ||
const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value)); | ||
calendar.goToMonth(month); | ||
}; | ||
const dropdownMonths = getDropdownMonths(calendarMonth.date, calendar.navigationStartMonth, calendar.navigationEndMonth, formatters, locale, dateLib); | ||
const dropdownYears = getDropdownYears(calendar.months[0].date, calendar.navigationStartMonth, calendar.navigationEndMonth, formatters, dateLib); | ||
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], id: captionId, calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.DropdownNav], style: styles?.[UI.DropdownNav] }, | ||
captionLayout === "dropdown" || | ||
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()))), | ||
captionLayout === "dropdown" || | ||
captionLayout === "dropdown-years" ? (React.createElement(components.Dropdown, { "aria-label": labelYearDropdown(labelOptions), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange, options: dropdownYears, style: styles?.[UI.Dropdown], value: calendarMonth.date.getFullYear() })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(calendarMonth.date.getFullYear()))))) : (React.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, formatOptions, dateLib)))), | ||
React.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, labelOptions, dateLib) || | ||
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))))), | ||
React.createElement(components.Weeks, { className: classNames[UI.Weeks], role: "rowgroup", style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => { | ||
return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, role: "row", style: styles?.[UI.Week], week: week }, | ||
showWeekNumber && (React.createElement(components.WeekNumber, { week: week, role: "rowheader", style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, { | ||
locale | ||
}), className: classNames[UI.WeekNumber] }, formatWeekNumber(week.weekNumber))), | ||
week.days.map((day, dayIndex) => { | ||
const m = modifiers.getModifiers(day); | ||
if (!m.disabled) { | ||
if (selection?.isSelected(day.date) && | ||
!m.disabled) { | ||
m[SelectionState.selected] = true; | ||
} | ||
if (mode === "range") { | ||
const { isRangeEnd, isRangeStart, isRangeMiddle } = selection; | ||
if (isRangeStart(day.date)) { | ||
m[SelectionState.range_start] = true; | ||
} | ||
if (isRangeMiddle(day.date)) { | ||
m[SelectionState.range_middle] = true; | ||
} | ||
if (isRangeEnd(day.date)) { | ||
m[SelectionState.range_end] = true; | ||
} | ||
} | ||
} | ||
const isFocused = Boolean(focus.focused?.isEqualTo(day)); | ||
const style = { | ||
...getStyleForModifiers(m, modifiersStyles), | ||
...styles?.[UI.Day] | ||
}; | ||
const className = [ | ||
classNames[UI.Day], | ||
...getClassNamesForModifiers(m, classNames, modifiersClassNames), | ||
...(isFocused | ||
? [classNames[DayFlag.focused]] | ||
: []) | ||
]; | ||
return (React.createElement(components.Day, { key: `${dateLib.format(day.date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: m, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": m.hidden || undefined, "aria-selected": m.selected || undefined, "aria-label": !isInteractive | ||
? labelGridcell(day.date, m, labelOptions, dateLib) | ||
: undefined, "data-day": dateLib.format(day.date, "yyyy-MM-dd"), "data-month": numberOfMonths > 1 | ||
? dateLib.format(day.date, "yyyy-MM") | ||
: undefined, "data-selected": m.selected || undefined, "data-disabled": m.disabled || undefined, "data-hidden": m.hidden || undefined, "data-focused": isFocused || undefined }, isInteractive ? (React.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], day: day, modifiers: m, disabled: m.disabled || undefined, tabIndex: focus.isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(day.date, m, labelOptions, dateLib), onClick: handleDayClick(day, m), onBlur: handleDayBlur(day, m), onFocus: handleDayFocus(day, m), onKeyDown: handleDayKeyDown(day, m) }, formatDay(day.date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib)))); | ||
}))); | ||
}))))); | ||
})), | ||
props.footer && (React.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer))))); | ||
} | ||
//# sourceMappingURL=DayPicker.js.map |
@@ -1,3 +0,3 @@ | ||
import { FormatOptions } from "../lib"; | ||
import type { DateLib } from "../types"; | ||
import { FormatOptions } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * The default formatter for the caption element. |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * The default formatter for the caption element. |
@@ -1,3 +0,3 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * The default formatter for the day grid cell element. |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * The default formatter for the day grid cell element. |
@@ -10,2 +10,2 @@ /** | ||
/** The locale to use for formatting. */ | ||
locale?: import("date-fns/locale/types").Locale): string; | ||
locale?: import("date-fns").Locale): string; |
@@ -1,2 +0,2 @@ | ||
import { enUS } from "../lib/locales"; | ||
import { enUS } from "../lib/locales.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * The default formatter for the month dropdown value. |
@@ -1,3 +0,3 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * The default formatter for the name of the weekday. |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * The default formatter for the name of the weekday. |
/** | ||
* The default formatter for the week numbers. | ||
* | ||
* @param weekNumber - The week number to format. `0` when heading of the week | ||
* numbers. | ||
* @group Formatters | ||
*/ | ||
export declare function formatWeekNumber(weekNumber: number): string; | ||
export declare function formatWeekNumber(weekNumber: number | 0): string; |
/** | ||
* The default formatter for the week numbers. | ||
* | ||
* @param weekNumber - The week number to format. `0` when heading of the week | ||
* numbers. | ||
* @group Formatters | ||
*/ | ||
export function formatWeekNumber(weekNumber) { | ||
if (weekNumber === 0) { | ||
return `#`; | ||
} | ||
if (weekNumber < 10) { | ||
return `0${weekNumber.toLocaleString()}`; | ||
} | ||
return `${weekNumber.toLocaleString()}`; | ||
} | ||
//# sourceMappingURL=formatWeekNumber.js.map |
@@ -1,6 +0,7 @@ | ||
export * from "./formatCaption"; | ||
export * from "./formatDay"; | ||
export * from "./formatMonthDropdown"; | ||
export * from "./formatWeekNumber"; | ||
export * from "./formatWeekdayName"; | ||
export * from "./formatYearDropdown"; | ||
export * from "./formatCaption.js"; | ||
export * from "./formatDay.js"; | ||
export * from "./formatMonthDropdown.js"; | ||
export * from "./formatWeekNumber.js"; | ||
export * from "./formatWeekNumberHeader.js"; | ||
export * from "./formatWeekdayName.js"; | ||
export * from "./formatYearDropdown.js"; |
@@ -1,7 +0,8 @@ | ||
export * from "./formatCaption"; | ||
export * from "./formatDay"; | ||
export * from "./formatMonthDropdown"; | ||
export * from "./formatWeekNumber"; | ||
export * from "./formatWeekdayName"; | ||
export * from "./formatYearDropdown"; | ||
export * from "./formatCaption.js"; | ||
export * from "./formatDay.js"; | ||
export * from "./formatMonthDropdown.js"; | ||
export * from "./formatWeekNumber.js"; | ||
export * from "./formatWeekNumberHeader.js"; | ||
export * from "./formatWeekdayName.js"; | ||
export * from "./formatYearDropdown.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import type { ModifiersClassNames, ClassNames } from "../types"; | ||
export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, modifiersClassNames: ModifiersClassNames, classNames: ClassNames): string[]; | ||
import type { ModifiersClassNames, ClassNames } from "../types/index.js"; | ||
export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, classNames: ClassNames, modifiersClassNames?: ModifiersClassNames): string[]; |
@@ -1,3 +0,3 @@ | ||
import { DayFlag, SelectionState } from "../UI"; | ||
export function getClassNamesForModifiers(modifiers, modifiersClassNames, classNames) { | ||
import { DayFlag, SelectionState } from "../UI.js"; | ||
export function getClassNamesForModifiers(modifiers, classNames, modifiersClassNames = {}) { | ||
const modifierClassNames = Object.entries(modifiers) | ||
@@ -4,0 +4,0 @@ .filter(([, active]) => active === true) |
@@ -1,3 +0,3 @@ | ||
import type { DayPickerProps } from "../types"; | ||
import type { DayPickerProps } from "../types/index.js"; | ||
/** Return the `data-` attributes from the props. */ | ||
export declare function getDataAttributes(props: DayPickerProps): Record<string, unknown>; |
/** Return the `data-` attributes from the props. */ | ||
export function getDataAttributes(props) { | ||
const dataAttributes = {}; | ||
const dataAttributes = { | ||
"data-mode": props.mode ?? undefined, | ||
"data-required": "required" in props ? props.required : undefined | ||
}; | ||
Object.entries(props).forEach(([key, val]) => { | ||
@@ -5,0 +8,0 @@ if (key.startsWith("data-")) { |
@@ -1,3 +0,3 @@ | ||
import { PropsContextValue } from "../contexts"; | ||
import { DateLib, DayPickerProps } from "../index.js"; | ||
/** Return all the dates to display in the calendar. */ | ||
export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<PropsContextValue, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | "dateLib">): Date[]; | ||
export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn">, dateLib: DateLib): Date[]; |
/** The number of days in a month when having 6 weeks. */ | ||
const NrOfDaysWithFixedWeeks = 42; | ||
/** Return all the dates to display in the calendar. */ | ||
export function getDates(displayMonths, maxDate, props) { | ||
export function getDates(displayMonths, maxDate, props, dateLib) { | ||
const firstMonth = displayMonths[0]; | ||
const lastMonth = displayMonths[displayMonths.length - 1]; | ||
const { ISOWeek, fixedWeeks, locale, weekStartsOn } = props ?? {}; | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = props.dateLib; | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = dateLib; | ||
const startWeekFirstDate = ISOWeek | ||
@@ -10,0 +10,0 @@ ? startOfISOWeek(firstMonth) |
@@ -1,2 +0,2 @@ | ||
import type { CalendarDay, CalendarMonth } from "../classes"; | ||
import type { CalendarDay, CalendarMonth } from "../classes/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Returns all the days belonging to the calendar by merging the days in the |
@@ -1,2 +0,2 @@ | ||
import type { ClassNames } from "../types"; | ||
import type { ClassNames } from "../types/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Get the default class names for the UI elements. |
@@ -1,2 +0,2 @@ | ||
import { UI, DayFlag, CalendarFlag, ChevronFlag, WeekNumberFlag, SelectionState } from "../UI"; | ||
import { UI, DayFlag, SelectionState } from "../UI.js"; | ||
/** | ||
@@ -13,14 +13,2 @@ * Get the default class names for the UI elements. | ||
} | ||
for (const key in CalendarFlag) { | ||
classNames[CalendarFlag[key]] = | ||
`rdp-${CalendarFlag[key]}`; | ||
} | ||
for (const key in ChevronFlag) { | ||
classNames[ChevronFlag[key]] = | ||
`rdp-${ChevronFlag[key]}`; | ||
} | ||
for (const key in WeekNumberFlag) { | ||
classNames[WeekNumberFlag[key]] = | ||
`rdp-${WeekNumberFlag[key]}`; | ||
} | ||
for (const key in DayFlag) { | ||
@@ -27,0 +15,0 @@ classNames[DayFlag[key]] = |
@@ -1,2 +0,2 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
export declare function getDisplayMonths(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "numberOfMonths" | "endMonth" | "dateLib">): Date[]; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
export declare function getDisplayMonths(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "numberOfMonths">, dateLib: DateLib): Date[]; |
@@ -1,6 +0,7 @@ | ||
export function getDisplayMonths(firstDisplayedMonth, props) { | ||
export function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) { | ||
const { numberOfMonths = 1 } = props; | ||
const months = []; | ||
for (let i = 0; i < props.numberOfMonths; i++) { | ||
const month = props.dateLib.addMonths(firstDisplayedMonth, i); | ||
if (props.endMonth && month > props.endMonth) { | ||
for (let i = 0; i < numberOfMonths; i++) { | ||
const month = dateLib.addMonths(firstDisplayedMonth, i); | ||
if (calendarEndMonth && month > calendarEndMonth) { | ||
break; | ||
@@ -7,0 +8,0 @@ } |
@@ -1,4 +0,5 @@ | ||
import { DropdownOption } from "../components/Dropdown"; | ||
import { PropsContextValue } from "../contexts"; | ||
import { DropdownOption } from "../components/Dropdown.js"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import type { DateLib, Formatters } from "../types/index.js"; | ||
/** Return the months to show in the dropdown. */ | ||
export declare function getDropdownMonths(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined; | ||
export declare function getDropdownMonths(displayMonth: Date, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, formatters: Pick<Formatters, "formatMonthDropdown">, locale: Locale | undefined, dateLib: DateLib): DropdownOption[] | undefined; |
/** Return the months to show in the dropdown. */ | ||
export function getDropdownMonths(displayMonth, props) { | ||
const { startMonth, endMonth } = props; | ||
if (!startMonth) | ||
export function getDropdownMonths(displayMonth, calendarStartMonth, calendarEndMonth, formatters, locale, dateLib) { | ||
if (!calendarStartMonth) | ||
return undefined; | ||
if (!endMonth) | ||
if (!calendarEndMonth) | ||
return undefined; | ||
const { addMonths, startOfMonth, isBefore, Date } = props.dateLib; | ||
const { addMonths, startOfMonth, isBefore, Date } = dateLib; | ||
const year = displayMonth.getFullYear(); | ||
const navStartMonth = startOfMonth(startMonth); | ||
const navEndMonth = startOfMonth(endMonth); | ||
const navStartMonth = startOfMonth(calendarStartMonth); | ||
const navEndMonth = startOfMonth(calendarEndMonth); | ||
const months = []; | ||
@@ -22,5 +21,7 @@ let month = navStartMonth; | ||
const options = sortedMonths.map((value) => { | ||
const label = props.formatters.formatMonthDropdown(value, props.locale); | ||
const disabled = (startMonth && new Date(year, value) < startOfMonth(startMonth)) || | ||
(endMonth && new Date(year, value) > startOfMonth(endMonth)) || | ||
const label = formatters.formatMonthDropdown(value, locale); | ||
const disabled = (calendarStartMonth && | ||
new Date(year, value) < startOfMonth(calendarStartMonth)) || | ||
(calendarEndMonth && | ||
new Date(year, value) > startOfMonth(calendarEndMonth)) || | ||
false; | ||
@@ -27,0 +28,0 @@ return { value, label, disabled }; |
@@ -1,4 +0,4 @@ | ||
import { DropdownOption } from "../components/Dropdown"; | ||
import { PropsContextValue } from "../contexts"; | ||
import { DropdownOption } from "../components/Dropdown.js"; | ||
import type { DateLib, Formatters } from "../types/index.js"; | ||
/** Return the years to show in the dropdown. */ | ||
export declare function getDropdownYears(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined; | ||
export declare function getDropdownYears(displayMonth: Date, calendarStart: Date | undefined, calendarEnd: Date | undefined, formatters: Pick<Formatters, "formatYearDropdown">, dateLib: DateLib): DropdownOption[] | undefined; |
/** Return the years to show in the dropdown. */ | ||
export function getDropdownYears(displayMonth, props) { | ||
const { startMonth, endMonth } = props; | ||
if (!startMonth) | ||
export function getDropdownYears(displayMonth, calendarStart, calendarEnd, formatters, dateLib) { | ||
if (!calendarStart) | ||
return undefined; | ||
if (!endMonth) | ||
if (!calendarEnd) | ||
return undefined; | ||
const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = props.dateLib; | ||
const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = dateLib; | ||
const month = displayMonth.getMonth(); | ||
const firstNavYear = startOfYear(startMonth); | ||
const lastNavYear = endOfYear(endMonth); | ||
const firstNavYear = startOfYear(calendarStart); | ||
const lastNavYear = endOfYear(calendarEnd); | ||
const years = []; | ||
@@ -19,6 +18,8 @@ let year = firstNavYear; | ||
return years.map((value) => { | ||
const disabled = (startMonth && new Date(value, month) < startOfMonth(startMonth)) || | ||
(month && endMonth && new Date(value, month) > startOfMonth(endMonth)) || | ||
const disabled = (calendarStart && new Date(value, month) < startOfMonth(calendarStart)) || | ||
(month && | ||
calendarEnd && | ||
new Date(value, month) > startOfMonth(calendarEnd)) || | ||
false; | ||
const label = props.formatters.formatYearDropdown(value); | ||
const label = formatters.formatYearDropdown(value); | ||
return { | ||
@@ -25,0 +26,0 @@ value, |
@@ -1,9 +0,9 @@ | ||
import * as defaultFormatters from "../formatters"; | ||
import type { DayPickerProps } from "../types"; | ||
import * as defaultFormatters from "../formatters/index.js"; | ||
import type { DayPickerProps } from "../types/index.js"; | ||
/** Return the formatters from the props merged with the default formatters. */ | ||
export declare function getFormatters(customFormatters: DayPickerProps["formatters"]): { | ||
formatCaption: typeof defaultFormatters.formatCaption; | ||
formatMonthCaption: typeof defaultFormatters.formatCaption; | ||
formatMonthCaption: typeof defaultFormatters.formatMonthCaption; | ||
formatMonthDropdown: typeof defaultFormatters.formatMonthDropdown; | ||
formatYearCaption: typeof defaultFormatters.formatYearDropdown; | ||
formatYearCaption: typeof defaultFormatters.formatYearCaption; | ||
formatYearDropdown: typeof defaultFormatters.formatYearDropdown; | ||
@@ -13,2 +13,3 @@ formatDay: typeof defaultFormatters.formatDay; | ||
formatWeekdayName: typeof defaultFormatters.formatWeekdayName; | ||
formatWeekNumberHeader(): string; | ||
}; |
@@ -1,2 +0,2 @@ | ||
import * as defaultFormatters from "../formatters"; | ||
import * as defaultFormatters from "../formatters/index.js"; | ||
/** Return the formatters from the props merged with the default formatters. */ | ||
@@ -3,0 +3,0 @@ export function getFormatters(customFormatters) { |
@@ -1,3 +0,3 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../index.js"; | ||
/** Return the start month based on the props passed to DayPicker. */ | ||
export declare function getInitialMonth(props: Pick<PropsContextValue, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "dateLib">): Date; | ||
export declare function getInitialMonth(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths">, dateLib: DateLib): Date; |
/** Return the start month based on the props passed to DayPicker. */ | ||
export function getInitialMonth(props) { | ||
const { month, defaultMonth, dateLib: { Date }, today, numberOfMonths = 1, endMonth, startMonth } = props; | ||
let initialMonth = month || defaultMonth || today || new Date(); | ||
const { differenceInCalendarMonths, addMonths, startOfMonth } = props.dateLib; | ||
export function getInitialMonth(props, dateLib) { | ||
const { month, defaultMonth, today = new dateLib.Date(), numberOfMonths = 1, endMonth, startMonth } = props; | ||
let initialMonth = month || defaultMonth || today; | ||
const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib; | ||
// Fix the initialMonth if is after the to-date | ||
@@ -7,0 +7,0 @@ if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) { |
@@ -1,3 +0,3 @@ | ||
import { CalendarMonth } from "../classes"; | ||
import type { PropsContextValue } from "../contexts"; | ||
import { CalendarMonth } from "../classes/index.js"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** Return the months to display in the calendar. */ | ||
@@ -10,2 +10,2 @@ export declare function getMonths( | ||
/** Options from the props context. */ | ||
props: Pick<PropsContextValue, "dateLib" | "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">): CalendarMonth[]; | ||
options: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[]; |
@@ -1,2 +0,2 @@ | ||
import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes"; | ||
import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js"; | ||
/** Return the months to display in the calendar. */ | ||
@@ -9,16 +9,16 @@ export function getMonths( | ||
/** Options from the props context. */ | ||
props) { | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = props.dateLib; | ||
options, dateLib) { | ||
const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = dateLib; | ||
const dayPickerMonths = displayMonths.reduce((months, month) => { | ||
const firstDateOfFirstWeek = props.ISOWeek | ||
const firstDateOfFirstWeek = options.ISOWeek | ||
? startOfISOWeek(month) | ||
: startOfWeek(month, { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
}); | ||
const lastDateOfLastWeek = props.ISOWeek | ||
const lastDateOfLastWeek = options.ISOWeek | ||
? endOfISOWeek(endOfMonth(month)) | ||
: endOfWeek(endOfMonth(month), { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
}); | ||
@@ -29,3 +29,3 @@ /** The dates to display in the month. */ | ||
}); | ||
if (props.fixedWeeks && monthDates.length < 42) { | ||
if (options.fixedWeeks && monthDates.length < 42) { | ||
const extraDates = dates.filter((date) => { | ||
@@ -37,11 +37,11 @@ return (date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7)); | ||
const weeks = monthDates.reduce((weeks, date) => { | ||
const weekNumber = props.ISOWeek | ||
const weekNumber = options.ISOWeek | ||
? getISOWeek(date) | ||
: getWeek(date, { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn, | ||
firstWeekContainsDate: options.firstWeekContainsDate | ||
}); | ||
const week = weeks.find((week) => week.weekNumber === weekNumber); | ||
const day = new CalendarDay(date, month, props.dateLib); | ||
const day = new CalendarDay(date, month, dateLib); | ||
if (!week) { | ||
@@ -59,3 +59,3 @@ weeks.push(new CalendarWeek(weekNumber, [day])); | ||
}, []); | ||
if (!props.reverseMonths) { | ||
if (!options.reverseMonths) { | ||
return dayPickerMonths; | ||
@@ -62,0 +62,0 @@ } |
@@ -1,7 +0,5 @@ | ||
import { CalendarDay } from "../classes"; | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { MoveFocusBy, MoveFocusDir } from "../types"; | ||
export type Options = Pick<PropsContextValue, "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">; | ||
import { CalendarDay } from "../classes/index.js"; | ||
import type { DateLib, DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js"; | ||
export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir, | ||
/** The date that is currently focused. */ | ||
focused: CalendarDay, options: Pick<PropsContextValue, "dateLib" | "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">, attempt?: number): CalendarDay | undefined; | ||
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined; |
@@ -1,7 +0,7 @@ | ||
import { CalendarDay } from "../classes"; | ||
import { dateMatchModifiers } from "../utils/dateMatchModifiers"; | ||
import { getPossibleFocusDate } from "./getPossibleFocusDate"; | ||
import { CalendarDay } from "../classes/index.js"; | ||
import { dateMatchModifiers } from "../utils/dateMatchModifiers.js"; | ||
import { getFocusableDate } from "./getFocusableDate.js"; | ||
export function getNextFocus(moveBy, moveDir, | ||
/** The date that is currently focused. */ | ||
focused, options, attempt = 0) { | ||
refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) { | ||
if (attempt > 365) { | ||
@@ -11,9 +11,9 @@ // Limit the recursion to 365 attempts | ||
} | ||
const possibleFocusDate = getPossibleFocusDate(moveBy, moveDir, focused.date, options); | ||
const focusableDate = getFocusableDate(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date? | ||
calendarStartMonth, calendarEndMonth, options, dateLib); | ||
const isDisabled = Boolean(options.disabled && | ||
dateMatchModifiers(possibleFocusDate, options.disabled, options.dateLib)); | ||
const isHidden = Boolean(options.hidden && | ||
dateMatchModifiers(possibleFocusDate, options.hidden, options.dateLib)); | ||
const targetMonth = possibleFocusDate; | ||
const focusDay = new CalendarDay(possibleFocusDate, targetMonth, options.dateLib); | ||
dateMatchModifiers(focusableDate, options.disabled, dateLib)); | ||
const isHidden = Boolean(options.hidden && dateMatchModifiers(focusableDate, options.hidden, dateLib)); | ||
const targetMonth = focusableDate; | ||
const focusDay = new CalendarDay(focusableDate, targetMonth, dateLib); | ||
if (!isDisabled && !isHidden) { | ||
@@ -23,4 +23,4 @@ return focusDay; | ||
// Recursively attempt to find the next focusable date | ||
return getNextFocus(moveBy, moveDir, focusDay, options, attempt + 1); | ||
return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1); | ||
} | ||
//# sourceMappingURL=getNextFocus.js.map |
@@ -1,2 +0,2 @@ | ||
import { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** | ||
@@ -8,5 +8,5 @@ * Return the next month the user can navigate to according to the given | ||
* | ||
* - If after the `endMonth` range, is `undefined`; | ||
* - If after the `calendarEndMonth` range, is `undefined`; | ||
* - If the navigation is paged , is the number of months displayed ahead. | ||
*/ | ||
export declare function getNextMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "endMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined; | ||
export declare function getNextMonth(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined; |
@@ -7,18 +7,18 @@ /** | ||
* | ||
* - If after the `endMonth` range, is `undefined`; | ||
* - If after the `calendarEndMonth` range, is `undefined`; | ||
* - If the navigation is paged , is the number of months displayed ahead. | ||
*/ | ||
export function getNextMonth(firstDisplayedMonth, props) { | ||
if (props.disableNavigation) { | ||
export function getNextMonth(firstDisplayedMonth, calendarEndMonth, options, dateLib) { | ||
if (options.disableNavigation) { | ||
return undefined; | ||
} | ||
const { pagedNavigation, numberOfMonths } = props; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib; | ||
const { pagedNavigation, numberOfMonths = 1 } = options; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
if (!props.endMonth) { | ||
if (!calendarEndMonth) { | ||
return addMonths(month, offset); | ||
} | ||
const monthsDiff = differenceInCalendarMonths(props.endMonth, firstDisplayedMonth); | ||
if (monthsDiff < numberOfMonths) { | ||
const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth); | ||
if (monthsDiff < numberOfMonths ?? 1) { | ||
return undefined; | ||
@@ -25,0 +25,0 @@ } |
@@ -1,2 +0,2 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
/** | ||
@@ -9,5 +9,5 @@ * Return the next previous the user can navigate to, according to the given | ||
* | ||
* - If before the `startMonth` date, is `undefined`; | ||
* - If before the `calendarStartMonth` date, is `undefined`; | ||
* - If the navigation is paged, is the number of months displayed before. | ||
*/ | ||
export declare function getPreviousMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined; | ||
export declare function getPreviousMonth(firstDisplayedMonth: Date, calendarStartMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined; |
@@ -8,17 +8,17 @@ /** | ||
* | ||
* - If before the `startMonth` date, is `undefined`; | ||
* - If before the `calendarStartMonth` date, is `undefined`; | ||
* - If the navigation is paged, is the number of months displayed before. | ||
*/ | ||
export function getPreviousMonth(firstDisplayedMonth, props) { | ||
if (props.disableNavigation) { | ||
export function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, dateLib) { | ||
if (options.disableNavigation) { | ||
return undefined; | ||
} | ||
const { pagedNavigation, numberOfMonths } = props; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib; | ||
const offset = pagedNavigation ? numberOfMonths : 1; | ||
const { pagedNavigation, numberOfMonths } = options; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths ?? 1 : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
if (!props.startMonth) { | ||
if (!calendarStartMonth) { | ||
return addMonths(month, -offset); | ||
} | ||
const monthsDiff = differenceInCalendarMonths(month, props.startMonth); | ||
const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth); | ||
if (monthsDiff <= 0) { | ||
@@ -25,0 +25,0 @@ return undefined; |
import type { CSSProperties } from "react"; | ||
import type { Modifiers, ModifiersStyles, Styles } from "../types"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles: Partial<ModifiersStyles>, styles: Partial<Styles>): CSSProperties; | ||
import type { Modifiers, ModifiersStyles } from "../types/index.js"; | ||
export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties; |
@@ -1,4 +0,3 @@ | ||
import { UI } from "../UI"; | ||
export function getStyleForModifiers(dayModifiers, modifiersStyles, styles) { | ||
let style = { ...styles[UI.Day] }; | ||
export function getStyleForModifiers(dayModifiers, modifiersStyles = {}) { | ||
let style = {}; | ||
Object.entries(dayModifiers) | ||
@@ -5,0 +4,0 @@ .filter(([, active]) => active === true) |
@@ -1,3 +0,3 @@ | ||
import type { Locale } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -4,0 +4,0 @@ * Generate a series of 7 days, starting from the week, to use for formatting |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Generate a series of 7 days, starting from the week, to use for formatting |
@@ -1,3 +0,3 @@ | ||
import type { CalendarMonth, CalendarWeek } from "../classes"; | ||
import type { CalendarMonth, CalendarWeek } from "../classes/index.js"; | ||
/** Returns an array of calendar weeks from an array of calendar months. */ | ||
export declare function getWeeks(months: CalendarMonth[]): CalendarWeek[]; |
@@ -1,1 +0,1 @@ | ||
export * from "./getDefaultClassNames"; | ||
export * from "./getDefaultClassNames.js"; |
// Only export helpers that can be useful to other developers. | ||
export * from "./getDefaultClassNames"; | ||
export * from "./getDefaultClassNames.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,1 @@ | ||
/// <reference types="react" /> | ||
export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>; | ||
@@ -3,0 +2,0 @@ /** |
@@ -1,12 +0,11 @@ | ||
export * from "./DayPicker"; | ||
export * from "./types"; | ||
export * from "./classes"; | ||
export * from "./components/custom-components"; | ||
export * from "./contexts"; | ||
export * from "./selection"; | ||
export * from "./lib"; | ||
export * from "./formatters"; | ||
export * from "./helpers"; | ||
export * from "./labels"; | ||
export * from "./utils"; | ||
export * from "./UI"; | ||
export * from "./DayPicker.js"; | ||
export * from "./types/index.js"; | ||
export * from "./classes/index.js"; | ||
export * from "./components/custom-components.js"; | ||
export * from "./lib/index.js"; | ||
export * from "./formatters/index.js"; | ||
export * from "./helpers/index.js"; | ||
export * from "./labels/index.js"; | ||
export * from "./utils/index.js"; | ||
export * from "./UI.js"; | ||
export * from "./useDayPicker.js"; |
@@ -1,13 +0,12 @@ | ||
export * from "./DayPicker"; | ||
export * from "./types"; | ||
export * from "./classes"; | ||
export * from "./components/custom-components"; | ||
export * from "./contexts"; | ||
export * from "./selection"; | ||
export * from "./lib"; | ||
export * from "./formatters"; | ||
export * from "./helpers"; | ||
export * from "./labels"; | ||
export * from "./utils"; | ||
export * from "./UI"; | ||
export * from "./DayPicker.js"; | ||
export * from "./types/index.js"; | ||
export * from "./classes/index.js"; | ||
export * from "./components/custom-components.js"; | ||
export * from "./lib/index.js"; | ||
export * from "./formatters/index.js"; | ||
export * from "./helpers/index.js"; | ||
export * from "./labels/index.js"; | ||
export * from "./utils/index.js"; | ||
export * from "./UI.js"; | ||
export * from "./useDayPicker.js"; | ||
//# sourceMappingURL=index.js.map |
import React from "react"; | ||
import { type DayPickerProps } from "./"; | ||
import { type DayPickerProps } from "./index.js"; | ||
export declare function DayPicker(props: DayPickerProps): React.JSX.Element; |
import React from "react"; | ||
import * as jalaliDateLib from "date-fns-jalali"; | ||
import { DayPicker as DayPickerComponent } from "./"; | ||
import { DayPicker as DayPickerComponent } from "./index.js"; | ||
export function DayPicker(props) { | ||
@@ -5,0 +5,0 @@ return React.createElement(DayPickerComponent, { dateLib: jalaliDateLib, ...props }); |
@@ -1,9 +0,12 @@ | ||
export * from "./labelDay"; | ||
export * from "./labelCaption"; | ||
export * from "./labelMonthDropdown"; | ||
export * from "./labelNext"; | ||
export * from "./labelPrevious"; | ||
export * from "./labelWeekday"; | ||
export * from "./labelWeekNumber"; | ||
export * from "./labelWeekNumberHeader"; | ||
export * from "./labelYearDropdown"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelGridcell.js"; | ||
export * from "./labelDayButton.js"; | ||
export * from "./labelNav.js"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelMonthDropdown.js"; | ||
export * from "./labelNext.js"; | ||
export * from "./labelPrevious.js"; | ||
export * from "./labelWeekday.js"; | ||
export * from "./labelWeekNumber.js"; | ||
export * from "./labelWeekNumberHeader.js"; | ||
export * from "./labelYearDropdown.js"; |
@@ -1,10 +0,13 @@ | ||
export * from "./labelDay"; | ||
export * from "./labelCaption"; | ||
export * from "./labelMonthDropdown"; | ||
export * from "./labelNext"; | ||
export * from "./labelPrevious"; | ||
export * from "./labelWeekday"; | ||
export * from "./labelWeekNumber"; | ||
export * from "./labelWeekNumberHeader"; | ||
export * from "./labelYearDropdown"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelGridcell.js"; | ||
export * from "./labelDayButton.js"; | ||
export * from "./labelNav.js"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelMonthDropdown.js"; | ||
export * from "./labelNext.js"; | ||
export * from "./labelPrevious.js"; | ||
export * from "./labelWeekday.js"; | ||
export * from "./labelWeekNumber.js"; | ||
export * from "./labelWeekNumberHeader.js"; | ||
export * from "./labelYearDropdown.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -1,8 +0,14 @@ | ||
import type { FormatOptions } from "date-fns"; | ||
import type { DateLib } from "../types"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import { DateLib } from "../types/index.js"; | ||
/** | ||
* Return the default ARIA label for the month grid. | ||
* Return an ARIA label for the month grid, that will be announced when entering | ||
* the grid. | ||
* | ||
* @group Labels | ||
*/ | ||
export declare function labelGrid(month: Date, options?: FormatOptions, dateLib?: DateLib): string; | ||
export declare function labelGrid(date: Date, options?: LabelOptions, dateLib?: DateLib): string; | ||
/** | ||
* @deprecated Use {@link labelGrid} instead. | ||
* @protected | ||
*/ | ||
export declare const labelCaption: typeof labelGrid; |
@@ -1,10 +0,16 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
* Return the default ARIA label for the month grid. | ||
* Return an ARIA label for the month grid, that will be announced when entering | ||
* the grid. | ||
* | ||
* @group Labels | ||
*/ | ||
export function labelGrid(month, options, dateLib = defaultDateLib) { | ||
return dateLib.format(month, "LLLL y", options); | ||
export function labelGrid(date, options, dateLib = defaultDateLib) { | ||
return dateLib.format(date, "LLLL y", options); | ||
} | ||
/** | ||
* @deprecated Use {@link labelGrid} instead. | ||
* @protected | ||
*/ | ||
export const labelCaption = labelGrid; | ||
//# sourceMappingURL=labelGrid.js.map |
@@ -1,7 +0,7 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the WeekNumber element. | ||
* Return the default ARIA label for the months dropdown element. | ||
* | ||
* @group Labels | ||
*/ | ||
export declare function labelMonthDropdown(options?: FormatOptions): string; | ||
export declare function labelMonthDropdown(options?: LabelOptions): string; |
/** | ||
* Return the default ARIA label for the WeekNumber element. | ||
* Return the default ARIA label for the months dropdown element. | ||
* | ||
@@ -4,0 +4,0 @@ * @group Labels |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button. | ||
/** Undefined where there's no next month no navigate to. */ | ||
month: Date | undefined, options?: FormatOptions): string; | ||
month: Date | undefined, options?: LabelOptions): string; |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button. | ||
/** Undefined where there's no previous month no navigate to. */ | ||
month: Date | undefined, options?: FormatOptions): string; | ||
month: Date | undefined, options?: LabelOptions): string; |
@@ -1,3 +0,3 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
/** | ||
@@ -8,2 +8,2 @@ * Return he default ARIA label for the Weekday element. | ||
*/ | ||
export declare function labelWeekday(date: Date, options?: FormatOptions, dateLib?: DateLib): string; | ||
export declare function labelWeekday(date: Date, options?: LabelOptions, dateLib?: DateLib): string; |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Return he default ARIA label for the Weekday element. |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number element. | ||
*/ | ||
export declare function labelWeekNumber(weekNumber: number, options?: FormatOptions): string; | ||
export declare function labelWeekNumber(weekNumber: number, options?: LabelOptions): string; |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number header element. | ||
*/ | ||
export declare function labelWeekNumberHeader(options?: FormatOptions): string; | ||
export declare function labelWeekNumberHeader(options?: LabelOptions): string; |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
@@ -7,2 +7,2 @@ * Return the default ARIA label for the years dropdown. | ||
*/ | ||
export declare function labelYearDropdown(options?: FormatOptions): string; | ||
export declare function labelYearDropdown(options?: LabelOptions): string; |
import { GenericDateConstructor } from "date-fns"; | ||
import type { FormatOptions as DateFnsFormatOptions, Locale as DateFnsLocale } from "date-fns"; | ||
import { addDays } from "date-fns/addDays"; | ||
@@ -14,3 +15,2 @@ import { addMonths } from "date-fns/addMonths"; | ||
import { getISOWeek } from "date-fns/getISOWeek"; | ||
import { getUnixTime } from "date-fns/getUnixTime"; | ||
import { getWeek } from "date-fns/getWeek"; | ||
@@ -32,12 +32,18 @@ import { isAfter } from "date-fns/isAfter"; | ||
import { startOfYear } from "date-fns/startOfYear"; | ||
/** @private */ | ||
export type { Locale } from "date-fns"; | ||
/** @private */ | ||
export type { FormatOptions } from "date-fns"; | ||
/** @private */ | ||
/** The options for the {@link Formatters}. */ | ||
export type FormatOptions = DateFnsFormatOptions; | ||
/** The options for the {@link Labels}. */ | ||
export type LabelOptions = DateFnsFormatOptions; | ||
/** The locale used within DayPicker. */ | ||
export type Locale = DateFnsLocale; | ||
export type { Month as DateFnsMonth } from "date-fns"; | ||
/** The default date library to use with the date picker. */ | ||
/** | ||
* The default date library to use with the date picker. | ||
* | ||
* @private | ||
* @internal | ||
*/ | ||
export declare const dateLib: { | ||
/** The constructor of the date object. */ | ||
Date: GenericDateConstructor<Date>; | ||
Date: GenericDateConstructor; | ||
addDays: typeof addDays; | ||
@@ -55,3 +61,2 @@ addMonths: typeof addMonths; | ||
getISOWeek: typeof getISOWeek; | ||
getUnixTime: typeof getUnixTime; | ||
getWeek: typeof getWeek; | ||
@@ -58,0 +63,0 @@ isAfter: typeof isAfter; |
@@ -13,3 +13,2 @@ import { addDays } from "date-fns/addDays"; | ||
import { getISOWeek } from "date-fns/getISOWeek"; | ||
import { getUnixTime } from "date-fns/getUnixTime"; | ||
import { getWeek } from "date-fns/getWeek"; | ||
@@ -31,3 +30,8 @@ import { isAfter } from "date-fns/isAfter"; | ||
import { startOfYear } from "date-fns/startOfYear"; | ||
/** The default date library to use with the date picker. */ | ||
/** | ||
* The default date library to use with the date picker. | ||
* | ||
* @private | ||
* @internal | ||
*/ | ||
export const dateLib = { | ||
@@ -48,3 +52,2 @@ /** The constructor of the date object. */ | ||
getISOWeek, | ||
getUnixTime, | ||
getWeek, | ||
@@ -51,0 +54,0 @@ isAfter, |
@@ -1,1 +0,1 @@ | ||
export * from "./dateLib"; | ||
export * from "./dateLib.js"; |
@@ -1,2 +0,2 @@ | ||
export * from "./dateLib"; | ||
export * from "./dateLib.js"; | ||
//# sourceMappingURL=index.js.map |
import React from "react"; | ||
import type { Modifiers, PropsMulti } from "../types"; | ||
export type MultiContextValue<T> = { | ||
setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined; | ||
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; | ||
@@ -13,14 +13,4 @@ } & (T extends { | ||
}); | ||
/** @private */ | ||
export declare function MultiProvider(props: React.PropsWithChildren<PropsMulti>): React.JSX.Element; | ||
/** | ||
* Access to the multi context to get the selected dates or update them. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare function useMulti<T extends { | ||
required: boolean; | ||
}>(): MultiContextValue<T>; | ||
export declare function useMulti<T extends DayPickerProps>(props: T extends { | ||
mode: "multiple"; | ||
} ? PropsMulti | PropsMultiRequired : object, dateLib: DateLib): UseMulti<T>; |
import React from "react"; | ||
import { useProps } from "../contexts"; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
const MultiContext = React.createContext(undefined); | ||
function useMultiContextValue({ required = false, min = undefined, max = undefined, selected, onSelect }) { | ||
const { mode, dateLib: { isSameDay, Date } } = useProps(); | ||
const [dates, setDates] = React.useState(selected); | ||
export function useMulti(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [dates, setDates] = React.useState(mode !== "multiple" ? undefined : selected); | ||
const { isSameDay, Date } = dateLib; | ||
// Update the selected date if the required flag is set. | ||
@@ -25,2 +23,3 @@ React.useEffect(() => { | ||
}; | ||
const { min, max } = props; | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
@@ -55,26 +54,6 @@ let newDates = [...(dates ?? [])]; | ||
selected: dates, | ||
setSelected, | ||
handleSelect: setSelected, | ||
isSelected | ||
}; | ||
} | ||
/** @private */ | ||
export function MultiProvider(props) { | ||
const value = useMultiContextValue(props); | ||
return (React.createElement(MultiContext.Provider, { value: value }, props.children)); | ||
} | ||
/** | ||
* Access to the multi context to get the selected dates or update them. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export function useMulti() { | ||
const context = React.useContext(MultiContext); | ||
if (!context) { | ||
throw new Error("useMulti() must be used within a MultiContextProvider."); | ||
} | ||
return context; | ||
} | ||
//# sourceMappingURL=useMulti.js.map |
import React from "react"; | ||
import { DateRange, Modifiers, PropsRange } from "../types"; | ||
export type RangeContextValue<T> = { | ||
setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined; | ||
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 { | ||
@@ -13,14 +16,4 @@ required: true; | ||
}); | ||
/** @private */ | ||
export declare function RangeProvider(props: React.PropsWithChildren<PropsRange>): React.JSX.Element; | ||
/** | ||
* Access to the range context to get the selected range or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare function useRange<T extends { | ||
required: boolean; | ||
}>(): RangeContextValue<T>; | ||
export declare function useRange<T extends DayPickerProps>(props: T extends { | ||
mode: "range"; | ||
} ? PropsRange | PropsRangeRequired : object, dateLib: DateLib): UseRange<T>; |
import React from "react"; | ||
import { useProps } from "../contexts"; | ||
import { addToRange } from "../utils"; | ||
import { isDateInRange } from "../utils/isDateInRange"; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
const RangeContext = React.createContext(undefined); | ||
function useRangeContextValue({ required, min, max, selected, onSelect }) { | ||
const { dateLib, mode } = useProps(); | ||
import { addToRange, dateMatchModifiers } from "../utils/index.js"; | ||
import { isDateInRange } from "../utils/isDateInRange.js"; | ||
export function useRange(props, dateLib) { | ||
const { mode, disabled, selected, required, onSelect } = props; | ||
const { differenceInCalendarDays } = dateLib; | ||
const [range, setRange] = React.useState(selected); | ||
const [range, setRange] = React.useState(mode === "range" ? selected : undefined); | ||
// Update the selected date if the required flag is set. | ||
React.useEffect(() => { | ||
if (mode !== "multiple") | ||
if (mode !== "range") | ||
return; | ||
@@ -23,11 +20,14 @@ if (required && range === undefined) { | ||
return; | ||
if (range === selected) | ||
return; | ||
setRange(selected); | ||
}, [mode, selected]); | ||
const isSelected = required | ||
? (date) => isDateInRange(date, range, dateLib) | ||
: (date) => range && isDateInRange(date, range, dateLib); | ||
}, [mode, range, selected]); | ||
const isSelected = (date) => range && isDateInRange(date, range, dateLib); | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "range") | ||
return; | ||
const newRange = triggerDate | ||
? addToRange(triggerDate, range, dateLib) | ||
: undefined; | ||
const { min, max } = props; | ||
if (min) { | ||
@@ -49,2 +49,13 @@ if (newRange?.from && | ||
} | ||
if (newRange?.from && newRange.to) { | ||
let newDate = newRange.from; | ||
while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) { | ||
newDate = dateLib.addDays(newDate, 1); | ||
if (disabled && dateMatchModifiers(newDate, disabled, dateLib)) { | ||
newRange.from = triggerDate; | ||
newRange.to = undefined; | ||
break; | ||
} | ||
} | ||
} | ||
setRange(newRange); | ||
@@ -54,28 +65,25 @@ onSelect?.(newRange, triggerDate, modifiers, e); | ||
}; | ||
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, | ||
setSelected, | ||
isSelected | ||
handleSelect: setSelected, | ||
isSelected, | ||
isRangeStart, | ||
isRangeEnd, | ||
isRangeMiddle | ||
}; | ||
} | ||
/** @private */ | ||
export function RangeProvider(props) { | ||
const value = useRangeContextValue(props); | ||
return (React.createElement(RangeContext.Provider, { value: value }, props.children)); | ||
} | ||
/** | ||
* Access to the range context to get the selected range or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export function useRange() { | ||
const context = React.useContext(RangeContext); | ||
if (!context) { | ||
throw new Error("useRange() must be used within a RangeContextProvider."); | ||
} | ||
return context; | ||
} | ||
//# sourceMappingURL=useRange.js.map |
import React from "react"; | ||
import { Modifiers, PropsSingle } from "../types"; | ||
export type SingleContextValue<T> = { | ||
setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void; | ||
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; | ||
isSelected: (date: Date) => boolean; | ||
@@ -13,12 +13,4 @@ } & (T extends { | ||
}); | ||
/** @private */ | ||
export declare function SingleProvider(props: React.PropsWithChildren<PropsSingle>): React.JSX.Element; | ||
/** | ||
* Access to the single context to get the selected date or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare function useSingle(): SingleContextValue<any>; | ||
export declare function useSingle<T extends DayPickerProps>(props: T extends { | ||
mode: "single"; | ||
} ? PropsSingle | PropsSingleRequired : object, dateLib: DateLib): UseSingle<T>; |
import React from "react"; | ||
import { useProps } from "../contexts"; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
const SingleContext = React.createContext(undefined); | ||
function useSingleContextValue({ required = false, selected, onSelect }) { | ||
const [date, setDate] = React.useState(selected); | ||
const { dateLib: { isSameDay }, today, mode } = useProps(); | ||
export function useSingle(props, dateLib) { | ||
const { selected, required, onSelect, mode } = props; | ||
const [date, setDate] = React.useState(mode !== "single" ? undefined : selected); | ||
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(today); | ||
setDate(startOfDay(new Date())); | ||
} | ||
}, [required, date, today]); | ||
}, [required, date, Date, startOfDay, mode]); | ||
// Update the selected date if the `selected` value changes. | ||
@@ -24,2 +24,4 @@ React.useEffect(() => { | ||
const setSelected = (triggerDate, modifiers, e) => { | ||
if (mode !== "single") | ||
return; | ||
let newDate = triggerDate; | ||
@@ -31,27 +33,16 @@ if (!required && date && date && isSameDay(triggerDate, date)) { | ||
setDate(newDate); | ||
onSelect?.(newDate, triggerDate, modifiers, e); | ||
if (required) { | ||
onSelect?.(newDate, triggerDate, modifiers, e); | ||
} | ||
else { | ||
onSelect?.(newDate, triggerDate, modifiers, e); | ||
} | ||
return newDate; | ||
}; | ||
return { selected: date, setSelected, isSelected }; | ||
return { | ||
selected: date, | ||
handleSelect: setSelected, | ||
isSelected | ||
}; | ||
} | ||
/** @private */ | ||
export function SingleProvider(props) { | ||
const value = useSingleContextValue(props); | ||
return (React.createElement(SingleContext.Provider, { value: value }, props.children)); | ||
} | ||
/** | ||
* Access to the single context to get the selected date or update it. | ||
* | ||
* Use this hook from the custom components passed via the `components` prop. | ||
* | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export function useSingle() { | ||
const context = React.useContext(SingleContext); | ||
if (!context) { | ||
throw new Error("useSingle() must be used within a SingleContextProvider"); | ||
} | ||
return context; | ||
} | ||
//# sourceMappingURL=useSingle.js.map |
@@ -1,10 +0,7 @@ | ||
/// <reference types="react" /> | ||
import { Calendar } from "../components/Calendar"; | ||
import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption"; | ||
import { Week, type WeekProps } from "../components/Week"; | ||
import { useCalendar } from "../contexts"; | ||
import { useProps, type PropsContextValue } from "../contexts"; | ||
import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels"; | ||
import type { PropsMulti, PropsRange, PropsSingle } from "./props"; | ||
import type { Mode, DayEventHandler } from "./shared"; | ||
import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption.js"; | ||
import { Week, type WeekProps } from "../components/Week.js"; | ||
import { labelDayButton, labelNext, labelWeekday, labelWeekNumber } from "../labels/index.js"; | ||
import { useDayPicker } from "../useDayPicker.js"; | ||
import type { PropsMulti, PropsRange, PropsSingle } from "./props.js"; | ||
import type { Mode, DayEventHandler } from "./shared.js"; | ||
/** | ||
@@ -21,13 +18,6 @@ * @deprecated This type will be removed. | ||
/** | ||
* @deprecated This type has been renamed. Use `Calendar` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export declare const Root: typeof Calendar; | ||
/** | ||
* @deprecated This component has been renamed. Use `MonthCaption` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -44,3 +34,3 @@ export declare const Caption: typeof MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -52,3 +42,3 @@ export type HeadRow = any; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -113,18 +103,12 @@ export declare const Row: typeof Week; | ||
/** | ||
* @deprecated This type has been renamed to `useProps`. | ||
* @deprecated This type has been removed to `useDayPicker`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export declare const useDayPicker: typeof useProps; | ||
export declare const useNavigation: typeof useDayPicker; | ||
/** | ||
* @deprecated This type has been renamed to `useCalendar`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export declare const useNavigation: typeof useCalendar; | ||
/** | ||
* @deprecated This hook has been removed. Use a custom `Day` component instead. | ||
* @protected | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -138,6 +122,6 @@ export type useDayRender = any; | ||
/** | ||
* @deprecated Use `typeof labelDay` instead. | ||
* @deprecated Use `typeof labelDayButton` instead. | ||
* @protected | ||
*/ | ||
export type DayLabel = typeof labelDay; | ||
export type DayLabel = typeof labelDayButton; | ||
/** | ||
@@ -193,6 +177,1 @@ * @deprecated Use `typeof labelNext` or `typeof labelPrevious` instead. | ||
export type DayTouchEventHandler = DayEventHandler<React.TouchEvent>; | ||
/** | ||
* @deprecated The type has been renamed. Use `PropsContext` instead. | ||
* @protected | ||
*/ | ||
export type DayPickerContext = PropsContextValue; |
/* eslint-disable @typescript-eslint/no-explicit-any */ | ||
import { Calendar } from "../components/Calendar"; | ||
import { MonthCaption } from "../components/MonthCaption"; | ||
import { Week } from "../components/Week"; | ||
import { useCalendar } from "../contexts"; | ||
import { useProps } from "../contexts"; | ||
import { MonthCaption } from "../components/MonthCaption.js"; | ||
import { Week } from "../components/Week.js"; | ||
import { useDayPicker } from "../useDayPicker.js"; | ||
/** | ||
* @deprecated This type has been renamed. Use `Calendar` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export const Root = Calendar; | ||
/** | ||
* @deprecated This component has been renamed. Use `MonthCaption` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -25,17 +16,11 @@ export const Caption = MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
export const Row = Week; | ||
/** | ||
* @deprecated This type has been renamed to `useProps`. | ||
* @deprecated This type has been removed to `useDayPicker`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export const useDayPicker = useProps; | ||
/** | ||
* @deprecated This type has been renamed to `useCalendar`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export const useNavigation = useCalendar; | ||
export const useNavigation = useDayPicker; | ||
//# sourceMappingURL=deprecated.js.map |
@@ -1,3 +0,3 @@ | ||
export * from "./deprecated"; | ||
export * from "./shared"; | ||
export * from "./props"; | ||
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; |
@@ -1,4 +0,4 @@ | ||
export * from "./deprecated"; | ||
export * from "./shared"; | ||
export * from "./props"; | ||
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; | ||
//# sourceMappingURL=index.js.map |
import React from "react"; | ||
import type { Locale } from "../lib/dateLib"; | ||
import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, WeekNumberMouseEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared.js"; | ||
/** | ||
@@ -177,5 +177,12 @@ * The props for the `<DayPicker />` component. | ||
components?: CustomComponents; | ||
/** Content to add to the grid as footer element. */ | ||
footer?: React.ReactNode; | ||
/** | ||
* Add a footer to the calendar, acting as live region. | ||
* | ||
* Use this prop to communicate the calendar's status to screen readers. | ||
* Prefer strings over complex UI elements. | ||
* | ||
* @see https://daypicker.dev/next/using-daypicker/accessibility | ||
*/ | ||
footer?: React.ReactNode | string; | ||
/** | ||
* When a selection mode is set, DayPicker will focus the first selected day | ||
@@ -261,2 +268,12 @@ * (if set) or the today's date (if not disabled). | ||
onMonthChange?: MonthChangeEventHandler; | ||
/** Event handler when the next month button is clicked. */ | ||
onNextClick?: MonthChangeEventHandler; | ||
/** Event handler when the previous month button is clicked. */ | ||
onPrevClick?: MonthChangeEventHandler; | ||
/** | ||
* Event handler when a week number is clicked | ||
* | ||
* @deprecated Use a custom `WeekNumber` component instead. | ||
*/ | ||
onWeekNumberClick?: any; | ||
/** Event handler when a day is clicked. */ | ||
@@ -268,38 +285,52 @@ onDayClick?: DayEventHandler<React.MouseEvent>; | ||
onDayBlur?: DayEventHandler<React.FocusEvent>; | ||
/** Event handler when the mouse enters a day. */ | ||
onDayMouseEnter?: DayEventHandler<React.MouseEvent>; | ||
/** Event handler when the mouse leaves a day. */ | ||
onDayMouseLeave?: DayEventHandler<React.MouseEvent>; | ||
/** Event handler when a key is pressed on a day. */ | ||
onDayKeyDown?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a key is released on a day. */ | ||
/** | ||
* Replace the default date library with a custom one. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @experimental | ||
*/ | ||
dateLib?: Partial<DateLib> | undefined; | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayKeyUp?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a key is pressed and released on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayKeyPress?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a pointer enters a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayPointerEnter?: DayEventHandler<React.PointerEvent>; | ||
/** Event handler when a pointer leaves a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayPointerLeave?: DayEventHandler<React.PointerEvent>; | ||
/** Event handler when a touch is cancelled on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchCancel?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch ends on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchEnd?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch moves on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchMove?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch starts on a day. */ | ||
onDayTouchStart?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when the next month button is clicked. */ | ||
onNextClick?: MonthChangeEventHandler; | ||
/** Event handler when the previous month button is clicked. */ | ||
onPrevClick?: MonthChangeEventHandler; | ||
/** Event handler when a week number is clicked */ | ||
onWeekNumberClick?: WeekNumberMouseEventHandler; | ||
/** | ||
* Replace the default date library with a custom one. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @experimental | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
dateLib?: Partial<DateLib> | undefined; | ||
onDayTouchStart?: DayEventHandler<React.TouchEvent>; | ||
} | ||
@@ -376,2 +407,3 @@ /** | ||
selected?: DateRange | undefined; | ||
disabled?: Matcher | Matcher[] | undefined; | ||
onSelect?: (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined; | ||
@@ -378,0 +410,0 @@ min?: number; |
@@ -1,7 +0,7 @@ | ||
import type { MouseEvent, CSSProperties } from "react"; | ||
import { UI, DayFlag, CalendarFlag, ChevronFlag, WeekNumberFlag, SelectionState } from "../UI"; | ||
import * as components from "../components/custom-components"; | ||
import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters"; | ||
import { labelDay, labelCaption, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels"; | ||
import { dateLib } from "../lib"; | ||
import type { CSSProperties } from "react"; | ||
import { UI, DayFlag, SelectionState } from "../UI.js"; | ||
import * as components from "../components/custom-components.js"; | ||
import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters/index.js"; | ||
import { labelDayButton, labelNav, labelGrid, labelGridcell, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels/index.js"; | ||
import { dateLib } from "../lib/index.js"; | ||
/** | ||
@@ -42,3 +42,3 @@ * Selection modes supported by DayPicker. | ||
formatWeekNumber: typeof formatWeekNumber; | ||
/** Format the week day name in the header */ | ||
/** Format the week day name in the header. */ | ||
formatWeekdayName: typeof formatWeekdayName; | ||
@@ -48,17 +48,23 @@ }; | ||
export type Labels = { | ||
/** Return the label for the month dropdown. */ | ||
labelCaption: typeof labelCaption; | ||
/** Return the label for the month dropdown. */ | ||
/** The label for the navigation toolbar. */ | ||
labelNav: typeof labelNav; | ||
/** The label for the month grid. */ | ||
labelGrid: typeof labelGrid; | ||
/** The label for the gridcell, when the calendar is not interactive. */ | ||
labelGridcell: typeof labelGridcell; | ||
/** The label for the month dropdown. */ | ||
labelMonthDropdown: typeof labelMonthDropdown; | ||
/** Return the label for the year dropdown. */ | ||
/** The label for the year dropdown. */ | ||
labelYearDropdown: typeof labelYearDropdown; | ||
/** Return the label for the next month button. */ | ||
/** The label for the "next month" button. */ | ||
labelNext: typeof labelNext; | ||
/** Return the label for the previous month button. */ | ||
/** The label for the "previous month" button. */ | ||
labelPrevious: typeof labelPrevious; | ||
/** Return the label for the day cell. */ | ||
labelDay: typeof labelDay; | ||
/** Return the label for the weekday. */ | ||
/** The label for the day button.. */ | ||
labelDayButton: typeof labelDayButton; | ||
/** @deprecated Use {@link labelDayButton} instead. */ | ||
labelDay: typeof labelDayButton; | ||
/** The label for the weekday. */ | ||
labelWeekday: typeof labelWeekday; | ||
/** Return the label for the week number. */ | ||
/** The label for the week number. */ | ||
labelWeekNumber: typeof labelWeekNumber; | ||
@@ -172,17 +178,9 @@ /** | ||
export type MonthChangeEventHandler = (month: Date) => void; | ||
/** The event handler when the week number is clicked. */ | ||
export type WeekNumberMouseEventHandler = ( | ||
/** The week number that has been clicked. */ | ||
weekNumber: number, | ||
/** The dates in the clicked week. */ | ||
dates: Date[], | ||
/** The mouse event that triggered this event. */ | ||
e: MouseEvent) => void; | ||
/** Maps user interface elements, selection states, and flags to a CSS style. */ | ||
export type Styles = { | ||
[key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: CSSProperties | undefined; | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
/** Defines the class names for various UI components and states. */ | ||
export type ClassNames = { | ||
[key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: string; | ||
[key in UI | SelectionState | DayFlag]: string; | ||
}; | ||
@@ -189,0 +187,0 @@ /** The flags that are matching a day in the calendar. */ |
@@ -11,9 +11,6 @@ /** | ||
ButtonPrevious = "button_previous", | ||
/** The next button the navigation */ | ||
/** The next button the navigation. */ | ||
ButtonNext = "button_next", | ||
/** | ||
* The calendar element: the root component displaying the months and the | ||
* navigation bar. Extended by {@link CalendarFlag}. | ||
*/ | ||
Calendar = "calendar", | ||
/** The root component displaying the months and the navigation bar. */ | ||
Root = "root", | ||
/** The Chevron SVG element used by navigation buttons and dropdowns. */ | ||
@@ -26,4 +23,4 @@ Chevron = "chevron", | ||
Day = "day", | ||
/** The element containing the formatted day's date, inside the grid cell. */ | ||
DayDate = "day_date", | ||
/** The button containing the formatted day's date, inside the grid cell. */ | ||
DayButton = "day_button", | ||
/** The caption label of the month (when not showing the dropdown navigation). */ | ||
@@ -40,3 +37,3 @@ CaptionLabel = "caption_label", | ||
/** The month grid. */ | ||
Month = "month", | ||
MonthGrid = "month_grid", | ||
/** Contains the dropdown navigation or the caption label. */ | ||
@@ -46,7 +43,7 @@ MonthCaption = "month_caption", | ||
MonthsDropdown = "months_dropdown", | ||
/** Wrapper of the {@link} grid. */ | ||
MonthWrapper = "month_wrapper", | ||
/** Wrapper of the month grid. */ | ||
Month = "month", | ||
/** The container of the displayed months. */ | ||
Months = "months", | ||
/** The navigation bar with the previous and next buttons */ | ||
/** The navigation bar with the previous and next buttons. */ | ||
Nav = "nav", | ||
@@ -61,7 +58,6 @@ /** The row containing the week. */ | ||
Weekdays = "weekdays", | ||
/** | ||
* The row header containing the week number. Extended by | ||
* {@link WeekNumberFlag}. | ||
*/ | ||
/** The row header containing the week number. */ | ||
WeekNumber = "week_number", | ||
/** The row header containing the week number. */ | ||
WeekNumberHeader = "week_number_header", | ||
/** The dropdown with the years. */ | ||
@@ -72,10 +68,8 @@ YearsDropdown = "years_dropdown" | ||
export declare enum DayFlag { | ||
/** The day is disabled */ | ||
/** The day is disabled. */ | ||
disabled = "disabled", | ||
/** The day is hidden */ | ||
/** The day is hidden. */ | ||
hidden = "hidden", | ||
/** The day is outside the current month */ | ||
/** The day is outside the current month. */ | ||
outside = "outside", | ||
/** The day is focusable. */ | ||
focusable = "focusable", | ||
/** The day is focused. */ | ||
@@ -100,23 +94,1 @@ focused = "focused", | ||
} | ||
/** Flags that can be applied to the {@link UI.Calendar} element. */ | ||
export declare enum CalendarFlag { | ||
/** Assigned when the week numbers are show. */ | ||
has_week_numbers = "has_week_numbers", | ||
/** Assigned when the weekdays are hidden. */ | ||
no_weekdays = "no_weekdays", | ||
/** Assigned when the calendar has multiple months. */ | ||
has_multiple_months = "has_multiple_months" | ||
} | ||
/** Flags that can be applied to the {@link UI.Chevron} element. */ | ||
export declare enum ChevronFlag { | ||
/** Assigned when the week numbers are show. */ | ||
disabled = "chevron_disabled" | ||
} | ||
/** Flags that can be applied to the {@link UI.WeekNumber} element. */ | ||
export declare enum WeekNumberFlag { | ||
/** | ||
* Assigned when the week number is interactive, i.e. has an | ||
* `onWeekNumberClick` event attached to it. | ||
*/ | ||
week_number_interactive = "week_number_interactive" | ||
} |
@@ -12,9 +12,6 @@ /** | ||
UI["ButtonPrevious"] = "button_previous"; | ||
/** The next button the navigation */ | ||
/** The next button the navigation. */ | ||
UI["ButtonNext"] = "button_next"; | ||
/** | ||
* The calendar element: the root component displaying the months and the | ||
* navigation bar. Extended by {@link CalendarFlag}. | ||
*/ | ||
UI["Calendar"] = "calendar"; | ||
/** The root component displaying the months and the navigation bar. */ | ||
UI["Root"] = "root"; | ||
/** The Chevron SVG element used by navigation buttons and dropdowns. */ | ||
@@ -27,4 +24,4 @@ UI["Chevron"] = "chevron"; | ||
UI["Day"] = "day"; | ||
/** The element containing the formatted day's date, inside the grid cell. */ | ||
UI["DayDate"] = "day_date"; | ||
/** The button containing the formatted day's date, inside the grid cell. */ | ||
UI["DayButton"] = "day_button"; | ||
/** The caption label of the month (when not showing the dropdown navigation). */ | ||
@@ -41,3 +38,3 @@ UI["CaptionLabel"] = "caption_label"; | ||
/** The month grid. */ | ||
UI["Month"] = "month"; | ||
UI["MonthGrid"] = "month_grid"; | ||
/** Contains the dropdown navigation or the caption label. */ | ||
@@ -47,7 +44,7 @@ UI["MonthCaption"] = "month_caption"; | ||
UI["MonthsDropdown"] = "months_dropdown"; | ||
/** Wrapper of the {@link} grid. */ | ||
UI["MonthWrapper"] = "month_wrapper"; | ||
/** Wrapper of the month grid. */ | ||
UI["Month"] = "month"; | ||
/** The container of the displayed months. */ | ||
UI["Months"] = "months"; | ||
/** The navigation bar with the previous and next buttons */ | ||
/** The navigation bar with the previous and next buttons. */ | ||
UI["Nav"] = "nav"; | ||
@@ -62,7 +59,6 @@ /** The row containing the week. */ | ||
UI["Weekdays"] = "weekdays"; | ||
/** | ||
* The row header containing the week number. Extended by | ||
* {@link WeekNumberFlag}. | ||
*/ | ||
/** The row header containing the week number. */ | ||
UI["WeekNumber"] = "week_number"; | ||
/** The row header containing the week number. */ | ||
UI["WeekNumberHeader"] = "week_number_header"; | ||
/** The dropdown with the years. */ | ||
@@ -74,10 +70,8 @@ UI["YearsDropdown"] = "years_dropdown"; | ||
(function (DayFlag) { | ||
/** The day is disabled */ | ||
/** The day is disabled. */ | ||
DayFlag["disabled"] = "disabled"; | ||
/** The day is hidden */ | ||
/** The day is hidden. */ | ||
DayFlag["hidden"] = "hidden"; | ||
/** The day is outside the current month */ | ||
/** The day is outside the current month. */ | ||
DayFlag["outside"] = "outside"; | ||
/** The day is focusable. */ | ||
DayFlag["focusable"] = "focusable"; | ||
/** The day is focused. */ | ||
@@ -103,27 +97,2 @@ DayFlag["focused"] = "focused"; | ||
})(SelectionState || (SelectionState = {})); | ||
/** Flags that can be applied to the {@link UI.Calendar} element. */ | ||
export var CalendarFlag; | ||
(function (CalendarFlag) { | ||
/** Assigned when the week numbers are show. */ | ||
CalendarFlag["has_week_numbers"] = "has_week_numbers"; | ||
/** Assigned when the weekdays are hidden. */ | ||
CalendarFlag["no_weekdays"] = "no_weekdays"; | ||
/** Assigned when the calendar has multiple months. */ | ||
CalendarFlag["has_multiple_months"] = "has_multiple_months"; | ||
})(CalendarFlag || (CalendarFlag = {})); | ||
/** Flags that can be applied to the {@link UI.Chevron} element. */ | ||
export var ChevronFlag; | ||
(function (ChevronFlag) { | ||
/** Assigned when the week numbers are show. */ | ||
ChevronFlag["disabled"] = "chevron_disabled"; | ||
})(ChevronFlag || (ChevronFlag = {})); | ||
/** Flags that can be applied to the {@link UI.WeekNumber} element. */ | ||
export var WeekNumberFlag; | ||
(function (WeekNumberFlag) { | ||
/** | ||
* Assigned when the week number is interactive, i.e. has an | ||
* `onWeekNumberClick` event attached to it. | ||
*/ | ||
WeekNumberFlag["week_number_interactive"] = "week_number_interactive"; | ||
})(WeekNumberFlag || (WeekNumberFlag = {})); | ||
//# sourceMappingURL=UI.js.map |
import React from "react"; | ||
import { type DayPickerProps } from "./"; | ||
import { type DayPickerProps } from "./index.js"; | ||
export declare function DayPicker(props: DayPickerProps): React.JSX.Element; |
import React from "react"; | ||
import { UTCDate } from "@date-fns/utc"; | ||
import { DayPicker as DayPickerComponent } from "./"; | ||
import { DayPicker as DayPickerComponent } from "./index.js"; | ||
export function DayPicker(props) { | ||
@@ -5,0 +5,0 @@ return React.createElement(DayPickerComponent, { dateLib: { Date: UTCDate }, ...props }); |
@@ -1,2 +0,2 @@ | ||
import type { DateRange, DateLib } from "../types"; | ||
import type { DateRange, DateLib } from "../types/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Add a day to an existing range. |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Add a day to an existing range. |
@@ -1,4 +0,7 @@ | ||
import type { DateLib, Matcher } from "../types"; | ||
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[]; | ||
/** | ||
* Returns whether a day matches against at least one of the given Matchers. | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* | ||
@@ -20,2 +23,2 @@ * ```tsx | ||
*/ | ||
export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateUtils?: DateLib): boolean; | ||
export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateLib: DateLib): boolean; |
@@ -1,14 +0,10 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { isDateInRange } from "./isDateInRange"; | ||
import { isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType } from "./typeguards"; | ||
/** Returns true if `value` is a Date type. */ | ||
function isDateType(value) { | ||
return defaultDateLib.isDate(value); | ||
} | ||
import { isDateInRange } from "./isDateInRange.js"; | ||
import { isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType } from "./typeguards.js"; | ||
/** Returns true if `value` is an array of valid dates. */ | ||
function isArrayOfDates(value) { | ||
return Array.isArray(value) && value.every(defaultDateLib.isDate); | ||
export function isDatesArray(value, dateLib) { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
/** | ||
* Returns whether a day matches against at least one of the given Matchers. | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* | ||
@@ -30,5 +26,5 @@ * ```tsx | ||
*/ | ||
export function dateMatchModifiers(date, matchers, dateUtils = defaultDateLib) { | ||
export function dateMatchModifiers(date, matchers, dateLib) { | ||
const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers; | ||
const { isSameDay, differenceInCalendarDays, isAfter } = dateUtils; | ||
const { isSameDay, differenceInCalendarDays, isAfter } = dateLib; | ||
return matchersArr.some((matcher) => { | ||
@@ -38,10 +34,10 @@ if (typeof matcher === "boolean") { | ||
} | ||
if (isDateType(matcher)) { | ||
if (dateLib.isDate(matcher)) { | ||
return isSameDay(date, matcher); | ||
} | ||
if (isArrayOfDates(matcher)) { | ||
if (isDatesArray(matcher, dateLib)) { | ||
return matcher.includes(date); | ||
} | ||
if (isDateRange(matcher)) { | ||
return isDateInRange(date, matcher, dateUtils); | ||
return isDateInRange(date, matcher, dateLib); | ||
} | ||
@@ -48,0 +44,0 @@ if (isDayOfWeekType(matcher)) { |
@@ -1,4 +0,4 @@ | ||
export * from "./addToRange"; | ||
export * from "./dateMatchModifiers"; | ||
export * from "./isDateInRange"; | ||
export * from "./typeguards"; | ||
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./typeguards.js"; |
@@ -1,5 +0,5 @@ | ||
export * from "./addToRange"; | ||
export * from "./dateMatchModifiers"; | ||
export * from "./isDateInRange"; | ||
export * from "./typeguards"; | ||
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./typeguards.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import type { DateRange, DateLib } from "../types"; | ||
import type { DateRange, DateLib } from "../types/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Determines whether a given date is inside a specified date range. |
@@ -1,2 +0,2 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
/** | ||
@@ -3,0 +3,0 @@ * Determines whether a given date is inside a specified date range. |
@@ -1,2 +0,2 @@ | ||
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types"; | ||
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types/index.js"; | ||
/** | ||
@@ -27,8 +27,2 @@ * Returns true if `matcher` is of type `DateInterval`. | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export declare function isDayOfWeekType(value: unknown): value is DayOfWeek; | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
@@ -62,2 +56,8 @@ * | ||
/** | ||
* 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. | ||
@@ -64,0 +64,0 @@ * @protected |
@@ -37,10 +37,2 @@ /** | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isDayOfWeekType(value) { | ||
return Boolean(value && typeof value === "object" && "dayOfWeek" in value); | ||
} | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
@@ -80,2 +72,10 @@ * | ||
/** | ||
* 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. | ||
@@ -82,0 +82,0 @@ * @protected |
@@ -7,3 +7,3 @@ export * from "./AccessibleDatePicker"; | ||
export * from "./CustomCaption"; | ||
export * from "./CustomDayDate"; | ||
export * from "./CustomDayButton"; | ||
export * from "./CustomMultiple"; | ||
@@ -40,5 +40,3 @@ export * from "./CustomSingle"; | ||
export * from "./MultipleMonths"; | ||
export * from "./MultipleMonthsId"; | ||
export * from "./MultipleMonthsPaged"; | ||
export * from "./None"; | ||
export * from "./NumberingSystem"; | ||
@@ -45,0 +43,0 @@ export * from "./OutsideDays"; |
{ | ||
"name": "react-day-picker", | ||
"version": "9.0.0-rc.2", | ||
"version": "9.0.0-rc.3", | ||
"description": "Customizable Date Picker for React", | ||
@@ -19,2 +19,3 @@ "author": "Giampaolo Bellavite <io@gpbl.dev>", | ||
"style": "./src/style.css", | ||
"type": "module", | ||
"exports": { | ||
@@ -101,6 +102,6 @@ ".": { | ||
"prepublish": "pnpm build", | ||
"build": "pnpm build:cjs && pnpm build:esm", | ||
"build": "pnpm build:cjs && pnpm build:esm && pnpm build:css", | ||
"build:cjs": "tsc --project tsconfig-cjs.json", | ||
"build:esm": "tsc --project tsconfig-esm.json", | ||
"build:css": "tcm src", | ||
"build:css": "./scripts/build-css.sh ./src/style.css ./src/style.module.css", | ||
"lint": "eslint .", | ||
@@ -124,3 +125,3 @@ "test": "jest", | ||
"@testing-library/jest-dom": "^6.4.5", | ||
"@testing-library/react": "^15.0.7", | ||
"@testing-library/react": "^16.0.0", | ||
"@testing-library/user-event": "^14.5.2", | ||
@@ -135,3 +136,3 @@ "@trivago/prettier-plugin-sort-imports": "^4.3.0", | ||
"date-fns": "^3.6.0", | ||
"date-fns-jalali": "3.6.0-0", | ||
"date-fns-jalali": "3.6.0-1", | ||
"eslint": "^8.57.0", | ||
@@ -145,2 +146,3 @@ "eslint-config-prettier": "^9.1.0", | ||
"eslint-plugin-react-hooks": "^4.6.2", | ||
"eslint-plugin-require-extensions": "^0.1.3", | ||
"eslint-plugin-testing-library": "^6.2.2", | ||
@@ -158,3 +160,3 @@ "jest": "^29.7.0", | ||
"tslib": "^2.6.2", | ||
"typescript": "~5.4.5", | ||
"typescript": "~5.5.3", | ||
"typescript-css-modules": "^1.0.4" | ||
@@ -161,0 +163,0 @@ }, |
@@ -1,3 +0,3 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { DateLib } from "../types"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
@@ -23,5 +23,13 @@ /** | ||
this.dateLib = dateLib; | ||
const { format } = dateLib; | ||
this.uid = | ||
format(date, "yyyyMMdd") + | ||
(this.outside ? `-` + format(displayMonth, "yyyyMMdd") : ""); | ||
} | ||
/** The utility functions to manipulate dates. */ | ||
/** | ||
* The utility functions to manipulate dates. | ||
* | ||
* @private | ||
*/ | ||
readonly dateLib: DateLib; | ||
@@ -49,2 +57,5 @@ | ||
/** A unique identifier for the day. */ | ||
readonly uid: string; | ||
/** | ||
@@ -51,0 +62,0 @@ * Check if the day is the same as the given day: considering if it is in the |
@@ -1,2 +0,2 @@ | ||
import { CalendarWeek } from "./CalendarWeek"; | ||
import { CalendarWeek } from "./CalendarWeek.js"; | ||
@@ -3,0 +3,0 @@ /** Represent a month in a calendar year. Contains the weeks within the month. */ |
@@ -1,2 +0,2 @@ | ||
import { CalendarDay } from "./CalendarDay"; | ||
import { CalendarDay } from "./CalendarDay.js"; | ||
@@ -3,0 +3,0 @@ /** Represent a week in a calendar month. */ |
@@ -1,3 +0,3 @@ | ||
export * from "./CalendarDay"; | ||
export * from "./CalendarMonth"; | ||
export * from "./CalendarWeek"; | ||
export * from "./CalendarDay.js"; | ||
export * from "./CalendarMonth.js"; | ||
export * from "./CalendarWeek.js"; |
@@ -1,3 +0,3 @@ | ||
import { FormatOptions, dateLib as defaultDateLib } from "../lib"; | ||
import type { DateLib } from "../types"; | ||
import { FormatOptions, dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
@@ -4,0 +4,0 @@ /** |
@@ -1,4 +0,4 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
@@ -5,0 +5,0 @@ /** |
@@ -1,3 +0,3 @@ | ||
import type { DateFnsMonth } from "../lib/dateLib"; | ||
import { enUS } from "../lib/locales"; | ||
import type { DateFnsMonth } from "../lib/dateLib.js"; | ||
import { enUS } from "../lib/locales.js"; | ||
@@ -4,0 +4,0 @@ /** |
@@ -1,4 +0,4 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { FormatOptions } from "../lib/dateLib.js"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
@@ -5,0 +5,0 @@ /** |
/** | ||
* The default formatter for the week numbers. | ||
* | ||
* @param weekNumber - The week number to format. `0` when heading of the week | ||
* numbers. | ||
* @group Formatters | ||
*/ | ||
export function formatWeekNumber(weekNumber: number) { | ||
export function formatWeekNumber(weekNumber: number | 0) { | ||
if (weekNumber === 0) { | ||
return `#`; | ||
} | ||
if (weekNumber < 10) { | ||
return `0${weekNumber.toLocaleString()}`; | ||
} | ||
return `${weekNumber.toLocaleString()}`; | ||
} |
@@ -1,6 +0,7 @@ | ||
export * from "./formatCaption"; | ||
export * from "./formatDay"; | ||
export * from "./formatMonthDropdown"; | ||
export * from "./formatWeekNumber"; | ||
export * from "./formatWeekdayName"; | ||
export * from "./formatYearDropdown"; | ||
export * from "./formatCaption.js"; | ||
export * from "./formatDay.js"; | ||
export * from "./formatMonthDropdown.js"; | ||
export * from "./formatWeekNumber.js"; | ||
export * from "./formatWeekNumberHeader.js"; | ||
export * from "./formatWeekdayName.js"; | ||
export * from "./formatYearDropdown.js"; |
@@ -1,8 +0,8 @@ | ||
import { DayFlag, SelectionState } from "../UI"; | ||
import type { ModifiersClassNames, ClassNames } from "../types"; | ||
import { DayFlag, SelectionState } from "../UI.js"; | ||
import type { ModifiersClassNames, ClassNames } from "../types/index.js"; | ||
export function getClassNamesForModifiers( | ||
modifiers: Record<string, boolean>, | ||
modifiersClassNames: ModifiersClassNames, | ||
classNames: ClassNames | ||
classNames: ClassNames, | ||
modifiersClassNames: ModifiersClassNames = {} | ||
) { | ||
@@ -9,0 +9,0 @@ const modifierClassNames = Object.entries(modifiers) |
@@ -10,6 +10,10 @@ import { dateLib } from "../lib"; | ||
it("should return 42 dates", () => { | ||
const dates = getDates([month], undefined, { | ||
fixedWeeks: false, | ||
const dates = getDates( | ||
[month], | ||
undefined, | ||
{ | ||
fixedWeeks: false | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(dates).toHaveLength(42); | ||
@@ -22,6 +26,10 @@ expect(dates[0]).toEqual(new Date(2023, 10, 26)); | ||
it("should return 42 dates", () => { | ||
const dates = getDates([month], undefined, { | ||
fixedWeeks: true, | ||
const dates = getDates( | ||
[month], | ||
undefined, | ||
{ | ||
fixedWeeks: true | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(dates).toHaveLength(42); | ||
@@ -37,6 +45,10 @@ expect(dates[0]).toEqual(new Date(2023, 10, 26)); | ||
it("should return 35 dates", () => { | ||
const dates = getDates([month], undefined, { | ||
fixedWeeks: false, | ||
const dates = getDates( | ||
[month], | ||
undefined, | ||
{ | ||
fixedWeeks: false | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(dates).toHaveLength(35); | ||
@@ -49,6 +61,10 @@ expect(dates[0]).toEqual(new Date(2023, 3, 30)); | ||
it("should return 42 dates", () => { | ||
const dates = getDates([month], undefined, { | ||
fixedWeeks: true, | ||
const dates = getDates( | ||
[month], | ||
undefined, | ||
{ | ||
fixedWeeks: true | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(dates).toHaveLength(42); | ||
@@ -63,6 +79,10 @@ expect(dates[0]).toEqual(new Date(2023, 3, 30)); | ||
it("the first day should be Monday", () => { | ||
const dates = getDates([month], undefined, { | ||
weekStartsOn: 1, | ||
const dates = getDates( | ||
[month], | ||
undefined, | ||
{ | ||
weekStartsOn: 1 | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(dates[0]).toBeMonday(); | ||
@@ -78,3 +98,3 @@ expect(dates[0]).toEqual(new Date(2023, 4, 1)); | ||
it("the last day should be the max date", () => { | ||
const dates = getDates([month], maxDate, { weekStartsOn: 1, dateLib }); | ||
const dates = getDates([month], maxDate, { weekStartsOn: 1 }, dateLib); | ||
expect(dates).toHaveLength(15); | ||
@@ -87,3 +107,3 @@ expect(dates[dates.length - 1]).toEqual(maxDate); | ||
it("the first day should be Monday", () => { | ||
const dates = getDates([month], undefined, { ISOWeek: true, dateLib }); | ||
const dates = getDates([month], undefined, { ISOWeek: true }, dateLib); | ||
expect(dates[0]).toBeMonday(); | ||
@@ -101,6 +121,10 @@ expect(dates[0]).toEqual(new Date(2023, 4, 1)); | ||
it("should return an array of dates", () => { | ||
const dates = getDates([firstMonth, lastMonth], undefined, { | ||
fixedWeeks: false, | ||
const dates = getDates( | ||
[firstMonth, lastMonth], | ||
undefined, | ||
{ | ||
fixedWeeks: false | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(dates).toHaveLength(252); | ||
@@ -117,6 +141,10 @@ expect(dates[0]).toEqual(new Date(2023, 3, 30)); | ||
it("the last day should be the max date", () => { | ||
const dates = getDates([firstMonth, lastMonth], maxDate, { | ||
weekStartsOn: 1, | ||
const dates = getDates( | ||
[firstMonth, lastMonth], | ||
maxDate, | ||
{ | ||
weekStartsOn: 1 | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(dates).toHaveLength(46); | ||
@@ -129,3 +157,3 @@ expect(dates[dates.length - 1]).toEqual(maxDate); | ||
it("the first day should be Monday", () => { | ||
const dates = getDates([month], undefined, { ISOWeek: true, dateLib }); | ||
const dates = getDates([month], undefined, { ISOWeek: true }, dateLib); | ||
expect(dates[0]).toBeMonday(); | ||
@@ -132,0 +160,0 @@ expect(dates[0]).toEqual(new Date(2023, 4, 1)); |
@@ -1,2 +0,2 @@ | ||
import { PropsContextValue } from "../contexts"; | ||
import { DateLib, DayPickerProps } from "../index.js"; | ||
@@ -11,5 +11,6 @@ /** The number of days in a month when having 6 weeks. */ | ||
props: Pick< | ||
PropsContextValue, | ||
"ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | "dateLib" | ||
> | ||
DayPickerProps, | ||
"ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | ||
>, | ||
dateLib: DateLib | ||
): Date[] { | ||
@@ -31,3 +32,3 @@ const firstMonth = displayMonths[0]; | ||
Date | ||
} = props.dateLib; | ||
} = dateLib; | ||
@@ -34,0 +35,0 @@ const startWeekFirstDate = ISOWeek |
@@ -1,2 +0,2 @@ | ||
import type { CalendarDay, CalendarMonth } from "../classes"; | ||
import type { CalendarDay, CalendarMonth } from "../classes/index.js"; | ||
@@ -3,0 +3,0 @@ /** |
@@ -7,8 +7,7 @@ import { getDefaultClassNames } from "./getDefaultClassNames"; | ||
button_previous: "rdp-button_previous", | ||
calendar: "rdp-calendar", | ||
root: "rdp-root", | ||
caption_label: "rdp-caption_label", | ||
chevron: "rdp-chevron", | ||
chevron_disabled: "rdp-chevron_disabled", | ||
day: "rdp-day", | ||
day_date: "rdp-day_date", | ||
day_button: "rdp-day_button", | ||
disabled: "rdp-disabled", | ||
@@ -18,10 +17,7 @@ dropdown_nav: "rdp-dropdown_nav", | ||
dropdown: "rdp-dropdown", | ||
focusable: "rdp-focusable", | ||
focused: "rdp-focused", | ||
footer: "rdp-footer", | ||
has_multiple_months: "rdp-has_multiple_months", | ||
has_week_numbers: "rdp-has_week_numbers", | ||
hidden: "rdp-hidden", | ||
month_caption: "rdp-month_caption", | ||
month_wrapper: "rdp-month_wrapper", | ||
month_grid: "rdp-month_grid", | ||
month: "rdp-month", | ||
@@ -32,3 +28,2 @@ weeks: "rdp-weeks", | ||
nav: "rdp-nav", | ||
no_weekdays: "rdp-no_weekdays", | ||
outside: "rdp-outside", | ||
@@ -41,3 +36,3 @@ range_end: "rdp-range_end", | ||
week_number: "rdp-week_number", | ||
week_number_interactive: "rdp-week_number_interactive", | ||
week_number_header: "rdp-week_number_header", | ||
week: "rdp-week", | ||
@@ -44,0 +39,0 @@ weekday: "rdp-weekday", |
@@ -1,10 +0,3 @@ | ||
import { | ||
UI, | ||
DayFlag, | ||
CalendarFlag, | ||
ChevronFlag, | ||
WeekNumberFlag, | ||
SelectionState | ||
} from "../UI"; | ||
import type { ClassNames } from "../types"; | ||
import { UI, DayFlag, SelectionState } from "../UI.js"; | ||
import type { ClassNames } from "../types/index.js"; | ||
@@ -24,17 +17,2 @@ /** | ||
for (const key in CalendarFlag) { | ||
classNames[CalendarFlag[key as keyof typeof CalendarFlag]] = | ||
`rdp-${CalendarFlag[key as keyof typeof CalendarFlag]}`; | ||
} | ||
for (const key in ChevronFlag) { | ||
classNames[ChevronFlag[key as keyof typeof ChevronFlag]] = | ||
`rdp-${ChevronFlag[key as keyof typeof ChevronFlag]}`; | ||
} | ||
for (const key in WeekNumberFlag) { | ||
classNames[WeekNumberFlag[key as keyof typeof WeekNumberFlag]] = | ||
`rdp-${WeekNumberFlag[key as keyof typeof WeekNumberFlag]}`; | ||
} | ||
for (const key in DayFlag) { | ||
@@ -41,0 +19,0 @@ classNames[DayFlag[key as keyof typeof DayFlag]] = |
@@ -9,7 +9,3 @@ import { dateLib } from "react-day-picker"; | ||
const expectedResult = [new Date(2020, 0)]; | ||
const result = getDisplayMonths(firstMonth, { | ||
numberOfMonths: 1, | ||
endMonth: undefined, | ||
dateLib | ||
}); | ||
const result = getDisplayMonths(firstMonth, undefined, {}, dateLib); | ||
expect(result).toEqual(expectedResult); | ||
@@ -25,7 +21,10 @@ }); | ||
]; | ||
const result = getDisplayMonths(firstMonth, { | ||
numberOfMonths: 3, | ||
endMonth: undefined, | ||
const result = getDisplayMonths( | ||
firstMonth, | ||
undefined, | ||
{ | ||
numberOfMonths: 3 | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(result).toEqual(expectedResult); | ||
@@ -37,9 +36,12 @@ }); | ||
const expectedResult = [new Date(2020, 0), new Date(2020, 1)]; | ||
const result = getDisplayMonths(firstMonth, { | ||
numberOfMonths: 3, | ||
endMonth: new Date(2020, 1, 10), | ||
const result = getDisplayMonths( | ||
firstMonth, | ||
new Date(2020, 1, 10), | ||
{ | ||
numberOfMonths: 3 | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(result).toEqual(expectedResult); | ||
}); | ||
}); |
@@ -1,11 +0,14 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
export function getDisplayMonths( | ||
firstDisplayedMonth: Date, | ||
props: Pick<PropsContextValue, "numberOfMonths" | "endMonth" | "dateLib"> | ||
calendarEndMonth: Date | undefined, | ||
props: Pick<DayPickerProps, "numberOfMonths">, | ||
dateLib: DateLib | ||
) { | ||
const { numberOfMonths = 1 } = props; | ||
const months: Date[] = []; | ||
for (let i = 0; i < props.numberOfMonths; i++) { | ||
const month = props.dateLib.addMonths(firstDisplayedMonth, i); | ||
if (props.endMonth && month > props.endMonth) { | ||
for (let i = 0; i < numberOfMonths; i++) { | ||
const month = dateLib.addMonths(firstDisplayedMonth, i); | ||
if (calendarEndMonth && month > calendarEndMonth) { | ||
break; | ||
@@ -12,0 +15,0 @@ } |
@@ -16,9 +16,10 @@ import { type Locale, format } from "date-fns"; | ||
}); | ||
const result = getDropdownMonths(displayMonth, { | ||
const result = getDropdownMonths( | ||
displayMonth, | ||
startMonth, | ||
endMonth, | ||
formatters, | ||
locale, | ||
startMonth, | ||
endMonth, | ||
dateLib | ||
}); | ||
); | ||
@@ -25,0 +26,0 @@ expect(result).toEqual([ |
@@ -1,3 +0,4 @@ | ||
import { DropdownOption } from "../components/Dropdown"; | ||
import { PropsContextValue } from "../contexts"; | ||
import { DropdownOption } from "../components/Dropdown.js"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import type { DateLib, Formatters } from "../types/index.js"; | ||
@@ -7,16 +8,16 @@ /** Return the months to show in the dropdown. */ | ||
displayMonth: Date, | ||
props: Pick< | ||
PropsContextValue, | ||
"formatters" | "locale" | "startMonth" | "endMonth" | "dateLib" | ||
> | ||
calendarStartMonth: Date | undefined, | ||
calendarEndMonth: Date | undefined, | ||
formatters: Pick<Formatters, "formatMonthDropdown">, | ||
locale: Locale | undefined, | ||
dateLib: DateLib | ||
): DropdownOption[] | undefined { | ||
const { startMonth, endMonth } = props; | ||
if (!startMonth) return undefined; | ||
if (!endMonth) return undefined; | ||
if (!calendarStartMonth) return undefined; | ||
if (!calendarEndMonth) return undefined; | ||
const { addMonths, startOfMonth, isBefore, Date } = props.dateLib; | ||
const { addMonths, startOfMonth, isBefore, Date } = dateLib; | ||
const year = displayMonth.getFullYear(); | ||
const navStartMonth = startOfMonth(startMonth); | ||
const navEndMonth = startOfMonth(endMonth); | ||
const navStartMonth = startOfMonth(calendarStartMonth); | ||
const navEndMonth = startOfMonth(calendarEndMonth); | ||
@@ -33,6 +34,8 @@ const months: number[] = []; | ||
const options = sortedMonths.map((value) => { | ||
const label = props.formatters.formatMonthDropdown(value, props.locale); | ||
const label = formatters.formatMonthDropdown(value, locale); | ||
const disabled = | ||
(startMonth && new Date(year, value) < startOfMonth(startMonth)) || | ||
(endMonth && new Date(year, value) > startOfMonth(endMonth)) || | ||
(calendarStartMonth && | ||
new Date(year, value) < startOfMonth(calendarStartMonth)) || | ||
(calendarEndMonth && | ||
new Date(year, value) > startOfMonth(calendarEndMonth)) || | ||
false; | ||
@@ -39,0 +42,0 @@ return { value, label, disabled }; |
@@ -1,2 +0,1 @@ | ||
import { enUS as locale } from "date-fns/locale"; | ||
import { dateLib } from "react-day-picker"; | ||
@@ -12,16 +11,16 @@ | ||
}); | ||
const result1 = getDropdownYears(displayMonth, { | ||
const result1 = getDropdownYears( | ||
displayMonth, | ||
undefined, | ||
new Date(2022, 11, 31), | ||
formatters, | ||
locale, | ||
startMonth: undefined, | ||
endMonth: new Date(2022, 11, 31), | ||
dateLib | ||
}); | ||
const result2 = getDropdownYears(displayMonth, { | ||
); | ||
const result2 = getDropdownYears( | ||
displayMonth, | ||
new Date(2022, 0, 1), | ||
undefined, | ||
formatters, | ||
locale, | ||
startMonth: new Date(2022, 0, 1), | ||
endMonth: undefined, | ||
dateLib | ||
}); | ||
); | ||
@@ -40,9 +39,9 @@ expect(result1).toBeUndefined(); | ||
const result = getDropdownYears(displayMonth, { | ||
formatters, | ||
locale, | ||
const result = getDropdownYears( | ||
displayMonth, | ||
startMonth, | ||
endMonth, | ||
formatters, | ||
dateLib | ||
}); | ||
); | ||
@@ -49,0 +48,0 @@ expect(result).toEqual([ |
@@ -1,3 +0,3 @@ | ||
import { DropdownOption } from "../components/Dropdown"; | ||
import { PropsContextValue } from "../contexts"; | ||
import { DropdownOption } from "../components/Dropdown.js"; | ||
import type { DateLib, Formatters } from "../types/index.js"; | ||
@@ -7,10 +7,9 @@ /** Return the years to show in the dropdown. */ | ||
displayMonth: Date, | ||
props: Pick< | ||
PropsContextValue, | ||
"formatters" | "locale" | "startMonth" | "endMonth" | "dateLib" | ||
> | ||
calendarStart: Date | undefined, | ||
calendarEnd: Date | undefined, | ||
formatters: Pick<Formatters, "formatYearDropdown">, | ||
dateLib: DateLib | ||
): DropdownOption[] | undefined { | ||
const { startMonth, endMonth } = props; | ||
if (!startMonth) return undefined; | ||
if (!endMonth) return undefined; | ||
if (!calendarStart) return undefined; | ||
if (!calendarEnd) return undefined; | ||
const { | ||
@@ -24,6 +23,6 @@ startOfMonth, | ||
Date | ||
} = props.dateLib; | ||
} = dateLib; | ||
const month = displayMonth.getMonth(); | ||
const firstNavYear = startOfYear(startMonth); | ||
const lastNavYear = endOfYear(endMonth); | ||
const firstNavYear = startOfYear(calendarStart); | ||
const lastNavYear = endOfYear(calendarEnd); | ||
const years: number[] = []; | ||
@@ -39,6 +38,8 @@ | ||
const disabled = | ||
(startMonth && new Date(value, month) < startOfMonth(startMonth)) || | ||
(month && endMonth && new Date(value, month) > startOfMonth(endMonth)) || | ||
(calendarStart && new Date(value, month) < startOfMonth(calendarStart)) || | ||
(month && | ||
calendarEnd && | ||
new Date(value, month) > startOfMonth(calendarEnd)) || | ||
false; | ||
const label = props.formatters.formatYearDropdown(value); | ||
const label = formatters.formatYearDropdown(value); | ||
return { | ||
@@ -45,0 +46,0 @@ value, |
@@ -1,3 +0,3 @@ | ||
import * as defaultFormatters from "../formatters"; | ||
import type { DayPickerProps } from "../types"; | ||
import * as defaultFormatters from "../formatters/index.js"; | ||
import type { DayPickerProps } from "../types/index.js"; | ||
@@ -4,0 +4,0 @@ /** Return the formatters from the props merged with the default formatters. */ |
@@ -10,10 +10,3 @@ import { addMonths, isSameMonth } from "date-fns"; | ||
it("return that month", () => { | ||
const startMonth = getInitialMonth({ | ||
month, | ||
dateLib, | ||
startMonth: undefined, | ||
endMonth: undefined, | ||
today: new Date(), | ||
numberOfMonths: 0 | ||
}); | ||
const startMonth = getInitialMonth({ month }, dateLib); | ||
expect(isSameMonth(startMonth, month)).toBe(true); | ||
@@ -25,23 +18,10 @@ }); | ||
it("return that month", () => { | ||
const startMonth = getInitialMonth({ | ||
defaultMonth, | ||
startMonth: undefined, | ||
endMonth: undefined, | ||
today: new Date(), | ||
numberOfMonths: 0, | ||
dateLib | ||
}); | ||
const startMonth = getInitialMonth({ defaultMonth }, dateLib); | ||
expect(isSameMonth(startMonth, defaultMonth)).toBe(true); | ||
}); | ||
}); | ||
describe("when no month or defaultMonth are in context", () => { | ||
describe("when no month or defaultMonth", () => { | ||
const today = new Date(2010, 11, 12); | ||
it("return the today month", () => { | ||
const startMonth = getInitialMonth({ | ||
today, | ||
startMonth: undefined, | ||
endMonth: undefined, | ||
numberOfMonths: 0, | ||
dateLib | ||
}); | ||
const startMonth = getInitialMonth({ today }, dateLib); | ||
expect(isSameMonth(startMonth, today)).toBe(true); | ||
@@ -56,12 +36,4 @@ }); | ||
describe("when the number of month is 1", () => { | ||
const numberOfMonths = 1; | ||
it("return the endMonth", () => { | ||
const startMonth = getInitialMonth({ | ||
month, | ||
endMonth, | ||
numberOfMonths, | ||
startMonth: undefined, | ||
today: new Date(), | ||
dateLib | ||
}); | ||
const startMonth = getInitialMonth({ month, endMonth }, dateLib); | ||
expect(isSameMonth(startMonth, endMonth)).toBe(true); | ||
@@ -71,13 +43,8 @@ }); | ||
describe("when the number of month is 3", () => { | ||
const numberOfMonths = 3; | ||
it("return the endMonth plus the number of months", () => { | ||
const startMonth = getInitialMonth({ | ||
month, | ||
endMonth, | ||
numberOfMonths, | ||
startMonth: undefined, | ||
today: new Date(), | ||
const startMonth = getInitialMonth( | ||
{ month, numberOfMonths: 3, endMonth }, | ||
dateLib | ||
}); | ||
const expectedMonth = addMonths(endMonth, -1 * (numberOfMonths - 1)); | ||
); | ||
const expectedMonth = addMonths(endMonth, -1 * (3 - 1)); | ||
expect(isSameMonth(startMonth, expectedMonth)).toBe(true); | ||
@@ -84,0 +51,0 @@ }); |
@@ -1,2 +0,2 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../index.js"; | ||
@@ -6,3 +6,3 @@ /** Return the start month based on the props passed to DayPicker. */ | ||
props: Pick< | ||
PropsContextValue, | ||
DayPickerProps, | ||
| "fromYear" | ||
@@ -16,4 +16,4 @@ | "toYear" | ||
| "numberOfMonths" | ||
| "dateLib" | ||
> | ||
>, | ||
dateLib: DateLib | ||
): Date { | ||
@@ -23,4 +23,3 @@ const { | ||
defaultMonth, | ||
dateLib: { Date }, | ||
today, | ||
today = new dateLib.Date(), | ||
numberOfMonths = 1, | ||
@@ -30,4 +29,4 @@ endMonth, | ||
} = props; | ||
let initialMonth = month || defaultMonth || today || new Date(); | ||
const { differenceInCalendarMonths, addMonths, startOfMonth } = props.dateLib; | ||
let initialMonth = month || defaultMonth || today; | ||
const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib; | ||
@@ -34,0 +33,0 @@ // Fix the initialMonth if is after the to-date |
@@ -0,3 +1,4 @@ | ||
import { DayPickerProps } from "react-day-picker"; | ||
import { CalendarMonth } from "../classes"; | ||
import type { PropsContextValue } from "../contexts/useProps"; | ||
import { dateLib } from "../lib"; | ||
@@ -18,3 +19,3 @@ | ||
const mockProps: Pick< | ||
PropsContextValue, | ||
DayPickerProps, | ||
| "fixedWeeks" | ||
@@ -26,3 +27,2 @@ | "ISOWeek" | ||
| "firstWeekContainsDate" | ||
| "dateLib" | ||
> = { | ||
@@ -34,4 +34,3 @@ fixedWeeks: false, | ||
reverseMonths: false, | ||
firstWeekContainsDate: 1, | ||
dateLib | ||
firstWeekContainsDate: 1 | ||
}; | ||
@@ -42,3 +41,3 @@ | ||
const result = getMonths(displayMonths, mockDates, mockProps); | ||
const result = getMonths(displayMonths, mockDates, mockProps, dateLib); | ||
@@ -55,3 +54,3 @@ expect(result).toHaveLength(1); | ||
const result = getMonths(displayMonths, mockDates, isoProps); | ||
const result = getMonths(displayMonths, mockDates, isoProps, dateLib); | ||
@@ -71,3 +70,3 @@ expect(result).toHaveLength(1); | ||
const result = getMonths(displayMonths, mockDates, reverseProps); | ||
const result = getMonths(displayMonths, mockDates, reverseProps, dateLib); | ||
@@ -84,3 +83,3 @@ expect(result).toHaveLength(2); | ||
const result = getMonths(displayMonths, mockDates, fixedWeeksProps); | ||
const result = getMonths(displayMonths, mockDates, fixedWeeksProps, dateLib); | ||
@@ -95,3 +94,3 @@ expect(result).toHaveLength(1); | ||
const result = getMonths(displayMonths, [], mockProps); | ||
const result = getMonths(displayMonths, [], mockProps, dateLib); | ||
@@ -98,0 +97,0 @@ expect(result).toHaveLength(1); |
@@ -1,3 +0,3 @@ | ||
import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes"; | ||
import type { PropsContextValue } from "../contexts"; | ||
import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
@@ -11,5 +11,4 @@ /** Return the months to display in the calendar. */ | ||
/** Options from the props context. */ | ||
props: Pick< | ||
PropsContextValue, | ||
| "dateLib" | ||
options: Pick< | ||
DayPickerProps, | ||
| "fixedWeeks" | ||
@@ -21,3 +20,4 @@ | "ISOWeek" | ||
| "firstWeekContainsDate" | ||
> | ||
>, | ||
dateLib: DateLib | ||
): CalendarMonth[] { | ||
@@ -33,17 +33,17 @@ const { | ||
getISOWeek | ||
} = props.dateLib; | ||
} = dateLib; | ||
const dayPickerMonths = displayMonths.reduce<CalendarMonth[]>( | ||
(months, month) => { | ||
const firstDateOfFirstWeek = props.ISOWeek | ||
const firstDateOfFirstWeek = options.ISOWeek | ||
? startOfISOWeek(month) | ||
: startOfWeek(month, { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
}); | ||
const lastDateOfLastWeek = props.ISOWeek | ||
const lastDateOfLastWeek = options.ISOWeek | ||
? endOfISOWeek(endOfMonth(month)) | ||
: endOfWeek(endOfMonth(month), { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn | ||
}); | ||
@@ -56,3 +56,3 @@ | ||
if (props.fixedWeeks && monthDates.length < 42) { | ||
if (options.fixedWeeks && monthDates.length < 42) { | ||
const extraDates = dates.filter((date) => { | ||
@@ -68,12 +68,12 @@ return ( | ||
(weeks, date) => { | ||
const weekNumber = props.ISOWeek | ||
const weekNumber = options.ISOWeek | ||
? getISOWeek(date) | ||
: getWeek(date, { | ||
locale: props.locale, | ||
weekStartsOn: props.weekStartsOn, | ||
firstWeekContainsDate: props.firstWeekContainsDate | ||
locale: options.locale, | ||
weekStartsOn: options.weekStartsOn, | ||
firstWeekContainsDate: options.firstWeekContainsDate | ||
}); | ||
const week = weeks.find((week) => week.weekNumber === weekNumber); | ||
const day = new CalendarDay(date, month, props.dateLib); | ||
const day = new CalendarDay(date, month, dateLib); | ||
if (!week) { | ||
@@ -97,3 +97,3 @@ weeks.push(new CalendarWeek(weekNumber, [day])); | ||
if (!props.reverseMonths) { | ||
if (!options.reverseMonths) { | ||
return dayPickerMonths; | ||
@@ -100,0 +100,0 @@ } else { |
@@ -10,11 +10,11 @@ import { addMonths, isSameMonth } from "date-fns"; | ||
describe("when the navigation is disabled", () => { | ||
const disableNavigation = true; | ||
it("the next month is undefined", () => { | ||
const result = getNextMonth(startingMonth, { | ||
numberOfMonths: 1, | ||
disableNavigation, | ||
endMonth: undefined, | ||
dateLib, | ||
startMonth: undefined | ||
}); | ||
const result = getNextMonth( | ||
startingMonth, | ||
undefined, | ||
{ | ||
disableNavigation: true | ||
}, | ||
dateLib | ||
); | ||
expect(result).toBe(undefined); | ||
@@ -26,8 +26,3 @@ }); | ||
it("the next month is not undefined", () => { | ||
const result = getNextMonth(startingMonth, { | ||
numberOfMonths: 1, | ||
endMonth, | ||
startMonth: undefined, | ||
dateLib | ||
}); | ||
const result = getNextMonth(startingMonth, endMonth, {}, dateLib); | ||
const expectedNextMonth = addMonths(startingMonth, 1); | ||
@@ -40,8 +35,3 @@ expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy(); | ||
it("the next month is undefined", () => { | ||
const result = getNextMonth(startingMonth, { | ||
numberOfMonths: 1, | ||
endMonth, | ||
startMonth: undefined, | ||
dateLib | ||
}); | ||
const result = getNextMonth(startingMonth, endMonth, {}, dateLib); | ||
expect(result).toBe(undefined); | ||
@@ -56,9 +46,11 @@ }); | ||
it("the next month is 3 months ahead", () => { | ||
const result = getNextMonth(startingMonth, { | ||
numberOfMonths, | ||
pagedNavigation, | ||
startMonth: undefined, | ||
endMonth: undefined, | ||
const result = getNextMonth( | ||
startingMonth, | ||
undefined, | ||
{ | ||
numberOfMonths, | ||
pagedNavigation | ||
}, | ||
dateLib | ||
}); | ||
); | ||
const expectedNextMonth = addMonths(startingMonth, 3); | ||
@@ -69,9 +61,11 @@ expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy(); | ||
it("the next month is undefined", () => { | ||
const result = getNextMonth(startingMonth, { | ||
numberOfMonths, | ||
pagedNavigation, | ||
startMonth: undefined, | ||
endMonth: addMonths(startingMonth, 1), | ||
const result = getNextMonth( | ||
startingMonth, | ||
addMonths(startingMonth, 1), | ||
{ | ||
numberOfMonths, | ||
pagedNavigation | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(result).toBe(undefined); | ||
@@ -84,9 +78,11 @@ }); | ||
it("the next month is 1 months ahead", () => { | ||
const result = getNextMonth(startingMonth, { | ||
numberOfMonths, | ||
pagedNavigation, | ||
endMonth: undefined, | ||
startMonth: undefined, | ||
const result = getNextMonth( | ||
startingMonth, | ||
undefined, | ||
{ | ||
numberOfMonths, | ||
pagedNavigation | ||
}, | ||
dateLib | ||
}); | ||
); | ||
const expectedNextMonth = addMonths(startingMonth, 1); | ||
@@ -97,9 +93,11 @@ expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy(); | ||
it("the next month is undefined", () => { | ||
const result = getNextMonth(startingMonth, { | ||
numberOfMonths, | ||
pagedNavigation, | ||
startMonth: undefined, | ||
endMonth: addMonths(startingMonth, 2), | ||
const result = getNextMonth( | ||
startingMonth, | ||
addMonths(startingMonth, 2), | ||
{ | ||
numberOfMonths, | ||
pagedNavigation | ||
}, | ||
dateLib | ||
}); | ||
); | ||
expect(result).toBe(undefined); | ||
@@ -106,0 +104,0 @@ }); |
@@ -1,2 +0,2 @@ | ||
import { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
@@ -9,3 +9,3 @@ /** | ||
* | ||
* - If after the `endMonth` range, is `undefined`; | ||
* - If after the `calendarEndMonth` range, is `undefined`; | ||
* - If the navigation is paged , is the number of months displayed ahead. | ||
@@ -15,21 +15,18 @@ */ | ||
firstDisplayedMonth: Date, | ||
props: Pick< | ||
PropsContextValue, | ||
| "startMonth" | ||
| "endMonth" | ||
| "numberOfMonths" | ||
| "pagedNavigation" | ||
| "disableNavigation" | ||
| "dateLib" | ||
> | ||
calendarEndMonth: Date | undefined, | ||
options: Pick< | ||
DayPickerProps, | ||
"numberOfMonths" | "pagedNavigation" | "disableNavigation" | ||
>, | ||
dateLib: DateLib | ||
): Date | undefined { | ||
if (props.disableNavigation) { | ||
if (options.disableNavigation) { | ||
return undefined; | ||
} | ||
const { pagedNavigation, numberOfMonths } = props; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib; | ||
const { pagedNavigation, numberOfMonths = 1 } = options; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
if (!props.endMonth) { | ||
if (!calendarEndMonth) { | ||
return addMonths(month, offset); | ||
@@ -39,7 +36,7 @@ } | ||
const monthsDiff = differenceInCalendarMonths( | ||
props.endMonth, | ||
calendarEndMonth, | ||
firstDisplayedMonth | ||
); | ||
if (monthsDiff < numberOfMonths) { | ||
if (monthsDiff < numberOfMonths ?? 1) { | ||
return undefined; | ||
@@ -46,0 +43,0 @@ } |
@@ -14,21 +14,17 @@ import type { Locale } from "date-fns"; | ||
import { dateLib } from "../"; | ||
import type { PropsContextValue } from "../contexts/useProps"; | ||
import type { MoveFocusBy, MoveFocusDir } from "../types"; | ||
import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types"; | ||
import { getPossibleFocusDate } from "./getPossibleFocusDate"; | ||
import { dateLib } from ".."; | ||
import { getFocusableDate } from "./getFocusableDate"; | ||
const baseDate = new Date(2023, 0, 1); // Jan 1, 2023 | ||
const options: Pick< | ||
PropsContextValue, | ||
"locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth" | "dateLib" | ||
> = { | ||
const focusedDate = new Date(2023, 0, 1); // Jan 1, 2023 | ||
const options: Pick<DayPickerProps, "locale" | "ISOWeek" | "weekStartsOn"> = { | ||
locale: undefined, | ||
ISOWeek: false, | ||
weekStartsOn: 0, // Sunday | ||
startMonth: new Date(2022, 0, 1), // Jan 1, 2022 | ||
endMonth: new Date(2024, 0, 1), // Jan 1, 2024 | ||
dateLib | ||
weekStartsOn: 0 // Sunday | ||
}; | ||
const calendarStartMonth = new Date(2022, 0, 1); // Jan 1, 2022 | ||
const calendarEndMonth = new Date(2024, 0, 1); // Jan 1, 2024 | ||
const testCases: { | ||
@@ -51,4 +47,12 @@ moveBy: MoveFocusBy; | ||
test(`should move ${moveDir} by ${moveBy}`, () => { | ||
const expectedDate = expectedFn(baseDate, moveDir === "after" ? 1 : -1); | ||
const result = getPossibleFocusDate(moveBy, moveDir, baseDate, options); | ||
const expectedDate = expectedFn(focusedDate, moveDir === "after" ? 1 : -1); | ||
const result = getFocusableDate( | ||
moveBy, | ||
moveDir, | ||
focusedDate, | ||
calendarStartMonth, | ||
calendarEndMonth, | ||
options, | ||
dateLib | ||
); | ||
expect(result).toEqual(expectedDate); | ||
@@ -77,4 +81,12 @@ }); | ||
test(`should move ${moveDir} by ${moveBy}`, () => { | ||
const expectedDate = expectedFn(baseDate); | ||
const result = getPossibleFocusDate(moveBy, moveDir, baseDate, options); | ||
const expectedDate = expectedFn(focusedDate); | ||
const result = getFocusableDate( | ||
moveBy, | ||
moveDir, | ||
focusedDate, | ||
calendarStartMonth, | ||
calendarEndMonth, | ||
options, | ||
dateLib | ||
); | ||
@@ -96,7 +108,12 @@ expect(result).toEqual(expectedDate); | ||
test(`should move ${moveDir} by ${moveBy} when ISOWeek is true`, () => { | ||
const expectedDate = expectedFn(baseDate); | ||
const result = getPossibleFocusDate(moveBy, moveDir, baseDate, { | ||
...options, | ||
ISOWeek: true | ||
}); | ||
const expectedDate = expectedFn(focusedDate); | ||
const result = getFocusableDate( | ||
moveBy, | ||
moveDir, | ||
focusedDate, | ||
calendarStartMonth, | ||
calendarEndMonth, | ||
{ ...options, ISOWeek: true }, | ||
dateLib | ||
); | ||
expect(result).toEqual(expectedDate); | ||
@@ -107,19 +124,25 @@ }); | ||
test("should not move before startMonth", () => { | ||
const result = getPossibleFocusDate( | ||
const result = getFocusableDate( | ||
"day", | ||
"before", | ||
new Date(2022, 0, 2), | ||
options | ||
calendarStartMonth, | ||
calendarEndMonth, | ||
options, | ||
dateLib | ||
); | ||
expect(result).toEqual(options.startMonth); | ||
expect(result).toEqual(calendarStartMonth); | ||
}); | ||
test("should not move after endMonth", () => { | ||
const result = getPossibleFocusDate( | ||
const result = getFocusableDate( | ||
"day", | ||
"after", | ||
new Date(2023, 11, 31), | ||
options | ||
calendarStartMonth, | ||
calendarEndMonth, | ||
options, | ||
dateLib | ||
); | ||
expect(result).toEqual(options.endMonth); | ||
expect(result).toEqual(calendarEndMonth); | ||
}); |
@@ -1,3 +0,2 @@ | ||
import { dateLib } from "../"; | ||
import { dateLib } from ".."; | ||
import { getPreviousMonth } from "./getPreviousMonth"; | ||
@@ -7,11 +6,15 @@ | ||
const firstDisplayedMonth = new Date(2022, 0, 1); // January 2022 | ||
const calendarStartMonth = new Date(2022, 0, 1); // January 2022 | ||
const props = { | ||
disableNavigation: true, | ||
pagedNavigation: false, | ||
numberOfMonths: 1, | ||
startMonth: new Date(2022, 0, 1), | ||
dateLib | ||
numberOfMonths: 1 | ||
}; | ||
const result = getPreviousMonth(firstDisplayedMonth, props); | ||
const result = getPreviousMonth( | ||
firstDisplayedMonth, | ||
calendarStartMonth, | ||
props, | ||
dateLib | ||
); | ||
@@ -26,8 +29,11 @@ expect(result).toBeUndefined(); | ||
pagedNavigation: false, | ||
numberOfMonths: 1, | ||
startMonth: undefined, | ||
dateLib | ||
numberOfMonths: 1 | ||
}; | ||
const result = getPreviousMonth(firstDisplayedMonth, props); | ||
const result = getPreviousMonth( | ||
firstDisplayedMonth, | ||
undefined, | ||
props, | ||
dateLib | ||
); | ||
@@ -39,12 +45,14 @@ expect(result).toEqual(new Date(2022, 0, 1)); // January 2022 | ||
const firstDisplayedMonth = new Date(2022, 0, 1); // January 2022 | ||
const calendarStartMonth = new Date(2022, 0, 1); // January 2022 | ||
const props = { | ||
disableNavigation: false, | ||
pagedNavigation: false, | ||
numberOfMonths: 1, | ||
startMonth: new Date(2022, 0, 1), | ||
dateLib: dateLib | ||
numberOfMonths: 1 | ||
}; | ||
const result = getPreviousMonth(firstDisplayedMonth, props); | ||
const result = getPreviousMonth( | ||
firstDisplayedMonth, | ||
calendarStartMonth, | ||
props, | ||
dateLib | ||
); | ||
expect(result).toBeUndefined(); | ||
@@ -55,2 +63,3 @@ }); | ||
const firstDisplayedMonth = new Date(2022, 2, 1); // March 2022 | ||
const calendarStartMonth = new Date(2022, 0, 1); // January 2022 | ||
const props = { | ||
@@ -64,5 +73,10 @@ disableNavigation: false, | ||
const result = getPreviousMonth(firstDisplayedMonth, props); | ||
const result = getPreviousMonth( | ||
firstDisplayedMonth, | ||
calendarStartMonth, | ||
props, | ||
dateLib | ||
); | ||
expect(result).toEqual(new Date(2022, 0, 1)); // January 2022 | ||
}); |
@@ -1,2 +0,2 @@ | ||
import type { PropsContextValue } from "../contexts"; | ||
import type { DateLib, DayPickerProps } from "../types/index.js"; | ||
@@ -10,3 +10,3 @@ /** | ||
* | ||
* - If before the `startMonth` date, is `undefined`; | ||
* - If before the `calendarStartMonth` date, is `undefined`; | ||
* - If the navigation is paged, is the number of months displayed before. | ||
@@ -16,22 +16,20 @@ */ | ||
firstDisplayedMonth: Date, | ||
props: Pick< | ||
PropsContextValue, | ||
| "startMonth" | ||
| "numberOfMonths" | ||
| "pagedNavigation" | ||
| "disableNavigation" | ||
| "dateLib" | ||
> | ||
calendarStartMonth: Date | undefined, | ||
options: Pick< | ||
DayPickerProps, | ||
"numberOfMonths" | "pagedNavigation" | "disableNavigation" | ||
>, | ||
dateLib: DateLib | ||
): Date | undefined { | ||
if (props.disableNavigation) { | ||
if (options.disableNavigation) { | ||
return undefined; | ||
} | ||
const { pagedNavigation, numberOfMonths } = props; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib; | ||
const offset = pagedNavigation ? numberOfMonths : 1; | ||
const { pagedNavigation, numberOfMonths } = options; | ||
const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib; | ||
const offset = pagedNavigation ? numberOfMonths ?? 1 : 1; | ||
const month = startOfMonth(firstDisplayedMonth); | ||
if (!props.startMonth) { | ||
if (!calendarStartMonth) { | ||
return addMonths(month, -offset); | ||
} | ||
const monthsDiff = differenceInCalendarMonths(month, props.startMonth); | ||
const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth); | ||
@@ -38,0 +36,0 @@ if (monthsDiff <= 0) { |
import type { CSSProperties } from "react"; | ||
// Update the path as needed | ||
import { UI } from "../UI"; | ||
import type { Modifiers, ModifiersStyles, Styles } from "../types"; | ||
import type { Modifiers, ModifiersStyles } from "../types"; | ||
import { getStyleForModifiers } from "./getStyleForModifiers"; | ||
const baseDayStyle: CSSProperties = { | ||
backgroundColor: "white", | ||
color: "black" | ||
}; | ||
const styles: Partial<Styles> = { [UI.Day]: baseDayStyle }; | ||
const defaultModifiers: Modifiers = { | ||
@@ -26,11 +20,3 @@ disabled: false, | ||
}; | ||
test("returns base style when no modifiers are provided", () => { | ||
const dayModifiers = defaultModifiers; | ||
const modifiersStyles: Partial<ModifiersStyles> = {}; | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles); | ||
expect(style).toEqual(baseDayStyle); | ||
}); | ||
test("applies modifier styles to the base style", () => { | ||
@@ -46,7 +32,6 @@ const dayModifiers: Modifiers = { | ||
const expectedStyle: CSSProperties = { | ||
...baseDayStyle, | ||
...modifiersStyles.selected | ||
}; | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles); | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
@@ -66,5 +51,5 @@ expect(style).toEqual(expectedStyle); | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles); | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
expect(style).toEqual({ ...baseDayStyle, opacity: 0.5 }); // should not have applied the disabled style | ||
expect(style).toEqual({ opacity: 0.5 }); // should not have applied the disabled style | ||
}); | ||
@@ -83,3 +68,2 @@ | ||
const expectedStyle: CSSProperties = { | ||
...baseDayStyle, | ||
...modifiersStyles.selected, | ||
@@ -89,3 +73,3 @@ ...modifiersStyles.highlighted | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles); | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
@@ -106,3 +90,2 @@ expect(style).toEqual(expectedStyle); | ||
const expectedStyle: CSSProperties = { | ||
...baseDayStyle, | ||
backgroundColor: "yellow", // from 'highlighted' | ||
@@ -112,5 +95,5 @@ color: "green" // from 'highlighted', overriding 'selected' | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles); | ||
const style = getStyleForModifiers(dayModifiers, modifiersStyles); | ||
expect(style).toEqual(expectedStyle); | ||
}); |
import type { CSSProperties } from "react"; | ||
import { UI } from "../UI"; | ||
import type { Modifiers, ModifiersStyles, Styles } from "../types"; | ||
import type { Modifiers, ModifiersStyles } from "../types/index.js"; | ||
export function getStyleForModifiers( | ||
dayModifiers: Modifiers, | ||
modifiersStyles: Partial<ModifiersStyles>, | ||
styles: Partial<Styles> | ||
modifiersStyles: Partial<ModifiersStyles> = {} | ||
): CSSProperties { | ||
let style: CSSProperties = { ...styles[UI.Day] }; | ||
let style: CSSProperties = {}; | ||
Object.entries(dayModifiers) | ||
@@ -13,0 +11,0 @@ .filter(([, active]) => active === true) |
@@ -1,4 +0,4 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { Locale } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
@@ -5,0 +5,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
import type { CalendarMonth, CalendarWeek } from "../classes"; | ||
import type { CalendarMonth, CalendarWeek } from "../classes/index.js"; | ||
@@ -3,0 +3,0 @@ /** Returns an array of calendar weeks from an array of calendar months. */ |
// Only export helpers that can be useful to other developers. | ||
export * from "./getDefaultClassNames"; | ||
export * from "./getDefaultClassNames.js"; |
@@ -1,16 +0,15 @@ | ||
export * from "./DayPicker"; | ||
export * from "./types"; | ||
export * from "./DayPicker.js"; | ||
export * from "./types/index.js"; | ||
export * from "./classes"; | ||
export * from "./components/custom-components"; | ||
export * from "./classes/index.js"; | ||
export * from "./components/custom-components.js"; | ||
export * from "./contexts"; | ||
export * from "./selection"; | ||
export * from "./lib/index.js"; | ||
export * from "./lib"; | ||
export * from "./formatters/index.js"; | ||
export * from "./helpers/index.js"; | ||
export * from "./labels/index.js"; | ||
export * from "./utils/index.js"; | ||
export * from "./UI.js"; | ||
export * from "./formatters"; | ||
export * from "./helpers"; | ||
export * from "./labels"; | ||
export * from "./utils"; | ||
export * from "./UI"; | ||
export * from "./useDayPicker.js"; |
@@ -1,9 +0,12 @@ | ||
export * from "./labelDay"; | ||
export * from "./labelCaption"; | ||
export * from "./labelMonthDropdown"; | ||
export * from "./labelNext"; | ||
export * from "./labelPrevious"; | ||
export * from "./labelWeekday"; | ||
export * from "./labelWeekNumber"; | ||
export * from "./labelWeekNumberHeader"; | ||
export * from "./labelYearDropdown"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelGridcell.js"; | ||
export * from "./labelDayButton.js"; | ||
export * from "./labelNav.js"; | ||
export * from "./labelGrid.js"; | ||
export * from "./labelMonthDropdown.js"; | ||
export * from "./labelNext.js"; | ||
export * from "./labelPrevious.js"; | ||
export * from "./labelWeekday.js"; | ||
export * from "./labelWeekNumber.js"; | ||
export * from "./labelWeekNumberHeader.js"; | ||
export * from "./labelYearDropdown.js"; |
@@ -1,8 +0,8 @@ | ||
import type { FormatOptions } from "date-fns"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import { DateLib } from "../types/index.js"; | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { DateLib } from "../types"; | ||
/** | ||
* Return the default ARIA label for the month grid. | ||
* Return an ARIA label for the month grid, that will be announced when entering | ||
* the grid. | ||
* | ||
@@ -12,7 +12,13 @@ * @group Labels | ||
export function labelGrid( | ||
month: Date, | ||
options?: FormatOptions, | ||
date: Date, | ||
options?: LabelOptions, | ||
dateLib: DateLib = defaultDateLib | ||
) { | ||
return dateLib.format(month, "LLLL y", options); | ||
return dateLib.format(date, "LLLL y", options); | ||
} | ||
/** | ||
* @deprecated Use {@link labelGrid} instead. | ||
* @protected | ||
*/ | ||
export const labelCaption = labelGrid; |
@@ -1,5 +0,5 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
/** | ||
* Return the default ARIA label for the WeekNumber element. | ||
* Return the default ARIA label for the months dropdown element. | ||
* | ||
@@ -9,4 +9,4 @@ * @group Labels | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
export function labelMonthDropdown(options?: FormatOptions) { | ||
export function labelMonthDropdown(options?: LabelOptions) { | ||
return "Month: "; | ||
} |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
@@ -13,5 +13,5 @@ /** | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
options?: FormatOptions | ||
options?: LabelOptions | ||
) { | ||
return "Next Month"; | ||
} |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
@@ -13,5 +13,5 @@ /** | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
options?: FormatOptions | ||
options?: LabelOptions | ||
) { | ||
return "Previous Month"; | ||
} |
@@ -1,4 +0,4 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { DateLib } from "../types"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateLib } from "../types/index.js"; | ||
@@ -12,3 +12,3 @@ /** | ||
date: Date, | ||
options?: FormatOptions, | ||
options?: LabelOptions, | ||
dateLib: DateLib = defaultDateLib | ||
@@ -15,0 +15,0 @@ ): string { |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
@@ -11,5 +11,5 @@ /** | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
options?: FormatOptions | ||
options?: LabelOptions | ||
): string { | ||
return `Week ${weekNumber}`; | ||
} |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
@@ -10,5 +10,5 @@ /** | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
options?: FormatOptions | ||
options?: LabelOptions | ||
): string { | ||
return "Week Number"; | ||
} |
@@ -1,2 +0,2 @@ | ||
import type { FormatOptions } from "../lib/dateLib"; | ||
import type { LabelOptions } from "../lib/dateLib.js"; | ||
@@ -9,4 +9,4 @@ /** | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
export function labelYearDropdown(options?: FormatOptions) { | ||
export function labelYearDropdown(options?: LabelOptions) { | ||
return "Year: "; | ||
} |
import { GenericDateConstructor } from "date-fns"; | ||
import type { | ||
FormatOptions as DateFnsFormatOptions, | ||
Locale as DateFnsLocale | ||
} from "date-fns"; | ||
import { addDays } from "date-fns/addDays"; | ||
@@ -14,3 +18,2 @@ import { addMonths } from "date-fns/addMonths"; | ||
import { getISOWeek } from "date-fns/getISOWeek"; | ||
import { getUnixTime } from "date-fns/getUnixTime"; | ||
import { getWeek } from "date-fns/getWeek"; | ||
@@ -33,10 +36,19 @@ import { isAfter } from "date-fns/isAfter"; | ||
/** @private */ | ||
export type { Locale } from "date-fns"; | ||
/** @private */ | ||
export type { FormatOptions } from "date-fns"; | ||
/** @private */ | ||
/** The options for the {@link Formatters}. */ | ||
export type FormatOptions = DateFnsFormatOptions; | ||
/** The options for the {@link Labels}. */ | ||
export type LabelOptions = DateFnsFormatOptions; | ||
/** The locale used within DayPicker. */ | ||
export type Locale = DateFnsLocale; | ||
export type { Month as DateFnsMonth } from "date-fns"; | ||
/** The default date library to use with the date picker. */ | ||
/** | ||
* The default date library to use with the date picker. | ||
* | ||
* @private | ||
* @internal | ||
*/ | ||
export const dateLib = { | ||
@@ -57,3 +69,2 @@ /** The constructor of the date object. */ | ||
getISOWeek, | ||
getUnixTime, | ||
getWeek, | ||
@@ -60,0 +71,0 @@ isAfter, |
@@ -1,1 +0,1 @@ | ||
export * from "./dateLib"; | ||
export * from "./dateLib.js"; |
declare const styles: { | ||
readonly "rdp-button_next": string; | ||
readonly "rdp-button_previous": string; | ||
readonly "rdp-calendar": string; | ||
readonly "rdp-root": string; | ||
readonly "rdp-caption_label": string; | ||
readonly "rdp-chevron": string; | ||
readonly "rdp-chevron_disabled": string; | ||
readonly "rdp-day": string; | ||
readonly "rdp-day_date": string; | ||
readonly "rdp-day_button": string; | ||
readonly "rdp-disabled": string; | ||
@@ -20,3 +19,3 @@ readonly "rdp-dropdown": string; | ||
readonly "rdp-month_caption": string; | ||
readonly "rdp-month_wrapper": string; | ||
readonly "rdp-month_grid": string; | ||
readonly "rdp-months": string; | ||
@@ -41,2 +40,1 @@ readonly "rdp-months_dropdown": string; | ||
export = styles; | ||
/* eslint-disable @typescript-eslint/no-explicit-any */ | ||
import { Calendar } from "../components/Calendar"; | ||
import { | ||
MonthCaption, | ||
type MonthCaptionProps | ||
} from "../components/MonthCaption"; | ||
import { Week, type WeekProps } from "../components/Week"; | ||
import { useCalendar } from "../contexts"; | ||
import { useProps, type PropsContextValue } from "../contexts"; | ||
import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels"; | ||
} from "../components/MonthCaption.js"; | ||
import { Week, type WeekProps } from "../components/Week.js"; | ||
import { | ||
labelDayButton, | ||
labelNext, | ||
labelWeekday, | ||
labelWeekNumber | ||
} from "../labels/index.js"; | ||
import { useDayPicker } from "../useDayPicker.js"; | ||
import type { PropsMulti, PropsRange, PropsSingle } from "./props"; | ||
import type { Mode, DayEventHandler } from "./shared"; | ||
import type { PropsMulti, PropsRange, PropsSingle } from "./props.js"; | ||
import type { Mode, DayEventHandler } from "./shared.js"; | ||
@@ -28,14 +31,6 @@ /** | ||
/** | ||
* @deprecated This type has been renamed. Use `Calendar` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
*/ | ||
export const Root = Calendar; | ||
/** | ||
* @deprecated This component has been renamed. Use `MonthCaption` instead. | ||
* @protected | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -54,3 +49,3 @@ export const Caption = MonthCaption; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -63,3 +58,3 @@ export type HeadRow = any; | ||
* @group Components | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -136,20 +131,13 @@ export const Row = Week; | ||
/** | ||
* @deprecated This type has been renamed to `useProps`. | ||
* @deprecated This type has been removed to `useDayPicker`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export const useDayPicker = useProps; | ||
export const useNavigation = useDayPicker; | ||
/** | ||
* @deprecated This type has been renamed to `useCalendar`. | ||
* @protected | ||
* @group Hooks | ||
*/ | ||
export const useNavigation = useCalendar; | ||
/** | ||
* @deprecated This hook has been removed. Use a custom `Day` component instead. | ||
* @protected | ||
* @group Hooks | ||
* @see https://daypicker.dev/advanced-guides/custom-components | ||
* @see https://daypicker.dev/next/advanced-guides/custom-components | ||
*/ | ||
@@ -165,6 +153,6 @@ export type useDayRender = any; | ||
/** | ||
* @deprecated Use `typeof labelDay` instead. | ||
* @deprecated Use `typeof labelDayButton` instead. | ||
* @protected | ||
*/ | ||
export type DayLabel = typeof labelDay; | ||
export type DayLabel = typeof labelDayButton; | ||
@@ -231,7 +219,1 @@ /** | ||
export type DayTouchEventHandler = DayEventHandler<React.TouchEvent>; | ||
/** | ||
* @deprecated The type has been renamed. Use `PropsContext` instead. | ||
* @protected | ||
*/ | ||
export type DayPickerContext = PropsContextValue; |
@@ -1,3 +0,3 @@ | ||
export * from "./deprecated"; | ||
export * from "./shared"; | ||
export * from "./props"; | ||
export * from "./deprecated.js"; | ||
export * from "./shared.js"; | ||
export * from "./props.js"; |
import React from "react"; | ||
import type { Locale } from "../lib/dateLib"; | ||
import type { Locale } from "../lib/dateLib.js"; | ||
@@ -16,3 +16,2 @@ import type { | ||
DayEventHandler, | ||
WeekNumberMouseEventHandler, | ||
Modifiers, | ||
@@ -22,3 +21,3 @@ DateRange, | ||
DateLib | ||
} from "./shared"; | ||
} from "./shared.js"; | ||
@@ -209,5 +208,12 @@ /** | ||
components?: CustomComponents; | ||
/** Content to add to the grid as footer element. */ | ||
footer?: React.ReactNode; | ||
/** | ||
* Add a footer to the calendar, acting as live region. | ||
* | ||
* Use this prop to communicate the calendar's status to screen readers. | ||
* Prefer strings over complex UI elements. | ||
* | ||
* @see https://daypicker.dev/next/using-daypicker/accessibility | ||
*/ | ||
footer?: React.ReactNode | string; | ||
/** | ||
* When a selection mode is set, DayPicker will focus the first selected day | ||
@@ -292,5 +298,17 @@ * (if set) or the today's date (if not disabled). | ||
/* EVENT HANDLERS */ | ||
/** Event fired when the user navigates between months. */ | ||
onMonthChange?: MonthChangeEventHandler; | ||
/** Event handler when the next month button is clicked. */ | ||
onNextClick?: MonthChangeEventHandler; | ||
/** Event handler when the previous month button is clicked. */ | ||
onPrevClick?: MonthChangeEventHandler; | ||
/** | ||
* Event handler when a week number is clicked | ||
* | ||
* @deprecated Use a custom `WeekNumber` component instead. | ||
*/ | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
onWeekNumberClick?: any; | ||
/** Event handler when a day is clicked. */ | ||
@@ -302,39 +320,54 @@ onDayClick?: DayEventHandler<React.MouseEvent>; | ||
onDayBlur?: DayEventHandler<React.FocusEvent>; | ||
/** Event handler when the mouse enters a day. */ | ||
onDayMouseEnter?: DayEventHandler<React.MouseEvent>; | ||
/** Event handler when the mouse leaves a day. */ | ||
onDayMouseLeave?: DayEventHandler<React.MouseEvent>; | ||
/** Event handler when a key is pressed on a day. */ | ||
onDayKeyDown?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a key is released on a day. */ | ||
/** | ||
* Replace the default date library with a custom one. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @experimental | ||
*/ | ||
dateLib?: Partial<DateLib> | undefined; | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayKeyUp?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a key is pressed and released on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayKeyPress?: DayEventHandler<React.KeyboardEvent>; | ||
/** Event handler when a pointer enters a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayPointerEnter?: DayEventHandler<React.PointerEvent>; | ||
/** Event handler when a pointer leaves a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayPointerLeave?: DayEventHandler<React.PointerEvent>; | ||
/** Event handler when a touch is cancelled on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchCancel?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch ends on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchEnd?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch moves on a day. */ | ||
/** | ||
* @private | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
onDayTouchMove?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when a touch starts on a day. */ | ||
onDayTouchStart?: DayEventHandler<React.TouchEvent>; | ||
/** Event handler when the next month button is clicked. */ | ||
onNextClick?: MonthChangeEventHandler; | ||
/** Event handler when the previous month button is clicked. */ | ||
onPrevClick?: MonthChangeEventHandler; | ||
/** Event handler when a week number is clicked */ | ||
onWeekNumberClick?: WeekNumberMouseEventHandler; | ||
/** | ||
* Replace the default date library with a custom one. | ||
* | ||
* @private | ||
* @since 9.0.0 | ||
* @experimental | ||
* @deprecated Use a custom `DayButton` component instead. | ||
*/ | ||
dateLib?: Partial<DateLib> | undefined; | ||
onDayTouchStart?: DayEventHandler<React.TouchEvent>; | ||
} | ||
@@ -436,2 +469,3 @@ /** | ||
selected?: DateRange | undefined; | ||
disabled?: Matcher | Matcher[] | undefined; | ||
onSelect?: ( | ||
@@ -438,0 +472,0 @@ selected: DateRange | undefined, |
/* eslint-disable @typescript-eslint/ban-types */ | ||
import type { MouseEvent, CSSProperties } from "react"; | ||
import type { CSSProperties } from "react"; | ||
import { UI, DayFlag, SelectionState } from "../UI.js"; | ||
import * as components from "../components/custom-components.js"; | ||
import { | ||
UI, | ||
DayFlag, | ||
CalendarFlag, | ||
ChevronFlag, | ||
WeekNumberFlag, | ||
SelectionState | ||
} from "../UI"; | ||
import * as components from "../components/custom-components"; | ||
import { | ||
formatCaption, | ||
@@ -22,6 +15,8 @@ formatDay, | ||
formatYearDropdown | ||
} from "../formatters"; | ||
} from "../formatters/index.js"; | ||
import { | ||
labelDay, | ||
labelCaption, | ||
labelDayButton, | ||
labelNav, | ||
labelGrid, | ||
labelGridcell, | ||
labelMonthDropdown, | ||
@@ -34,4 +29,4 @@ labelNext, | ||
labelYearDropdown | ||
} from "../labels"; | ||
import { dateLib } from "../lib"; | ||
} from "../labels/index.js"; | ||
import { dateLib } from "../lib/index.js"; | ||
@@ -76,3 +71,3 @@ /** | ||
formatWeekNumber: typeof formatWeekNumber; | ||
/** Format the week day name in the header */ | ||
/** Format the week day name in the header. */ | ||
formatWeekdayName: typeof formatWeekdayName; | ||
@@ -83,17 +78,23 @@ }; | ||
export type Labels = { | ||
/** Return the label for the month dropdown. */ | ||
labelCaption: typeof labelCaption; | ||
/** Return the label for the month dropdown. */ | ||
/** The label for the navigation toolbar. */ | ||
labelNav: typeof labelNav; | ||
/** The label for the month grid. */ | ||
labelGrid: typeof labelGrid; | ||
/** The label for the gridcell, when the calendar is not interactive. */ | ||
labelGridcell: typeof labelGridcell; | ||
/** The label for the month dropdown. */ | ||
labelMonthDropdown: typeof labelMonthDropdown; | ||
/** Return the label for the year dropdown. */ | ||
/** The label for the year dropdown. */ | ||
labelYearDropdown: typeof labelYearDropdown; | ||
/** Return the label for the next month button. */ | ||
/** The label for the "next month" button. */ | ||
labelNext: typeof labelNext; | ||
/** Return the label for the previous month button. */ | ||
/** The label for the "previous month" button. */ | ||
labelPrevious: typeof labelPrevious; | ||
/** Return the label for the day cell. */ | ||
labelDay: typeof labelDay; | ||
/** Return the label for the weekday. */ | ||
/** The label for the day button.. */ | ||
labelDayButton: typeof labelDayButton; | ||
/** @deprecated Use {@link labelDayButton} instead. */ | ||
labelDay: typeof labelDayButton; | ||
/** The label for the weekday. */ | ||
labelWeekday: typeof labelWeekday; | ||
/** Return the label for the week number. */ | ||
/** The label for the week number. */ | ||
labelWeekNumber: typeof labelWeekNumber; | ||
@@ -215,21 +216,5 @@ /** | ||
/** The event handler when the week number is clicked. */ | ||
export type WeekNumberMouseEventHandler = ( | ||
/** The week number that has been clicked. */ | ||
weekNumber: number, | ||
/** The dates in the clicked week. */ | ||
dates: Date[], | ||
/** The mouse event that triggered this event. */ | ||
e: MouseEvent | ||
) => void; | ||
/** Maps user interface elements, selection states, and flags to a CSS style. */ | ||
export type Styles = { | ||
[key in | ||
| UI | ||
| SelectionState | ||
| DayFlag | ||
| CalendarFlag | ||
| ChevronFlag | ||
| WeekNumberFlag]: CSSProperties | undefined; | ||
[key in UI | SelectionState | DayFlag]: CSSProperties | undefined; | ||
}; | ||
@@ -239,9 +224,3 @@ | ||
export type ClassNames = { | ||
[key in | ||
| UI | ||
| SelectionState | ||
| DayFlag | ||
| CalendarFlag | ||
| ChevronFlag | ||
| WeekNumberFlag]: string; | ||
[key in UI | SelectionState | DayFlag]: string; | ||
}; | ||
@@ -248,0 +227,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { CustomComponents, ClassNames, Styles } from "./types"; | ||
import type { CustomComponents, ClassNames, Styles } from "./types/index.js"; | ||
@@ -13,9 +13,6 @@ /** | ||
ButtonPrevious = "button_previous", | ||
/** The next button the navigation */ | ||
/** The next button the navigation. */ | ||
ButtonNext = "button_next", | ||
/** | ||
* The calendar element: the root component displaying the months and the | ||
* navigation bar. Extended by {@link CalendarFlag}. | ||
*/ | ||
Calendar = "calendar", | ||
/** The root component displaying the months and the navigation bar. */ | ||
Root = "root", | ||
/** The Chevron SVG element used by navigation buttons and dropdowns. */ | ||
@@ -28,4 +25,4 @@ Chevron = "chevron", | ||
Day = "day", | ||
/** The element containing the formatted day's date, inside the grid cell. */ | ||
DayDate = "day_date", | ||
/** The button containing the formatted day's date, inside the grid cell. */ | ||
DayButton = "day_button", | ||
/** The caption label of the month (when not showing the dropdown navigation). */ | ||
@@ -42,3 +39,3 @@ CaptionLabel = "caption_label", | ||
/** The month grid. */ | ||
Month = "month", | ||
MonthGrid = "month_grid", | ||
/** Contains the dropdown navigation or the caption label. */ | ||
@@ -48,7 +45,7 @@ MonthCaption = "month_caption", | ||
MonthsDropdown = "months_dropdown", | ||
/** Wrapper of the {@link} grid. */ | ||
MonthWrapper = "month_wrapper", | ||
/** Wrapper of the month grid. */ | ||
Month = "month", | ||
/** The container of the displayed months. */ | ||
Months = "months", | ||
/** The navigation bar with the previous and next buttons */ | ||
/** The navigation bar with the previous and next buttons. */ | ||
Nav = "nav", | ||
@@ -63,7 +60,6 @@ /** The row containing the week. */ | ||
Weekdays = "weekdays", | ||
/** | ||
* The row header containing the week number. Extended by | ||
* {@link WeekNumberFlag}. | ||
*/ | ||
/** The row header containing the week number. */ | ||
WeekNumber = "week_number", | ||
/** The row header containing the week number. */ | ||
WeekNumberHeader = "week_number_header", | ||
/** The dropdown with the years. */ | ||
@@ -75,10 +71,8 @@ YearsDropdown = "years_dropdown" | ||
export enum DayFlag { | ||
/** The day is disabled */ | ||
/** The day is disabled. */ | ||
disabled = "disabled", | ||
/** The day is hidden */ | ||
/** The day is hidden. */ | ||
hidden = "hidden", | ||
/** The day is outside the current month */ | ||
/** The day is outside the current month. */ | ||
outside = "outside", | ||
/** The day is focusable. */ | ||
focusable = "focusable", | ||
/** The day is focused. */ | ||
@@ -104,26 +98,1 @@ focused = "focused", | ||
} | ||
/** Flags that can be applied to the {@link UI.Calendar} element. */ | ||
export enum CalendarFlag { | ||
/** Assigned when the week numbers are show. */ | ||
has_week_numbers = "has_week_numbers", | ||
/** Assigned when the weekdays are hidden. */ | ||
no_weekdays = "no_weekdays", | ||
/** Assigned when the calendar has multiple months. */ | ||
has_multiple_months = "has_multiple_months" | ||
} | ||
/** Flags that can be applied to the {@link UI.Chevron} element. */ | ||
export enum ChevronFlag { | ||
/** Assigned when the week numbers are show. */ | ||
disabled = "chevron_disabled" | ||
} | ||
/** Flags that can be applied to the {@link UI.WeekNumber} element. */ | ||
export enum WeekNumberFlag { | ||
/** | ||
* Assigned when the week number is interactive, i.e. has an | ||
* `onWeekNumberClick` event attached to it. | ||
*/ | ||
week_number_interactive = "week_number_interactive" | ||
} |
@@ -1,3 +0,3 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { DateRange, DateLib } from "../types"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateRange, DateLib } from "../types/index.js"; | ||
@@ -4,0 +4,0 @@ /** |
@@ -1,5 +0,4 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { DateLib, Matcher } from "../types"; | ||
import type { DateLib, Matcher } from "../types/index.js"; | ||
import { isDateInRange } from "./isDateInRange"; | ||
import { isDateInRange } from "./isDateInRange.js"; | ||
import { | ||
@@ -11,16 +10,15 @@ isDateAfterType, | ||
isDayOfWeekType | ||
} from "./typeguards"; | ||
} from "./typeguards.js"; | ||
/** Returns true if `value` is a Date type. */ | ||
function isDateType(value: unknown): value is Date { | ||
return defaultDateLib.isDate(value); | ||
} | ||
/** Returns true if `value` is an array of valid dates. */ | ||
function isArrayOfDates(value: unknown): value is Date[] { | ||
return Array.isArray(value) && value.every(defaultDateLib.isDate); | ||
export function isDatesArray( | ||
value: unknown, | ||
dateLib: DateLib | ||
): value is Date[] { | ||
return Array.isArray(value) && value.every(dateLib.isDate); | ||
} | ||
/** | ||
* Returns whether a day matches against at least one of the given Matchers. | ||
* Returns whether a day matches against at least one of the given | ||
* {@link Matcher}`. | ||
* | ||
@@ -45,6 +43,6 @@ * ```tsx | ||
matchers: Matcher | Matcher[], | ||
dateUtils: DateLib = defaultDateLib | ||
dateLib: DateLib | ||
): boolean { | ||
const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers; | ||
const { isSameDay, differenceInCalendarDays, isAfter } = dateUtils; | ||
const { isSameDay, differenceInCalendarDays, isAfter } = dateLib; | ||
return matchersArr.some((matcher: Matcher) => { | ||
@@ -54,10 +52,10 @@ if (typeof matcher === "boolean") { | ||
} | ||
if (isDateType(matcher)) { | ||
if (dateLib.isDate(matcher)) { | ||
return isSameDay(date, matcher); | ||
} | ||
if (isArrayOfDates(matcher)) { | ||
if (isDatesArray(matcher, dateLib)) { | ||
return matcher.includes(date); | ||
} | ||
if (isDateRange(matcher)) { | ||
return isDateInRange(date, matcher, dateUtils); | ||
return isDateInRange(date, matcher, dateLib); | ||
} | ||
@@ -64,0 +62,0 @@ if (isDayOfWeekType(matcher)) { |
@@ -1,4 +0,4 @@ | ||
export * from "./addToRange"; | ||
export * from "./dateMatchModifiers"; | ||
export * from "./isDateInRange"; | ||
export * from "./typeguards"; | ||
export * from "./addToRange.js"; | ||
export * from "./dateMatchModifiers.js"; | ||
export * from "./isDateInRange.js"; | ||
export * from "./typeguards.js"; |
@@ -1,3 +0,3 @@ | ||
import { dateLib as defaultDateLib } from "../lib"; | ||
import type { DateRange, DateLib } from "../types"; | ||
import { dateLib as defaultDateLib } from "../lib/index.js"; | ||
import type { DateRange, DateLib } from "../types/index.js"; | ||
@@ -4,0 +4,0 @@ /** |
@@ -11,3 +11,3 @@ import type { | ||
PropsSingle | ||
} from "../types"; | ||
} from "../types/index.js"; | ||
@@ -56,11 +56,2 @@ /** | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isDayOfWeekType(value: unknown): value is DayOfWeek { | ||
return Boolean(value && typeof value === "object" && "dayOfWeek" in value); | ||
} | ||
/** | ||
* Returns true if the props are for a single selection mode. | ||
@@ -111,2 +102,11 @@ * | ||
/** | ||
* Returns true if `value` is a `DayOfWeek` type. | ||
* | ||
* @group Utilities | ||
*/ | ||
export function isDayOfWeekType(value: unknown): value is DayOfWeek { | ||
return Boolean(value && typeof value === "object" && "dayOfWeek" in value); | ||
} | ||
/** | ||
* @deprecated This function has been renamed Use `isRange` instead. | ||
@@ -113,0 +113,0 @@ * @protected |
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
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
865
Yes
969361
38
18672