@octanejs/day-picker 0.0.1

package/src/noonDateLib.ts

@@ -0,0 +1,202 @@
+import { TZDate } from '@date-fns/tz';
+import type { EndOfWeekOptions, Locale, StartOfWeekOptions } from 'date-fns';
+import {
+	differenceInCalendarDays as differenceInCalendarDaysFn,
+	differenceInCalendarMonths as differenceInCalendarMonthsFn,
+	getISOWeek as getISOWeekFn,
+	getWeek as getWeekFn,
+} from 'date-fns';
+import type { DateLib } from './classes/DateLib.js';
+
+export interface CreateNoonOverridesOptions {
+	weekStartsOn?: number;
+	locale?: Locale;
+}
+
+type SupportedDate = Date | number | string | TZDate;
+type WeekStartsOn = NonNullable<StartOfWeekOptions['weekStartsOn']>;
+
+/**
+ * Creates `dateLib` overrides that keep all calendar math at noon in the target
+ * time zone. This avoids second-level offset changes (e.g., historical zones
+ * with +03:41:12) from pushing dates backward across midnight.
+ */
+export function createNoonOverrides(
+	timeZone: string,
+	options: CreateNoonOverridesOptions = {},
+): Partial<typeof DateLib.prototype> {
+	const { weekStartsOn, locale } = options;
+	const fallbackWeekStartsOn: WeekStartsOn = (weekStartsOn ??
+		locale?.options?.weekStartsOn ??
+		0) as WeekStartsOn;
+
+	// Keep all internal math anchored at noon in the target zone to avoid
+	// historical second-level offsets from crossing midnight.
+	const toNoonTZDate = (date: SupportedDate): TZDate => {
+		const normalizedDate =
+			typeof date === 'number' || typeof date === 'string' ? new Date(date) : date;
+		return new TZDate(
+			normalizedDate.getFullYear(),
+			normalizedDate.getMonth(),
+			normalizedDate.getDate(),
+			12,
+			0,
+			0,
+			timeZone,
+		);
+	};
+
+	// Convert a value into a host `Date` that represents the same calendar day
+	// as the target-zone noon. This is useful for helpers (e.g., date-fns week
+	// utilities) that expect local `Date` instances rather than `TZDate`s.
+	const toCalendarDate = (date: SupportedDate): Date => {
+		const zoned = toNoonTZDate(date);
+		return new Date(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 0, 0, 0, 0);
+	};
+
+	return {
+		today: () => {
+			return toNoonTZDate(TZDate.tz(timeZone));
+		},
+
+		newDate: (year: number, monthIndex: number, date: number) => {
+			return new TZDate(year, monthIndex, date, 12, 0, 0, timeZone);
+		},
+
+		startOfDay: (date) => {
+			return toNoonTZDate(date);
+		},
+
+		startOfWeek: (date, options?: StartOfWeekOptions) => {
+			const base = toNoonTZDate(date);
+			const weekStartsOnValue = (options?.weekStartsOn ?? fallbackWeekStartsOn) as WeekStartsOn;
+			const diff = (base.getDay() - weekStartsOnValue + 7) % 7;
+			base.setDate(base.getDate() - diff);
+			return base;
+		},
+
+		startOfISOWeek: (date) => {
+			const base = toNoonTZDate(date);
+			const diff = (base.getDay() - 1 + 7) % 7;
+			base.setDate(base.getDate() - diff);
+			return base;
+		},
+
+		startOfMonth: (date) => {
+			const base = toNoonTZDate(date);
+			base.setDate(1);
+			return base;
+		},
+
+		startOfYear: (date) => {
+			const base = toNoonTZDate(date);
+			base.setMonth(0, 1);
+			return base;
+		},
+
+		endOfWeek: (date, options?: EndOfWeekOptions) => {
+			const base = toNoonTZDate(date);
+			const weekStartsOnValue = (options?.weekStartsOn ?? fallbackWeekStartsOn) as WeekStartsOn;
+			const endDow = (weekStartsOnValue + 6) % 7;
+			const diff = (endDow - base.getDay() + 7) % 7;
+			base.setDate(base.getDate() + diff);
+			return base;
+		},
+
+		endOfISOWeek: (date) => {
+			const base = toNoonTZDate(date);
+			const diff = (7 - base.getDay()) % 7;
+			base.setDate(base.getDate() + diff);
+			return base;
+		},
+
+		endOfMonth: (date) => {
+			const base = toNoonTZDate(date);
+			base.setMonth(base.getMonth() + 1, 0);
+			return base;
+		},
+
+		endOfYear: (date) => {
+			const base = toNoonTZDate(date);
+			base.setMonth(11, 31);
+			return base;
+		},
+
+		eachMonthOfInterval: (interval) => {
+			const start = toNoonTZDate(interval.start);
+			const end = toNoonTZDate(interval.end);
+			const result: Date[] = [];
+			const cursor = new TZDate(start.getFullYear(), start.getMonth(), 1, 12, 0, 0, timeZone);
+			const endKey = end.getFullYear() * 12 + end.getMonth();
+			while (cursor.getFullYear() * 12 + cursor.getMonth() <= endKey) {
+				result.push(new TZDate(cursor, timeZone));
+				cursor.setMonth(cursor.getMonth() + 1, 1);
+			}
+			return result;
+		},
+
+		// Normalize to noon once before arithmetic (avoid DST/midnight edge cases),
+		// mutate the same TZDate, and return it.
+		addDays: (date, amount) => {
+			const base = toNoonTZDate(date);
+			base.setDate(base.getDate() + amount);
+			return base;
+		},
+
+		addWeeks: (date, amount) => {
+			const base = toNoonTZDate(date);
+			base.setDate(base.getDate() + amount * 7);
+			return base;
+		},
+
+		addMonths: (date, amount) => {
+			const base = toNoonTZDate(date);
+			base.setMonth(base.getMonth() + amount);
+			return base;
+		},
+
+		addYears: (date, amount) => {
+			const base = toNoonTZDate(date);
+			base.setFullYear(base.getFullYear() + amount);
+			return base;
+		},
+
+		eachYearOfInterval: (interval) => {
+			const start = toNoonTZDate(interval.start);
+			const end = toNoonTZDate(interval.end);
+			const years: Date[] = [];
+			const cursor = new TZDate(start.getFullYear(), 0, 1, 12, 0, 0, timeZone);
+			while (cursor.getFullYear() <= end.getFullYear()) {
+				years.push(new TZDate(cursor, timeZone));
+				cursor.setFullYear(cursor.getFullYear() + 1, 0, 1);
+			}
+			return years;
+		},
+
+		getWeek: (date, options) => {
+			const base = toCalendarDate(date);
+			return getWeekFn(base, {
+				weekStartsOn: options?.weekStartsOn ?? fallbackWeekStartsOn,
+				firstWeekContainsDate:
+					options?.firstWeekContainsDate ?? locale?.options?.firstWeekContainsDate ?? 1,
+			});
+		},
+
+		getISOWeek: (date) => {
+			const base = toCalendarDate(date);
+			return getISOWeekFn(base);
+		},
+
+		differenceInCalendarDays: (dateLeft, dateRight) => {
+			const left = toCalendarDate(dateLeft);
+			const right = toCalendarDate(dateRight);
+			return differenceInCalendarDaysFn(left, right);
+		},
+
+		differenceInCalendarMonths: (dateLeft, dateRight) => {
+			const left = toCalendarDate(dateLeft);
+			const right = toCalendarDate(dateRight);
+			return differenceInCalendarMonthsFn(left, right);
+		},
+	};
+}

