@octanejs/day-picker 0.0.1

package/src/helpers/getDataAttributes.ts

@@ -0,0 +1,17 @@
+import type { DayPickerProps } from '../types/index.js';
+
+/** Extract the public `data-` attributes and DayPicker configuration flags. */
+export function getDataAttributes(props: DayPickerProps): Record<string, unknown> {
+	const dataAttributes: Record<string, unknown> = {
+		'data-mode': props.mode ?? undefined,
+		'data-required': 'required' in props ? props.required : undefined,
+		'data-multiple-months': (props.numberOfMonths && props.numberOfMonths > 1) || undefined,
+		'data-week-numbers': props.showWeekNumber || undefined,
+		'data-broadcast-calendar': props.broadcastCalendar || undefined,
+		'data-nav-layout': props.navLayout || undefined,
+	};
+	Object.entries(props).forEach(([key, value]) => {
+		if (key.startsWith('data-')) dataAttributes[key] = value;
+	});
+	return dataAttributes;
+}

package/src/helpers/getDates.ts

@@ -0,0 +1,87 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DayPickerProps } from '../types/props.js';
+
+/**
+ * Returns all the dates to display in the calendar.
+ *
+ * This function calculates the range of dates to display based on the provided
+ * display months, constraints, and calendar configuration.
+ *
+ * @param displayMonths The months to display in the calendar.
+ * @param maxDate The maximum date to include in the range.
+ * @param props The DayPicker props, including calendar configuration options.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns An array of dates to display in the calendar.
+ */
+export function getDates(
+	displayMonths: Date[],
+	maxDate: Date | undefined,
+	props: Pick<DayPickerProps, 'ISOWeek' | 'fixedWeeks' | 'broadcastCalendar'>,
+	dateLib: DateLib,
+): Date[] {
+	const firstMonth = displayMonths[0];
+	const lastMonth = displayMonths[displayMonths.length - 1];
+
+	const { ISOWeek, fixedWeeks, broadcastCalendar } = props ?? {};
+	const {
+		addDays,
+		differenceInCalendarDays,
+		differenceInCalendarMonths,
+		endOfBroadcastWeek,
+		endOfISOWeek,
+		endOfMonth,
+		endOfWeek,
+		isAfter,
+		startOfBroadcastWeek,
+		startOfISOWeek,
+		startOfWeek,
+	} = dateLib;
+
+	const startWeekFirstDate = broadcastCalendar
+		? startOfBroadcastWeek(firstMonth, dateLib)
+		: ISOWeek
+			? startOfISOWeek(firstMonth)
+			: startOfWeek(firstMonth);
+
+	const displayMonthsWeekEnd = broadcastCalendar
+		? endOfBroadcastWeek(lastMonth)
+		: ISOWeek
+			? endOfISOWeek(endOfMonth(lastMonth))
+			: endOfWeek(endOfMonth(lastMonth));
+
+	// If maxDate is set, clamp the grid to the end of that week.
+	const constraintWeekEnd =
+		maxDate &&
+		(broadcastCalendar
+			? endOfBroadcastWeek(maxDate)
+			: ISOWeek
+				? endOfISOWeek(maxDate)
+				: endOfWeek(maxDate));
+
+	// Pick the earliest week end between the displayed months and the constraint.
+	const gridEndDate =
+		constraintWeekEnd && isAfter(displayMonthsWeekEnd, constraintWeekEnd)
+			? constraintWeekEnd
+			: displayMonthsWeekEnd;
+
+	const nOfDays = differenceInCalendarDays(gridEndDate, startWeekFirstDate);
+	const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
+
+	const dates: Date[] = [];
+	for (let i = 0; i <= nOfDays; i++) {
+		const date = addDays(startWeekFirstDate, i);
+		dates.push(date);
+	}
+
+	// If fixed weeks is enabled, add the extra dates to the array
+	const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+	const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
+	if (fixedWeeks && dates.length < extraDates) {
+		const daysToAdd = extraDates - dates.length;
+		for (let i = 0; i < daysToAdd; i++) {
+			const date = addDays(dates[dates.length - 1], 1);
+			dates.push(date);
+		}
+	}
+	return dates;
+}

