chore: move Nav to own component

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()}
-            >
-              <components.Button
-                type="button"
-                className={classNames[UI.ButtonPrevious]}
-                tabIndex={previousMonth ? undefined : -1}
-                disabled={previousMonth ? undefined : true}
-                aria-label={labelPrevious(previousMonth)}
-                onClick={handlePreviousClick}
-              >
-                <components.Chevron
-                  disabled={previousMonth ? undefined : true}
-                  className={classNames[UI.Chevron]}
-                  orientation="left"
-                />
-              </components.Button>
-              <components.Button
-                type="button"
-                className={classNames[UI.ButtonNext]}
-                tabIndex={nextMonth ? undefined : -1}
-                disabled={nextMonth ? undefined : true}
-                aria-label={labelNext(nextMonth)}
-                onClick={handleNextClick}
-              >
-                <components.Chevron
-                  disabled={previousMonth ? undefined : true}
-                  orientation="right"
-                  className={classNames[UI.Chevron]}
-                />
-              </components.Button>
-            </components.Nav>
+              onPreviousClick={handlePreviousClick}
+              onNextClick={handleNextClick}
+              previousMonth={previousMonth}
+              nextMonth={nextMonth}
+            />
           )}
           {months.map((calendarMonth, displayIndex) => {
             const handleMonthChange: ChangeEventHandler<HTMLSelectElement> = (

src/components/Nav.tsx

@@ -1,13 +1,68 @@
-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.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Nav(props: JSX.IntrinsicElements["nav"]) {
-  return <nav {...props} />;
+export function Nav(
+  props: {
+    onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
+    onNextClick?: MouseEventHandler<HTMLButtonElement>;
+    previousMonth?: Date | undefined;
+    nextMonth?: Date | undefined;
+  } & JSX.IntrinsicElements["nav"]
+) {
+  const {
+    onPreviousClick,
+    onNextClick,
+    previousMonth,
+    nextMonth,
+    ...navProps
+  } = props;
+
+  const {
+    components,
+    classNames,
+    labels: { labelPrevious, labelNext }
+  } = useDayPicker();
+
+  return (
+    <nav {...navProps}>
+      <components.Button
+        type="button"
+        className={classNames[UI.ButtonPrevious]}
+        tabIndex={previousMonth ? undefined : -1}
+        disabled={previousMonth ? undefined : true}
+        aria-label={labelPrevious(previousMonth)}
+        onClick={props.onPreviousClick}
+      >
+        <components.Chevron
+          disabled={previousMonth ? undefined : true}
+          className={classNames[UI.Chevron]}
+          orientation="left"
+        />
+      </components.Button>
+      <components.Button
+        type="button"
+        className={classNames[UI.ButtonNext]}
+        tabIndex={nextMonth ? undefined : -1}
+        disabled={nextMonth ? undefined : true}
+        aria-label={labelNext(nextMonth)}
+        onClick={props.onNextClick}
+      >
+        <components.Chevron
+          disabled={previousMonth ? undefined : true}
+          orientation="right"
+          className={classNames[UI.Chevron]}
+        />
+      </components.Button>
+    </nav>
+  );
 }
 
 export type NavProps = Parameters<typeof Nav>[0];