@octanejs/day-picker 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/day-picker",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
@@ -53,21 +53,21 @@
     "date-fns": "^4.1.0"
   },
   "peerDependencies": {
-    "octane": "^0.1.51 || ^0.2.0"
+    "octane": "^0.1.51 || ^0.2.0 || ^0.3.0"
   },
   "devDependencies": {
-    "@tsrx/react": "^0.2.63",
+    "@tsrx/react": "^0.3.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "playwright": "^1.61.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "react-day-picker": "10.0.1",
     "typescript": "^5.9.3",
     "vite": "^8.1.5",
     "vitest": "^4.1.10",
-    "@octanejs/testing-library": "0.1.49",
-    "octane": "0.2.0"
+    "@octanejs/testing-library": "0.1.52",
+    "octane": "0.3.0"
   },
   "scripts": {
     "test": "pnpm upstream:check && vitest run --root ../.. --project day-picker --project day-picker-ssr --project day-picker-browser --project day-picker-differential",

package/src/DayPicker.tsrx

@@ -1,6 +1,5 @@
-// @ts-nocheck -- React-compatible DOM props cross Octane's stricter event boundary here.
 import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
-import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'octane';
 import type { CalendarDay } from './classes/CalendarDay.js';
 import { DateLib, defaultLocale } from './classes/DateLib.js';
 import { createGetModifiers } from './helpers/createGetModifiers.js';
@@ -28,7 +27,10 @@ import type {
 import { DayFlag, SelectionState, UI } from './UI.js';
 import { useAnimation } from './useAnimation.js';
 import { useCalendar } from './useCalendar.js';
-import { type DayPickerContext, dayPickerContext } from './useDayPicker.js';
+import {
+	type DayPickerContext,
+	dayPickerContext as DayPickerContextProvider,
+} from './useDayPicker.js';
 import { useFocus } from './useFocus.js';
 import { useSelection } from './useSelection.js';
 import { convertMatchersToTimeZone } from './utils/convertMatchersToTimeZone.js';
@@ -252,7 +254,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 	}, [goToMonth, nextMonth, onNextClick]);
 
 	const handleDayClick = useCallback(
-		(day: CalendarDay, m: Modifiers) => (e: MouseEvent) => {
+		(day: CalendarDay, m: Modifiers) => (e: MouseEvent<HTMLButtonElement>) => {
 			e.preventDefault();
 			e.stopPropagation();
 			setFocused(day);
@@ -266,7 +268,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 	);
 
 	const handleDayFocus = useCallback(
-		(day: CalendarDay, m: Modifiers) => (e: FocusEvent) => {
+		(day: CalendarDay, m: Modifiers) => (e: FocusEvent<HTMLButtonElement>) => {
 			setFocused(day);
 			onDayFocus?.(day.date, m, e);
 		},
@@ -274,7 +276,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 	);
 
 	const handleDayBlur = useCallback(
-		(day: CalendarDay, m: Modifiers) => (e: FocusEvent) => {
+		(day: CalendarDay, m: Modifiers) => (e: FocusEvent<HTMLButtonElement>) => {
 			blur();
 			onDayBlur?.(day.date, m, e);
 		},
@@ -282,7 +284,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 	);
 
 	const handleDayKeyDown = useCallback(
-		(day: CalendarDay, modifiers: Modifiers) => (e: KeyboardEvent) => {
+		(day: CalendarDay, modifiers: Modifiers) => (e: KeyboardEvent<HTMLButtonElement>) => {
 			const keyMap: Record<string, [MoveFocusBy, MoveFocusDir]> = {
 				ArrowLeft: [e.shiftKey ? 'month' : 'day', props.dir === 'rtl' ? 'after' : 'before'],
 				ArrowRight: [e.shiftKey ? 'month' : 'day', props.dir === 'rtl' ? 'before' : 'after'],
@@ -305,14 +307,14 @@ export function DayPicker(initialProps: DayPickerProps) @{
 	);
 
 	const handleDayMouseEnter = useCallback(
-		(day: CalendarDay, modifiers: Modifiers) => (e: MouseEvent) => {
+		(day: CalendarDay, modifiers: Modifiers) => (e: MouseEvent<HTMLButtonElement>) => {
 			onDayMouseEnter?.(day.date, modifiers, e);
 		},
 		[onDayMouseEnter],
 	);
 
 	const handleDayMouseLeave = useCallback(
-		(day: CalendarDay, modifiers: Modifiers) => (e: MouseEvent) => {
+		(day: CalendarDay, modifiers: Modifiers) => (e: MouseEvent<HTMLButtonElement>) => {
 			onDayMouseLeave?.(day.date, modifiers, e);
 		},
 		[onDayMouseLeave],
@@ -320,7 +322,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 
 	const handleMonthChange = useCallback(
 		(date: Date, monthOffset: number) => (e: ChangeEvent<HTMLSelectElement>) => {
-			const selectedMonth = Number(e.target.value);
+			const selectedMonth = Number(e.currentTarget.value);
 			const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
 			goToMonth(dateLib.addMonths(month, -monthOffset));
 		},
@@ -329,7 +331,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 
 	const handleYearChange = useCallback(
 		(date: Date, monthOffset: number) => (e: ChangeEvent<HTMLSelectElement>) => {
-			const selectedYear = Number(e.target.value);
+			const selectedYear = Number(e.currentTarget.value);
 			const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
 			goToMonth(dateLib.addMonths(month, -monthOffset));
 		},
@@ -385,7 +387,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 		formatters,
 	};
 
-	<dayPickerContext.Provider value={contextValue}>
+	<DayPickerContextProvider value={contextValue}>
 		<components.Root
 			rootRef={props.animate ? rootElRef : undefined}
 			className={className}
@@ -713,5 +715,5 @@ export function DayPicker(initialProps: DayPickerProps) @{
 					aria-live="polite"
 				>{props.footer}</components.Footer>}
 		</components.Root>
-	</dayPickerContext.Provider>
+	</DayPickerContextProvider>
 }

package/src/components/custom-components.tsrx

@@ -1,17 +1,16 @@
-// @ts-nocheck -- public props retain React DOM compatibility at the Octane render boundary.
 import { useCallback, useEffect, useRef } from 'octane';
 import type {
 	ButtonHTMLAttributes,
 	CSSProperties,
 	HTMLAttributes,
-	MouseEvent as ReactMouseEvent,
+	MouseEvent,
 	MouseEventHandler,
 	OptionHTMLAttributes,
-	Ref,
 	SelectHTMLAttributes,
 	TableHTMLAttributes,
 	ThHTMLAttributes,
-} from 'react';
+} from 'octane';
+import type { Ref } from 'react';
 import type { CalendarDay, CalendarMonth, CalendarWeek } from '../classes/index.js';
 import type { Modifiers } from '../types/index.js';
 import { UI } from '../UI.js';
@@ -143,10 +142,10 @@ export type NavProps =
 export function Nav(props: NavProps) @{
 	const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
 	const { components, classNames, styles, labels: { labelPrevious, labelNext } } = useDayPicker();
-	const handleNextClick = useCallback((event: ReactMouseEvent<HTMLButtonElement>) => {
+	const handleNextClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
 		if (nextMonth) onNextClick?.(event);
 	}, [nextMonth, onNextClick]);
-	const handlePreviousClick = useCallback((event: ReactMouseEvent<HTMLButtonElement>) => {
+	const handlePreviousClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
 		if (previousMonth) onPreviousClick?.(event);
 	}, [previousMonth, onPreviousClick]);
 	<nav {...navProps}>

package/src/selection/useMulti.ts

@@ -1,8 +1,12 @@
-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';
+import type {
+	DayPickerProps,
+	DaySelectionEvent,
+	Modifiers,
+	PropsMulti,
+	Selection,
+} from '../types/index.js';
 
 const multiSelectionSlot = Symbol.for('@octanejs/day-picker/useMulti/selection');
 
@@ -34,11 +38,7 @@ export function useMulti<T extends DayPickerProps>(props: T, dateLib: DateLib):
 
 	const { min, max } = props as PropsMulti;
 
-	const select = (
-		triggerDate: Date,
-		modifiers: Modifiers,
-		e: React.MouseEvent | React.KeyboardEvent,
-	) => {
+	const select = (triggerDate: Date, modifiers: Modifiers, e: DaySelectionEvent) => {
 		let newDates: Date[] | undefined = [...(selected ?? [])];
 		if (isSelected(triggerDate)) {
 			if (selected?.length === min) {

package/src/selection/useRange.ts

@@ -1,8 +1,12 @@
-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 type {
+	DayPickerProps,
+	DaySelectionEvent,
+	Modifiers,
+	PropsRange,
+	Selection,
+} from '../types/index.js';
 import { addToRange, rangeContainsModifiers } from '../utils/index.js';
 import { rangeIncludesDate } from '../utils/rangeIncludesDate.js';
 
@@ -37,11 +41,7 @@ export function useRange<T extends DayPickerProps>(props: T, dateLib: DateLib):
 
 	const isSelected = (date: Date) => selected && rangeIncludesDate(selected, date, false, dateLib);
 
-	const select = (
-		triggerDate: Date,
-		modifiers: Modifiers,
-		e: React.MouseEvent | React.KeyboardEvent,
-	) => {
+	const select = (triggerDate: Date, modifiers: Modifiers, e: DaySelectionEvent) => {
 		const { min, max } = props as PropsRange;
 		let newRange: ReturnType<typeof addToRange>;
 		if (triggerDate) {

package/src/selection/useSingle.ts

@@ -1,9 +1,8 @@
-import type React from 'react';
-
 import type { DateLib } from '../classes/DateLib.js';
 import { useControlledValue } from '../helpers/useControlledValue.js';
 import type {
 	DayPickerProps,
+	DaySelectionEvent,
 	Modifiers,
 	PropsSingle,
 	SelectedValue,
@@ -48,11 +47,7 @@ export function useSingle<T extends DayPickerProps>(
 		return selected ? isSameDay(selected, compareDate) : false;
 	};
 
-	const select = (
-		triggerDate: Date,
-		modifiers: Modifiers,
-		e: React.MouseEvent | React.KeyboardEvent,
-	) => {
+	const select = (triggerDate: Date, modifiers: Modifiers, e: DaySelectionEvent) => {
 		let newDate: Date | undefined = triggerDate;
 		if (!required && selected && selected && isSameDay(triggerDate, selected)) {
 			// If the date is the same, clear the selection.

package/src/types/props.ts

@@ -1,3 +1,4 @@
+import type { FocusEvent, KeyboardEvent, MouseEvent } from 'octane';
 import type React from 'react';
 import type { DateLib, DayPickerLocale } from '../classes/DateLib.js';
 
@@ -6,6 +7,7 @@ import type {
 	CustomComponents,
 	DateRange,
 	DayEventHandler,
+	DaySelectionEvent,
 	Formatters,
 	Labels,
 	Matcher,
@@ -469,17 +471,17 @@ export interface PropsBase {
 	 */
 	onPrevClick?: MonthChangeEventHandler;
 	/** Event handler when a day is clicked. */
-	onDayClick?: DayEventHandler<React.MouseEvent>;
+	onDayClick?: DayEventHandler<MouseEvent<HTMLButtonElement>>;
 	/** Event handler when a day is focused. */
-	onDayFocus?: DayEventHandler<React.FocusEvent>;
+	onDayFocus?: DayEventHandler<FocusEvent<HTMLButtonElement>>;
 	/** Event handler when a day is blurred. */
-	onDayBlur?: DayEventHandler<React.FocusEvent>;
+	onDayBlur?: DayEventHandler<FocusEvent<HTMLButtonElement>>;
 	/** Event handler when a key is pressed on a day. */
-	onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
+	onDayKeyDown?: DayEventHandler<KeyboardEvent<HTMLButtonElement>>;
 	/** Event handler when the mouse enters a day. */
-	onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
+	onDayMouseEnter?: DayEventHandler<MouseEvent<HTMLButtonElement>>;
 	/** Event handler when the mouse leaves a day. */
-	onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
+	onDayMouseLeave?: DayEventHandler<MouseEvent<HTMLButtonElement>>;
 
 	/**
 	 * Replace the default date library with a custom one. Experimental: not
@@ -511,13 +513,13 @@ export interface PropsBase {
  * @param {Date} triggerDate - The date when the event was triggered. This is
  *   typically the day clicked or interacted with.
  * @param {Modifiers} modifiers - The modifiers associated with the event.
- * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.
+ * @param {DaySelectionEvent} e - The native event object.
  */
 export type OnSelectHandler<T> = (
 	selected: T,
 	triggerDate: Date,
 	modifiers: Modifiers,
-	e: React.MouseEvent | React.KeyboardEvent,
+	e: DaySelectionEvent,
 ) => void;
 
 /**

package/src/types/selection.ts

@@ -1,6 +1,5 @@
-import type React from 'react';
 import type { DayPickerProps } from './props.js';
-import type { DateRange, Mode, Modifiers } from './shared.js';
+import type { DateRange, DaySelectionEvent, Mode, Modifiers } from './shared.js';
 
 /** Selection state and helpers for the active selection mode. */
 export type Selection<T extends DayPickerProps> = {
@@ -56,21 +55,21 @@ export type SelectedValue<T> = T extends { mode: 'single'; required?: boolean }
 export type SelectHandlerSingle<T extends { required?: boolean | undefined }> = (
 	triggerDate: Date,
 	modifiers: Modifiers,
-	e: React.MouseEvent | React.KeyboardEvent,
+	e: DaySelectionEvent,
 ) => T['required'] extends true ? Date : Date | undefined;
 
 /** Selection handler for multiple selection mode. */
 export type SelectHandlerMulti<T extends { required?: boolean | undefined }> = (
 	triggerDate: Date,
 	modifiers: Modifiers,
-	e: React.MouseEvent | React.KeyboardEvent,
+	e: DaySelectionEvent,
 ) => T['required'] extends true ? Date[] : Date[] | undefined;
 
 /** Selection handler for range selection mode. */
 export type SelectHandlerRange<T extends { required?: boolean | undefined }> = (
 	triggerDate: Date,
 	modifiers: Modifiers,
-	e: React.MouseEvent | React.KeyboardEvent,
+	e: DaySelectionEvent,
 ) => T['required'] extends true ? DateRange : DateRange | undefined;
 
 /**

package/src/types/shared.ts

@@ -1,3 +1,4 @@
+import type { KeyboardEvent, MouseEvent } from 'octane';
 import type { CSSProperties } from 'react';
 import type * as components from '../components/custom-components.tsrx';
 import type {
@@ -215,14 +216,16 @@ export type DayOfWeek = { dayOfWeek: number | number[] };
 /**
  * The event handler triggered when clicking or interacting with a day.
  *
- * @template EventType - The event type that triggered the event (e.g.
- *   `React.MouseEvent`, `React.KeyboardEvent`, etc.).
+ * @template EventType - The native event type that triggered the event.
  * @param date - The date that has triggered the event.
  * @param modifiers - The modifiers belonging to the date.
  * @param e - The DOM event that triggered the event.
  */
 export type DayEventHandler<EventType> = (date: Date, modifiers: Modifiers, e: EventType) => void;
 
+/** Native button event delivered to a selection callback. */
+export type DaySelectionEvent = MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>;
+
 /**
  * The event handler when a month is changed in the calendar.
  *