From a1ca967c9843c022ee6531550622764019d8f03a Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Sun, 8 Sep 2024 04:53:43 -0500 Subject: [PATCH 1/2] chore: remove unnecessary labelOptions from labelNext, labelPrevious --- src/DayPicker.tsx | 4 ++-- src/labels/labelNext.test.ts | 2 +- src/labels/labelNext.ts | 7 ++----- src/labels/labelPrevious.test.ts | 2 +- src/labels/labelPrevious.ts | 7 ++----- src/types/shared.ts | 2 +- 6 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx index 0c3e2ed416..30516edf0e 100644 --- a/src/DayPicker.tsx +++ b/src/DayPicker.tsx @@ -284,7 +284,7 @@ export function DayPicker(props: DayPickerProps) { className={classNames[UI.ButtonPrevious]} tabIndex={previousMonth ? undefined : -1} disabled={previousMonth ? undefined : true} - aria-label={labelPrevious(previousMonth, labelOptions)} + aria-label={labelPrevious(previousMonth)} onClick={handlePreviousClick} > { - expect(labelNext(new Date(), {})).toEqual("Go to the Next Month"); + expect(labelNext(new Date())).toEqual("Go to the Next Month"); }); diff --git a/src/labels/labelNext.ts b/src/labels/labelNext.ts index 95808e02d9..01a9ed7735 100644 --- a/src/labels/labelNext.ts +++ b/src/labels/labelNext.ts @@ -1,5 +1,3 @@ -import type { LabelOptions } from "../lib/dateLib.js"; - /** * The ARIA label for next month button. * @@ -8,9 +6,8 @@ import type { LabelOptions } from "../lib/dateLib.js"; * @see https://daypicker.dev/docs/translation#aria-labels */ export function labelNext( - /** Undefined where there's no next month no navigate to. */ - month: Date | undefined, - options?: LabelOptions + /** `undefined` where there's no next month to navigate to. */ + month: Date | undefined ) { return "Go to the Next Month"; } diff --git a/src/labels/labelPrevious.test.ts b/src/labels/labelPrevious.test.ts index 8f33a4660a..32db2677fe 100644 --- a/src/labels/labelPrevious.test.ts +++ b/src/labels/labelPrevious.test.ts @@ -1,5 +1,5 @@ import { labelPrevious } from "./labelPrevious"; test("should return the label", () => { - expect(labelPrevious(new Date(), {})).toEqual("Go to the Previous Month"); + expect(labelPrevious(new Date())).toEqual("Go to the Previous Month"); }); diff --git a/src/labels/labelPrevious.ts b/src/labels/labelPrevious.ts index 93481b7d4c..2cb43bc27f 100644 --- a/src/labels/labelPrevious.ts +++ b/src/labels/labelPrevious.ts @@ -1,5 +1,3 @@ -import type { LabelOptions } from "../lib/dateLib.js"; - /** * The ARIA label for previous month button. * @@ -8,9 +6,8 @@ import type { LabelOptions } from "../lib/dateLib.js"; * @see https://daypicker.dev/docs/translation#aria-labels */ export function labelPrevious( - /** Undefined where there's no previous month no navigate to. */ - month: Date | undefined, - options?: LabelOptions + /** Undefined where there's no previous month to navigate to. */ + month: Date | undefined ) { return "Go to the Previous Month"; } diff --git a/src/types/shared.ts b/src/types/shared.ts index 6f72751175..d352357527 100644 --- a/src/types/shared.ts +++ b/src/types/shared.ts @@ -133,7 +133,7 @@ export type Labels = { labelNext: typeof labelNext; /** The label for the "previous month" button. */ labelPrevious: typeof labelPrevious; - /** The label for the day button.. */ + /** The label for the day button. */ labelDayButton: typeof labelDayButton; /** @deprecated Use {@link labelDayButton} instead. */ labelDay: typeof labelDayButton; From 2d7e0377772612d33d5fc9b2b519b2b2ac4704b9 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Sun, 8 Sep 2024 04:55:14 -0500 Subject: [PATCH 2/2] chore: move `Nav` to own component --- src/DayPicker.tsx | 37 ++++--------------------- src/components/Nav.tsx | 61 +++++++++++++++++++++++++++++++++++++++--- 2 files changed, 63 insertions(+), 35 deletions(-) diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx index 30516edf0e..c746af3f03 100644 --- a/src/DayPicker.tsx +++ b/src/DayPicker.tsx @@ -137,8 +137,6 @@ export function DayPicker(props: DayPickerProps) { labelGrid, labelMonthDropdown, labelNav, - labelNext, - labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, @@ -278,36 +276,11 @@ export function DayPicker(props: DayPickerProps) { className={classNames[UI.Nav]} style={styles?.[UI.Nav]} aria-label={labelNav()} - > - - - - - - - + onPreviousClick={handlePreviousClick} + onNextClick={handleNextClick} + previousMonth={previousMonth} + nextMonth={nextMonth} + /> )} {months.map((calendarMonth, displayIndex) => { const handleMonthChange: ChangeEventHandler = ( diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 748c3c7022..955df93614 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -1,4 +1,7 @@ -import React from "react"; +import React, { MouseEventHandler } from "react"; + +import { UI } from "../UI.js"; +import { useDayPicker } from "../useDayPicker.js"; /** * Render the toolbar with the navigation button. @@ -6,8 +9,60 @@ import React from "react"; * @group Components * @see https://daypicker.dev/guides/custom-components */ -export function Nav(props: JSX.IntrinsicElements["nav"]) { - return