package/src/helpers/getDays.ts

@@ -0,0 +1,19 @@
+import type { CalendarDay, CalendarMonth } from '../classes/index.js';
+
+/**
+ * Returns all the days belonging to the calendar by merging the days in the
+ * weeks for each month.
+ *
+ * @param calendarMonths The array of calendar months.
+ * @returns An array of `CalendarDay` objects representing all the days in the
+ *   calendar.
+ */
+export function getDays(calendarMonths: CalendarMonth[]) {
+	const initialDays: CalendarDay[] = [];
+	return calendarMonths.reduce((days, month) => {
+		const weekDays: CalendarDay[] = month.weeks.reduce((weekDays, week) => {
+			return weekDays.concat(week.days.slice());
+		}, initialDays.slice());
+		return days.concat(weekDays.slice());
+	}, initialDays.slice());
+}

package/src/helpers/getDefaultClassNames.ts

@@ -0,0 +1,36 @@
+import type { ClassNames } from '../types/index.js';
+import { Animation, DayFlag, SelectionState, UI } from '../UI.js';
+
+/**
+ * Returns the default class names for the UI elements.
+ *
+ * This function generates a mapping of default class names for various UI
+ * elements, day flags, selection states, and animations.
+ *
+ * @returns An object containing the default class names.
+ * @group Utilities
+ */
+export function getDefaultClassNames(): ClassNames {
+	const classNames: Partial<Required<ClassNames>> = {};
+
+	for (const key in UI) {
+		classNames[UI[key as keyof typeof UI]] = `rdp-${UI[key as keyof typeof UI]}`;
+	}
+
+	for (const key in DayFlag) {
+		classNames[DayFlag[key as keyof typeof DayFlag]] =
+			`rdp-${DayFlag[key as keyof typeof DayFlag]}`;
+	}
+
+	for (const key in SelectionState) {
+		classNames[SelectionState[key as keyof typeof SelectionState]] =
+			`rdp-${SelectionState[key as keyof typeof SelectionState]}`;
+	}
+
+	for (const key in Animation) {
+		classNames[Animation[key as keyof typeof Animation]] =
+			`rdp-${Animation[key as keyof typeof Animation]}`;
+	}
+
+	return classNames as Required<ClassNames>;
+}

package/src/helpers/getDisplayMonths.ts

@@ -0,0 +1,30 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DayPickerProps } from '../types/index.js';
+
+/**
+ * Returns the months to display in the calendar.
+ *
+ * @param firstDisplayedMonth The first month currently displayed in the
+ *   calendar.
+ * @param calendarEndMonth The latest month the user can navigate to.
+ * @param props The DayPicker props, including `numberOfMonths`.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns An array of dates representing the months to display.
+ */
+export function getDisplayMonths(
+	firstDisplayedMonth: Date,
+	calendarEndMonth: Date | undefined,
+	props: Pick<DayPickerProps, 'numberOfMonths'>,
+	dateLib: DateLib,
+): Date[] {
+	const { numberOfMonths = 1 } = props;
+	const months: Date[] = [];
+	for (let i = 0; i < numberOfMonths; i++) {
+		const month = dateLib.addMonths(firstDisplayedMonth, i);
+		if (calendarEndMonth && month > calendarEndMonth) {
+			break;
+		}
+		months.push(month);
+	}
+	return months;
+}

package/src/helpers/getFocusableDate.ts

