fix: deselect date with undefined options.selectedDate

Author: ruicsh

package.json

@@ -51,16 +51,16 @@
 	},
 	"devDependencies": {
 		"@testing-library/dom": "9.3.1",
-		"@testing-library/jest-dom": "6.1.2",
+		"@testing-library/jest-dom": "6.1.3",
 		"@testing-library/react": "14.0.0",
 		"@testing-library/user-event": "14.4.3",
 		"@tuplo/shell": "1.2.0",
 		"@types/jest": "29.5.4",
-		"@typescript-eslint/parser": "6.6.0",
+		"@typescript-eslint/parser": "6.7.0",
 		"@vitejs/plugin-react": "4.0.4",
-		"@vitest/coverage-v8": "0.34.3",
+		"@vitest/coverage-v8": "0.34.4",
 		"esbuild": "0.19.2",
-		"eslint": "8.48.0",
+		"eslint": "8.49.0",
 		"eslint-config-airbnb-base": "15.0.0",
 		"eslint-config-prettier": "9.0.0",
 		"eslint-config-react-app": "7.0.1",
@@ -71,9 +71,9 @@
 		"prettier": "3.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"tsx": "3.12.8",
+		"tsx": "3.12.10",
 		"typescript": "5.2.2",
 		"vite": "4.4.9",
-		"vitest": "0.34.3"
+		"vitest": "0.34.4"
 	}
 }

src/helpers.test.ts

@@ -11,7 +11,7 @@ import {
 	isValidDate,
 	padAdjacentMonthDays,
 } from "./helpers";
-import type { IDay } from "./use-calendar.d";
+import { type IDay } from "./use-calendar.d";
 
 describe("use-calendar helpers", () => {
 	const dateNowSpy = vi

src/helpers.ts

@@ -1,10 +1,10 @@
 import * as df from "./date-fns";
-import type {
-	IDay,
-	IEvent,
-	IMonth,
-	IUseCalendarOptions,
-	IWeek,
+import {
+	type IDay,
+	type IEvent,
+	type IMonth,
+	type IUseCalendarOptions,
+	type IWeek,
 } from "./use-calendar.d";
 
 export function isValidDate(d: string | number | Date | undefined) {
@@ -41,7 +41,7 @@ export function getDayEvents(args: IGetDayEventsArgs) {
 	);
 }
 
-interface INewDayArgs {
+interface IGetNewDayArgs {
 	availableDates?: Date[];
 	date: Date;
 	events?: IEvent[];
@@ -51,7 +51,7 @@ interface INewDayArgs {
 	isAdjacentMonth?: boolean;
 }
 
-export function getNewDay(args: INewDayArgs): IDay {
+export function getNewDay(args: IGetNewDayArgs): IDay {
 	const {
 		availableDates,
 		date,
@@ -145,7 +145,7 @@ export function padAdjacentMonthDays(args: IPadAdjacentMonthDaysArgs) {
 	return newWeek;
 }
 
-interface IGetWeekArgs {
+interface IGetWeeksArgs {
 	availableDates?: Date[];
 	events?: IEvent[];
 	firstDayOfWeek: number;
@@ -156,7 +156,7 @@ interface IGetWeekArgs {
 	year: number;
 }
 
-export function getWeeks(args: IGetWeekArgs): IWeek[] {
+export function getWeeks(args: IGetWeeksArgs): IWeek[] {
 	const {
 		availableDates,
 		events,

src/index.test.ts

@@ -2,8 +2,12 @@
 import { act, renderHook } from "@testing-library/react";
 import { vi } from "vitest";
 
-import { useCalendar } from "./index";
-import type { IDay, IEvent, IGetDayPropsReturns } from "./use-calendar.d";
+import {
+	useCalendar,
+	type IEvent,
+	type IDay,
+	type IGetDayPropsReturns,
+} from "./index";
 
 describe("use-calendar", () => {
 	const dateNowSpy = vi

src/index.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import * as df from "./date-fns";
 import {
@@ -12,7 +12,10 @@ import {
 	buildGetPrevNextMonthProps,
 	buildGetPrevNextYearProps,
 } from "./props";
-import type { ICalendarProps, IUseCalendarOptions } from "./use-calendar.d";
+import {
+	type ICalendarProps,
+	type IUseCalendarOptions,
+} from "./use-calendar.d";
 
 export type {
 	ICalendarProps,
@@ -44,6 +47,15 @@ export function useCalendar(
 		selected || new Date(Date.now())
 	);
 
+	useEffect(
+		() => {
+			if (s?.getTime() === selected?.getTime()) return;
+			setSelected(s);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[s?.getTime()]
+	);
+
 	let monthsToDisplay = options?.monthsToDisplay || 1;
 	if (monthsToDisplay === Infinity) {
 		const d1 = options?.minDate || df.getFirstDayOfMonth(visibleMonth);

src/props.test.ts

@@ -1,7 +1,7 @@
 import { vi } from "vitest";
 
 import { buildGetPrevNextMonthProps, buildGetDayProps } from "./props";
-import type { IMonth } from "./use-calendar.d";
+import { type IMonth } from "./use-calendar.d";
 
 const commonProps = {
 	role: "button",

src/props.ts

@@ -1,8 +1,8 @@
-import type {
-	IDay,
-	IGetPrevNextPropsReturns,
-	IGetDayPropsOptions,
-	IMonth,
+import {
+	type IDay,
+	type IGetPrevNextPropsReturns,
+	type IGetDayPropsOptions,
+	type IMonth,
 } from "./use-calendar.d";
 import * as df from "./date-fns";
 

src/react/index.test.tsx

@@ -55,4 +55,13 @@ describe("useCalendar UI", () => {
 			expect(onDateSelectedSpy).toHaveBeenCalledTimes(0);
 		});
 	});
+
+	describe("selectedDate", () => {
+		it("selects a date by default", async () => {
+			const selectedDate = new Date("2022-07-12");
+			render(<Calendar selectedDate={selectedDate} />);
+
+			expect(screen.getByText("12")).toHaveAttribute("aria-selected", "true");
+		});
+	});
 });

src/react/index.tsx

@@ -1,5 +1,4 @@
-import type { IUseCalendarOptions } from "../index";
-import { useCalendar } from "../index";
+import { useCalendar, type IUseCalendarOptions } from "../index";
 
 function Calendar(props?: Partial<IUseCalendarOptions>) {
 	const { months, getDayProps, getPrevMonthProps, getNextMonthProps } =