package/src/selection/useMulti.ts

@@ -0,0 +1,74 @@
+import type React from 'react';
+
+import type { DateLib } from '../classes/DateLib.js';
+import { useControlledValue } from '../helpers/useControlledValue.js';
+import type { DayPickerProps, Modifiers, PropsMulti, Selection } from '../types/index.js';
+
+const multiSelectionSlot = Symbol.for('@octanejs/day-picker/useMulti/selection');
+
+/**
+ * Hook to manage multiple-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected dates, a function to select dates,
+ *   and a function to check if a date is selected.
+ */
+export function useMulti<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T> {
+	const { selected: initiallySelected, required, onSelect } = props as PropsMulti;
+
+	const [internallySelected, setSelected] = useControlledValue(
+		initiallySelected,
+		onSelect ? initiallySelected : undefined,
+		multiSelectionSlot,
+	);
+
+	const selected = !onSelect ? internallySelected : initiallySelected;
+
+	const { isSameDay } = dateLib;
+
+	const isSelected = (date: Date) => {
+		return selected?.some((d) => isSameDay(d, date)) ?? false;
+	};
+
+	const { min, max } = props as PropsMulti;
+
+	const select = (
+		triggerDate: Date,
+		modifiers: Modifiers,
+		e: React.MouseEvent | React.KeyboardEvent,
+	) => {
+		let newDates: Date[] | undefined = [...(selected ?? [])];
+		if (isSelected(triggerDate)) {
+			if (selected?.length === min) {
+				// Min value reached, do nothing
+				return;
+			}
+			if (required && selected?.length === 1) {
+				// Required value already selected do nothing
+				return;
+			}
+			newDates = selected?.filter((d) => !isSameDay(d, triggerDate));
+		} else {
+			if (selected?.length === max) {
+				// Max value reached, reset the selection to date
+				newDates = [triggerDate];
+			} else {
+				// Add the date to the selection
+				newDates = [...newDates, triggerDate];
+			}
+		}
+		if (!onSelect) {
+			setSelected(newDates);
+		}
+		onSelect?.(newDates, triggerDate, modifiers, e);
+		return newDates;
+	};
+
+	return {
+		selected,
+		select,
+		isSelected,
+	} as Selection<T>;
+}

package/src/selection/useRange.ts