@@ -0,0 +1,66 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from '../types/index.js';
+
+/**
+ * Calculates the next date that should be focused in the calendar.
+ *
+ * This function determines the next focusable date based on the movement
+ * direction, constraints, and calendar configuration.
+ *
+ * @param moveBy The unit of movement (e.g., "day", "week").
+ * @param moveDir The direction of movement ("before" or "after").
+ * @param refDate The reference date from which to calculate the next focusable
+ *   date.
+ * @param navStart The earliest date the user can navigate to.
+ * @param navEnd The latest date the user can navigate to.
+ * @param props The DayPicker props, including calendar configuration options.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns The next focusable date.
+ */
+export function getFocusableDate(
+	moveBy: MoveFocusBy,
+	moveDir: MoveFocusDir,
+	refDate: Date,
+	navStart: Date | undefined,
+	navEnd: Date | undefined,
+	props: Pick<DayPickerProps, 'ISOWeek' | 'broadcastCalendar'>,
+	dateLib: DateLib,
+): Date {
+	const { ISOWeek, broadcastCalendar } = props;
+	const {
+		addDays,
+		addMonths,
+		addWeeks,
+		addYears,
+		endOfBroadcastWeek,
+		endOfISOWeek,
+		endOfWeek,
+		max,
+		min,
+		startOfBroadcastWeek,
+		startOfISOWeek,
+		startOfWeek,
+	} = dateLib;
+	const moveFns = {
+		day: addDays,
+		week: addWeeks,
+		month: addMonths,
+		year: addYears,
+		startOfWeek: (date: Date) =>
+			broadcastCalendar
+				? startOfBroadcastWeek(date, dateLib)
+				: ISOWeek
+					? startOfISOWeek(date)
+					: startOfWeek(date),
+		endOfWeek: (date: Date) =>
+			broadcastCalendar ? endOfBroadcastWeek(date) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date),
+	};
+
+	let focusableDate = moveFns[moveBy](refDate, moveDir === 'after' ? 1 : -1);
+	if (moveDir === 'before' && navStart) {
+		focusableDate = max([navStart, focusableDate]);
+	} else if (moveDir === 'after' && navEnd) {
+		focusableDate = min([navEnd, focusableDate]);
+	}
+	return focusableDate;
+}

package/src/helpers/getFormatters.ts

@@ -0,0 +1,16 @@
+import * as defaultFormatters from '../formatters/index.js';
+import type { DayPickerProps } from '../types/index.js';
+
+/**
+ * Merges custom formatters from the props with the default formatters.
+ *
+ * @param customFormatters The custom formatters provided in the DayPicker
+ *   props.
+ * @returns The merged formatters object.
+ */
+export function getFormatters(customFormatters: DayPickerProps['formatters']) {
+	return {
+		...defaultFormatters,
+		...customFormatters,
+	};
+}

package/src/helpers/getInitialMonth.ts

@@ -0,0 +1,35 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DayPickerProps } from '../types/props.js';
+
+/**
+ * Determines the initial month to display in the calendar based on the provided
+ * props.
+ *
+ * This function calculates the starting month, considering constraints such as
+ * `startMonth`, `endMonth`, and the number of months to display.
+ *
+ * @param props The DayPicker props, including navigation and date constraints.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns The initial month to display.
+ */
+export function getInitialMonth(
+	props: Pick<DayPickerProps, 'month' | 'defaultMonth' | 'today' | 'numberOfMonths' | 'timeZone'>,
+	navStart: Date | undefined,
+	navEnd: Date | undefined,
+	dateLib: DateLib,
+): Date {
+	const { month, defaultMonth, today = dateLib.today(), numberOfMonths = 1 } = props;
+	let initialMonth = month || defaultMonth || today;
+	const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
+
+	if (navEnd && differenceInCalendarMonths(navEnd, initialMonth) < numberOfMonths - 1) {
+		const offset = -1 * (numberOfMonths - 1);
+		initialMonth = addMonths(navEnd, offset);
+	}
+
+	if (navStart && differenceInCalendarMonths(initialMonth, navStart) < 0) {
+		initialMonth = navStart;
+	}
+
+	return startOfMonth(initialMonth);
+}

package/src/helpers/getLabels.ts

@@ -0,0 +1,93 @@
+import type { DateLibOptions } from '../classes/DateLib.js';
+import * as defaultLabels from '../labels/index.js';
+import type { DayPickerProps, Labels } from '../types/index.js';
+
+// Use a bivariant callable type to accept both the exact label signatures and
+// compatible overrides. This matches how React types event handlers, allowing
+// consumers to pass narrower or slightly different function shapes without
+// losing type safety.
+type BivariantLabel<Args extends unknown[]> = {
+	bivarianceHack(...args: Args): string;
+}['bivarianceHack'];
+
+const resolveLabel = <Args extends unknown[], T extends BivariantLabel<Args>>(
+	defaultLabel: T,
+	customLabel: T | undefined,
+	localeLabel: string | T | undefined,
+): T => {
+	if (customLabel) return customLabel;
+	if (localeLabel) {
+		return (typeof localeLabel === 'function' ? localeLabel : (..._args: Args) => localeLabel) as T;
+	}
+	return defaultLabel;
+};
+
+/**
+ * Merges custom labels from the props with the default labels.
+ *
+ * When available, uses the locale-provided translation for `labelNext`.
+ *
+ * @param customLabels The custom labels provided in the DayPicker props.
+ * @param options Options from the date library, used to resolve locale
+ *   translations.
+ * @returns The merged labels object with locale-aware defaults.
+ */
+export function getLabels(customLabels: DayPickerProps['labels'], options: DateLibOptions): Labels {
+	const localeLabels = options.locale?.labels ?? {};
+
+	return {
+		...defaultLabels,
+		...(customLabels ?? {}),
+		labelDayButton: resolveLabel(
+			defaultLabels.labelDayButton,
+			customLabels?.labelDayButton,
+			localeLabels.labelDayButton,
+		),
+		labelMonthDropdown: resolveLabel(
+			defaultLabels.labelMonthDropdown,
+			customLabels?.labelMonthDropdown,
+			localeLabels.labelMonthDropdown,
+		),
+		labelNext: resolveLabel(
+			defaultLabels.labelNext,
+			customLabels?.labelNext,
+			localeLabels.labelNext,
+		),
+		labelPrevious: resolveLabel(
+			defaultLabels.labelPrevious,
+			customLabels?.labelPrevious,
+			localeLabels.labelPrevious,
+		),
+		labelWeekNumber: resolveLabel(
+			defaultLabels.labelWeekNumber,
+			customLabels?.labelWeekNumber,
+			localeLabels.labelWeekNumber,
+		),
+		labelYearDropdown: resolveLabel(
+			defaultLabels.labelYearDropdown,
+			customLabels?.labelYearDropdown,
+			localeLabels.labelYearDropdown,
+		),
+		labelGrid: resolveLabel(
+			defaultLabels.labelGrid,
+			customLabels?.labelGrid,
+			localeLabels.labelGrid,
+		),
+		labelGridcell: resolveLabel(
+			defaultLabels.labelGridcell,
+			customLabels?.labelGridcell,
+			localeLabels.labelGridcell,
+		),
+		labelNav: resolveLabel(defaultLabels.labelNav, customLabels?.labelNav, localeLabels.labelNav),
+		labelWeekNumberHeader: resolveLabel(
+			defaultLabels.labelWeekNumberHeader,
+			customLabels?.labelWeekNumberHeader,
+			localeLabels.labelWeekNumberHeader,
+		),
+		labelWeekday: resolveLabel(
+			defaultLabels.labelWeekday,
+			customLabels?.labelWeekday,
+			localeLabels.labelWeekday,
+		),
+	};
+}

package/src/helpers/getMonthOptions.ts

@@ -0,0 +1,45 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DropdownOption } from '../components/custom-components.tsrx';
+import type { Formatters } from '../types/index.js';
+
+/**
+ * Returns the months to show in the dropdown.
+ *
+ * This function generates a list of months for the current year, formatted
+ * using the provided formatter, and determines whether each month should be
+ * disabled based on the navigation range.
+ *
+ * @param displayMonth The currently displayed month.
+ * @param navStart The start date for navigation.
+ * @param navEnd The end date for navigation.
+ * @param formatters The formatters to use for formatting the month labels.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns An array of dropdown options representing the months, or `undefined`
+ *   if no months are available.
+ */
+export function getMonthOptions(
+	displayMonth: Date,
+	navStart: Date | undefined,
+	navEnd: Date | undefined,
+	formatters: Pick<Formatters, 'formatMonthDropdown'>,
+	dateLib: DateLib,
+): DropdownOption[] | undefined {
+	const { startOfMonth, startOfYear, endOfYear, eachMonthOfInterval, getMonth } = dateLib;
+
+	const months = eachMonthOfInterval({
+		start: startOfYear(displayMonth),
+		end: endOfYear(displayMonth),
+	});
+
+	const options = months.map((month) => {
+		const label = formatters.formatMonthDropdown(month, dateLib);
+		const value = getMonth(month);
+		const disabled =
+			(navStart && month < startOfMonth(navStart)) ||
+			(navEnd && month > startOfMonth(navEnd)) ||
+			false;
+		return { value, label, disabled };
+	});
+
+	return options;
+}