@@ -0,0 +1,89 @@
+import type React from 'react';
+
+import type { DateLib } from '../classes/DateLib.js';
+import { useControlledValue } from '../helpers/useControlledValue.js';
+import type { DayPickerProps, Modifiers, PropsRange, Selection } from '../types/index.js';
+import { addToRange, rangeContainsModifiers } from '../utils/index.js';
+import { rangeIncludesDate } from '../utils/rangeIncludesDate.js';
+
+const rangeSelectionSlot = Symbol.for('@octanejs/day-picker/useRange/selection');
+
+/**
+ * Hook to manage range selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected range, a function to select a
+ *   range, and a function to check if a date is within the range.
+ */
+export function useRange<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T> {
+	const {
+		disabled,
+		excludeDisabled,
+		resetOnSelect,
+		selected: initiallySelected,
+		required,
+		onSelect,
+	} = props as PropsRange;
+
+	const [internallySelected, setSelected] = useControlledValue(
+		initiallySelected,
+		onSelect ? initiallySelected : undefined,
+		rangeSelectionSlot,
+	);
+
+	const selected = !onSelect ? internallySelected : initiallySelected;
+
+	const isSelected = (date: Date) => selected && rangeIncludesDate(selected, date, false, dateLib);
+
+	const select = (
+		triggerDate: Date,
+		modifiers: Modifiers,
+		e: React.MouseEvent | React.KeyboardEvent,
+	) => {
+		const { min, max } = props as PropsRange;
+		let newRange: ReturnType<typeof addToRange>;
+		if (triggerDate) {
+			const selectedFrom = selected?.from;
+			const selectedTo = selected?.to;
+			const hasFullRange = !!selectedFrom && !!selectedTo;
+			const isClickingSingleDayRange =
+				!!selectedFrom &&
+				!!selectedTo &&
+				dateLib.isSameDay(selectedFrom, selectedTo) &&
+				dateLib.isSameDay(triggerDate, selectedFrom);
+
+			if (resetOnSelect && (hasFullRange || !selected?.from)) {
+				if (!required && isClickingSingleDayRange) {
+					newRange = undefined;
+				} else {
+					newRange = { from: triggerDate, to: undefined };
+				}
+			} else {
+				newRange = addToRange(triggerDate, selected, min, max, required, dateLib);
+			}
+		}
+
+		if (excludeDisabled && disabled && newRange?.from && newRange.to) {
+			if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
+				// if a disabled days is found, the range is reset
+				newRange.from = triggerDate;
+				newRange.to = undefined;
+			}
+		}
+
+		if (!onSelect) {
+			setSelected(newRange);
+		}
+		onSelect?.(newRange, triggerDate, modifiers, e);
+
+		return newRange;
+	};
+
+	return {
+		selected,
+		select,
+		isSelected,
+	} as Selection<T>;
+}

package/src/selection/useSingle.ts

@@ -0,0 +1,77 @@
+import type React from 'react';
+
+import type { DateLib } from '../classes/DateLib.js';
+import { useControlledValue } from '../helpers/useControlledValue.js';
+import type {
+	DayPickerProps,
+	Modifiers,
+	PropsSingle,
+	SelectedValue,
+	SelectHandler,
+	Selection,
+} from '../types/index.js';
+
+const singleSelectionSlot = Symbol.for('@octanejs/day-picker/useSingle/selection');
+
+export type UseSingle<T extends DayPickerProps> = {
+	select: SelectHandler<T>;
+	isSelected: (date: Date) => boolean;
+	selected: SelectedValue<T>;
+};
+
+/**
+ * Hook to manage single-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected date, a function to select a date,
+ *   and a function to check if a date is selected.
+ */
+export function useSingle<T extends DayPickerProps>(
+	props: DayPickerProps,
+	dateLib: DateLib,
+): Selection<T> {
+	const { selected: initiallySelected, required, onSelect } = props as PropsSingle;
+
+	const [internallySelected, setSelected] = useControlledValue(
+		initiallySelected,
+		onSelect ? initiallySelected : undefined,
+		singleSelectionSlot,
+	);
+
+	const selected = !onSelect ? internallySelected : initiallySelected;
+
+	const { isSameDay } = dateLib;
+
+	const isSelected = (compareDate: Date) => {
+		return selected ? isSameDay(selected, compareDate) : false;
+	};
+
+	const select = (
+		triggerDate: Date,
+		modifiers: Modifiers,
+		e: React.MouseEvent | React.KeyboardEvent,
+	) => {
+		let newDate: Date | undefined = triggerDate;
+		if (!required && selected && selected && isSameDay(triggerDate, selected)) {
+			// If the date is the same, clear the selection.
+			newDate = undefined;
+		}
+		if (!onSelect) {
+			setSelected(newDate);
+		}
+		if (required) {
+			onSelect?.(newDate as Date, triggerDate, modifiers, e);
+		} else {
+			onSelect?.(newDate, triggerDate, modifiers, e);
+		}
+		return newDate;
+	};
+
+	return {
+		selected,
+		select,
+		isSelected,
+	} as Selection<T>;
+}