package/src/helpers/getMonths.ts

@@ -0,0 +1,89 @@
+import type { DateLib } from '../classes/DateLib.js';
+import { CalendarDay, CalendarMonth, CalendarWeek } from '../classes/index.js';
+import type { DayPickerProps } from '../types/index.js';
+
+/**
+ * Returns the months to display in the calendar.
+ *
+ * This function generates `CalendarMonth` objects for each month to be
+ * displayed, including their weeks and days, based on the provided display
+ * months and dates.
+ *
+ * @param displayMonths The months (as dates) to display in the calendar.
+ * @param dates The dates to display in the calendar.
+ * @param props Options from the DayPicker props context.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns An array of `CalendarMonth` objects representing the months to
+ *   display.
+ */
+export function getMonths(
+	displayMonths: Date[],
+	dates: Date[],
+	props: Pick<DayPickerProps, 'broadcastCalendar' | 'fixedWeeks' | 'ISOWeek' | 'reverseMonths'>,
+	dateLib: DateLib,
+): CalendarMonth[] {
+	const {
+		addDays,
+		endOfBroadcastWeek,
+		endOfISOWeek,
+		endOfMonth,
+		endOfWeek,
+		getISOWeek,
+		getWeek,
+		startOfBroadcastWeek,
+		startOfISOWeek,
+		startOfWeek,
+	} = dateLib;
+
+	const dayPickerMonths = displayMonths.reduce<CalendarMonth[]>((months, month) => {
+		const firstDateOfFirstWeek = props.broadcastCalendar
+			? startOfBroadcastWeek(month, dateLib)
+			: props.ISOWeek
+				? startOfISOWeek(month)
+				: startOfWeek(month);
+
+		const lastDateOfLastWeek = props.broadcastCalendar
+			? endOfBroadcastWeek(month)
+			: props.ISOWeek
+				? endOfISOWeek(endOfMonth(month))
+				: endOfWeek(endOfMonth(month));
+
+		/** The dates to display in the month. */
+		const monthDates = dates.filter((date) => {
+			return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
+		});
+
+		const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+
+		if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
+			const extraDates = dates.filter((date) => {
+				const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+				return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
+			});
+			monthDates.push(...extraDates);
+		}
+
+		const weeks: CalendarWeek[] = monthDates.reduce<CalendarWeek[]>((weeks, date) => {
+			const weekNumber = props.ISOWeek ? getISOWeek(date) : getWeek(date);
+			const week = weeks.find((week) => week.weekNumber === weekNumber);
+
+			const day = new CalendarDay(date, month, dateLib);
+			if (!week) {
+				weeks.push(new CalendarWeek(weekNumber, [day]));
+			} else {
+				week.days.push(day);
+			}
+			return weeks;
+		}, []);
+
+		const dayPickerMonth = new CalendarMonth(month, weeks);
+		months.push(dayPickerMonth);
+		return months;
+	}, []);
+
+	if (!props.reverseMonths) {
+		return dayPickerMonths;
+	} else {
+		return dayPickerMonths.reverse();
+	}
+}

package/src/helpers/getNavMonth.ts

@@ -0,0 +1,35 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DayPickerProps } from '../types/index.js';
+
+/**
+ * Returns the start and end months for calendar navigation.
+ *
+ * @param props The DayPicker props, including navigation and layout options.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns A tuple containing the start and end months for navigation.
+ */
+export function getNavMonths(
+	props: Pick<DayPickerProps, 'captionLayout' | 'endMonth' | 'startMonth' | 'today' | 'timeZone'>,
+	dateLib: DateLib,
+): [start: Date | undefined, end: Date | undefined] {
+	let { startMonth, endMonth } = props;
+
+	const { startOfYear, startOfDay, startOfMonth, endOfMonth, addYears, endOfYear, today } = dateLib;
+
+	const hasYearDropdown =
+		props.captionLayout === 'dropdown' || props.captionLayout === 'dropdown-years';
+	if (startMonth) {
+		startMonth = startOfMonth(startMonth);
+	} else if (!startMonth && hasYearDropdown) {
+		startMonth = startOfYear(addYears(props.today ?? today(), -100));
+	}
+	if (endMonth) {
+		endMonth = endOfMonth(endMonth);
+	} else if (!endMonth && hasYearDropdown) {
+		endMonth = endOfYear(props.today ?? today());
+	}
+	return [
+		startMonth ? startOfDay(startMonth) : startMonth,
+		endMonth ? startOfDay(endMonth) : endMonth,
+	];
+}

package/src/helpers/getNextFocus.ts

@@ -0,0 +1,45 @@
+import type { DateLib } from '../classes/DateLib.js';
+import { CalendarDay } from '../classes/index.js';
+import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from '../types/index.js';
+import { dateMatchModifiers } from '../utils/dateMatchModifiers.js';
+import { getFocusableDate } from './getFocusableDate.js';
+
+export function getNextFocus(
+	moveBy: MoveFocusBy,
+	moveDir: MoveFocusDir,
+	refDay: CalendarDay,
+	calendarStartMonth: Date | undefined,
+	calendarEndMonth: Date | undefined,
+	props: Pick<DayPickerProps, 'disabled' | 'hidden' | 'modifiers' | 'ISOWeek' | 'timeZone'>,
+	dateLib: DateLib,
+	attempt = 0,
+): CalendarDay | undefined {
+	if (attempt > 365) return undefined;
+	const focusableDate = getFocusableDate(
+		moveBy,
+		moveDir,
+		refDay.date,
+		calendarStartMonth,
+		calendarEndMonth,
+		props,
+		dateLib,
+	);
+	const isDisabled = Boolean(
+		props.disabled && dateMatchModifiers(focusableDate, props.disabled, dateLib),
+	);
+	const isHidden = Boolean(
+		props.hidden && dateMatchModifiers(focusableDate, props.hidden, dateLib),
+	);
+	const focusDay = new CalendarDay(focusableDate, focusableDate, dateLib);
+	if (!isDisabled && !isHidden) return focusDay;
+	return getNextFocus(
+		moveBy,
+		moveDir,
+		focusDay,
+		calendarStartMonth,
+		calendarEndMonth,
+		props,
+		dateLib,
+		attempt + 1,
+	);
+}

package/src/helpers/getNextMonth.ts

@@ -0,0 +1,46 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DayPickerProps } from '../types/index.js';
+
+/**
+ * Returns the next month the user can navigate to, based on the given options.
+ *
+ * The next month is not always the next calendar month:
+ *
+ * - If it is after the `calendarEndMonth`, it returns `undefined`.
+ * - If paged navigation is enabled, it skips forward by the number of displayed
+ *   months.
+ *
+ * @param firstDisplayedMonth The first month currently displayed in the
+ *   calendar.
+ * @param calendarEndMonth The latest month the user can navigate to.
+ * @param options Navigation options, including `numberOfMonths` and
+ *   `pagedNavigation`.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns The next month, or `undefined` if navigation is not possible.
+ */
+export function getNextMonth(
+	firstDisplayedMonth: Date,
+	calendarEndMonth: Date | undefined,
+	options: Pick<DayPickerProps, 'numberOfMonths' | 'pagedNavigation' | 'disableNavigation'>,
+	dateLib: DateLib,
+): Date | undefined {
+	if (options.disableNavigation) {
+		return undefined;
+	}
+	const { pagedNavigation, numberOfMonths = 1 } = options;
+	const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
+	const offset = pagedNavigation ? numberOfMonths : 1;
+	const month = startOfMonth(firstDisplayedMonth);
+
+	if (!calendarEndMonth) {
+		return addMonths(month, offset);
+	}
+
+	const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth);
+
+	if (monthsDiff < numberOfMonths) {
+		return undefined;
+	}
+
+	return addMonths(month, offset);
+}