feat!: remove deprecated public APIs for v10

.github/workflows/package.yml

@@ -16,6 +16,11 @@ on:
         required: false
         default: false
         type: boolean
+      npm_tag:
+        description: npm dist-tag to publish under
+        required: false
+        default: latest
+        type: string
 
 permissions:
   id-token: write # Required for OIDC
@@ -113,4 +118,4 @@ jobs:
         with:
           name: rdp-dist
           path: dist
-      - run: npm publish --provenance --tag latest
+      - run: npm publish --provenance --tag ${{ github.event.inputs.npm_tag || 'latest' }}

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 DayPicker follows [Semantic Versioning](http://semver.org/). See the [Releases page](https://github.com/gpbl/react-day-picker/releases) on Github for the complete list of changes, diffs and contributors, or the [list of versions](https://www.npmjs.com/package/react-day-picker?activeTab=versions) published on npm.
 
+## v10.0.0
+
+_Release date: 2026-02-06_
+
+DayPicker v10 removes all previously deprecated public APIs from v9.
+
+#### Breaking Changes
+
+- remove deprecated props: `fromDate`, `toDate`, `fromMonth`, `toMonth`, `fromYear`, `toYear`, `initialFocus`
+- remove deprecated event props: `onWeekNumberClick`, `onDayKeyUp`, `onDayKeyPress`, `onDayPointerEnter`, `onDayPointerLeave`, `onDayTouchCancel`, `onDayTouchEnd`, `onDayTouchMove`, `onDayTouchStart`
+- remove deprecated type exports from `types/deprecated`
+- remove deprecated aliases: `formatMonthCaption`, `formatYearCaption`, `labelDay`, `labelCaption`, `isMatch`, `isDateInRange`
+- remove deprecated `components.Button` customization entry
+- remove deprecated `DeprecatedUI` compatibility typing for `classNames` and `styles`
+- remove deprecated DateLib exports: `FormatOptions`, `LabelOptions`, `dateLib`, and `DateLib.Date`
+- remove deprecated `react-day-picker/jalali` subpath (use `react-day-picker/persian`)
 ## v9.14.0
 
 _Release date: 2026-02-26_

examples/Formatters.tsx

@@ -25,9 +25,9 @@ const formatCaption = (month: Date, options: DateLibOptions | undefined) => {
 export function Formatters() {
   return (
     <DayPicker
-      fromYear={2020}
-      toYear={2025}
-      formatters={{ formatMonthCaption: formatCaption }}
+      startMonth={new Date(2020, 0)}
+      endMonth={new Date(2025, 11)}
+      formatters={{ formatCaption }}
     />
   );
 }

examples/FromToMonth.tsx

@@ -7,8 +7,8 @@ export function FromToMonth() {
   return (
     <DayPicker
       defaultMonth={defaultMonth}
-      fromMonth={defaultMonth}
-      toMonth={new Date(2015, 10, 20)}
+      startMonth={defaultMonth}
+      endMonth={new Date(2015, 10, 20)}
     />
   );
 }

examples/FromToYear.tsx

@@ -4,6 +4,10 @@ import { DayPicker } from "react-day-picker";
 
 export function FromToYear() {
   return (
-    <DayPicker defaultMonth={new Date(2024, 0)} fromYear={2024} toYear={2026} />
+    <DayPicker
+      defaultMonth={new Date(2024, 0)}
+      startMonth={new Date(2024, 0)}
+      endMonth={new Date(2026, 11)}
+    />
   );
 }

examples/InputRange.tsx

@@ -1,10 +1,6 @@
 import { format, isAfter, isBefore, isValid, parse } from "date-fns";
 import React, { type ChangeEventHandler, useState } from "react";
-import {
-  type DateRange,
-  DayPicker,
-  type SelectRangeEventHandler,
-} from "react-day-picker";
+import { type DateRange, DayPicker, type PropsRange } from "react-day-picker";
 
 export function InputRange() {
   const [selectedRange, setSelectedRange] = useState<DateRange>();
@@ -38,9 +34,7 @@ export function InputRange() {
     }
   };
 
-  const handleRangeSelect: SelectRangeEventHandler = (
-    range: DateRange | undefined,
-  ) => {
+  const handleRangeSelect: PropsRange["onSelect"] = (range) => {
     setSelectedRange(range);
     if (range?.from) {
       setFromValue(format(range.from, "y-MM-dd"));

examples/ModifiersCustom.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { type DayMouseEventHandler, DayPicker } from "react-day-picker";
+import { type DayEventHandler, DayPicker } from "react-day-picker";
 
 const bookedDays = [
   new Date(2024, 5, 8),
@@ -27,7 +27,10 @@ const css = `
 }`;
 
 export function ModifiersCustom() {
-  const handleDayClick: DayMouseEventHandler = (day, { booked }) => {
+  const handleDayClick: DayEventHandler<React.MouseEvent> = (
+    day,
+    { booked },
+  ) => {
     alert(`Day ${day.toLocaleDateString()} is booked? ${booked}`);
   };
 

examples/ModifiersSelected.tsx

@@ -1,10 +1,10 @@
 import { subDays } from "date-fns";
 import React from "react";
-import { DayPicker, type SelectSingleEventHandler } from "react-day-picker";
+import { DayPicker, type PropsSingle } from "react-day-picker";
 
 export function ModifiersSelected() {
   const yesterday = subDays(new Date(), 1);
-  const handleSelect: SelectSingleEventHandler = (_value, _date, modifiers) => {
+  const handleSelect: PropsSingle["onSelect"] = (_value, _date, modifiers) => {
     if (modifiers.selected) {
       alert("You clicked a selected day.");
     }

examples/Testcase1567.tsx

@@ -24,7 +24,7 @@ export function TestCase1567() {
         numberOfMonths={2}
         showOutsideDays
         selected={selected}
-        fromMonth={new Date(2020, 5)}
+        startMonth={new Date(2020, 5)}
       />
       <button type="button">I should be focusable</button>
     </div>

examples/TimeZoneNoonSafe.test.tsx

@@ -72,15 +72,15 @@ describe("TimeZoneNoonSafe navigation", () => {
   });
 });
 
-test("year dropdown starts at the fromMonth year", () => {
+test("year dropdown starts at the startMonth year", () => {
   const timeZone = "Asia/Dubai";
-  const fromMonth = new Date(1880, 0, 1);
+  const startMonth = new Date(1880, 0, 1);
   render(
     <TimeZoneNoonSafe
       captionLayout="dropdown"
       timeZone={timeZone}
-      fromMonth={fromMonth}
-      toMonth={new Date(1885, 11, 31)}
+      startMonth={startMonth}
+      endMonth={new Date(1885, 11, 31)}
     />,
   );
   const selectYear = screen.getAllByRole("combobox")[1];

examples/TimeZoneNoonSafe.tsx

@@ -3,11 +3,12 @@ import React, { useState } from "react";
 import {
   DayPicker,
   type DayPickerProps,
+  type PropsBase,
   type PropsSingle,
   TZDate,
 } from "react-day-picker";
 
-type TimeZoneNoonSafeProps = Partial<DayPickerProps> & {
+type TimeZoneNoonSafeProps = Omit<PropsBase, "mode"> & {
   selected?: Date;
   onSelect?: PropsSingle["onSelect"];
 };
@@ -21,7 +22,6 @@ export function TimeZoneNoonSafe(props: TimeZoneNoonSafeProps = {}) {
     defaultMonth,
     startMonth,
     footer,
-    mode: _mode,
     ...rest
   } = props;
 
@@ -51,7 +51,7 @@ export function TimeZoneNoonSafe(props: TimeZoneNoonSafeProps = {}) {
       selected={selectedValue}
       onSelect={onSelect}
       startMonth={startMonth ?? new Date(1880, 0, 1)}
-      toYear={2025}
+      endMonth={new Date(2025, 11, 31)}
       footer={
         footer ??
         (selected

examples/__snapshots__/Range.test.tsx.snap

@@ -6,49 +6,13 @@ exports[`should match the snapshot 1`] = `
     <div
       class="rdp-root"
       data-mode="range"
+      data-nav-layout="after"
       id="test"
       lang="en-US"
     >
       <div
         class="rdp-months"
       >
-        <nav
-          aria-label="Navigation bar"
-          class="rdp-nav"
-        >
-          <button
-            aria-label="Go to the Previous Month"
-            class="rdp-button_previous"
-            type="button"
-          >
-            <svg
-              class="rdp-chevron"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <polygon
-                points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
-              />
-            </svg>
-          </button>
-          <button
-            aria-label="Go to the Next Month"
-            class="rdp-button_next"
-            type="button"
-          >
-            <svg
-              class="rdp-chevron"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <polygon
-                points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
-              />
-            </svg>
-          </button>
-        </nav>
         <div
           class="rdp-month"
         >
@@ -63,6 +27,43 @@ exports[`should match the snapshot 1`] = `
               June 2020
             </span>
           </div>
+          <nav
+            aria-label="Navigation bar"
+            class="rdp-nav"
+          >
+            <button
+              aria-label="Go to the Previous Month"
+              class="rdp-button_previous"
+              type="button"
+            >
+              <svg
+                class="rdp-chevron"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <polygon
+                  points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
+                />
+              </svg>
+            </button>
+            <button
+              aria-label="Go to the Next Month"
+              class="rdp-button_next"
+              type="button"
+            >
+              <svg
+                class="rdp-chevron"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <polygon
+                  points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
+                />
+              </svg>
+            </button>
+          </nav>
           <table
             aria-label="June 2020"
             aria-multiselectable="true"
@@ -646,49 +647,13 @@ exports[`when a day in the range is clicked when the day is clicked again when a
     <div
       class="rdp-root"
       data-mode="range"
+      data-nav-layout="after"
       id="test"
       lang="en-US"
     >
       <div
         class="rdp-months"
       >
-        <nav
-          aria-label="Navigation bar"
-          class="rdp-nav"
-        >
-          <button
-            aria-label="Go to the Previous Month"
-            class="rdp-button_previous"
-            type="button"
-          >
-            <svg
-              class="rdp-chevron"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <polygon
-                points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
-              />
-            </svg>
-          </button>
-          <button
-            aria-label="Go to the Next Month"
-            class="rdp-button_next"
-            type="button"
-          >
-            <svg
-              class="rdp-chevron"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <polygon
-                points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
-              />
-            </svg>
-          </button>
-        </nav>
         <div
           class="rdp-month"
         >
@@ -703,6 +668,43 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               June 2020
             </span>
           </div>
+          <nav
+            aria-label="Navigation bar"
+            class="rdp-nav"
+          >
+            <button
+              aria-label="Go to the Previous Month"
+              class="rdp-button_previous"
+              type="button"
+            >
+              <svg
+                class="rdp-chevron"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <polygon
+                  points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
+                />
+              </svg>
+            </button>
+            <button
+              aria-label="Go to the Next Month"
+              class="rdp-button_next"
+              type="button"
+            >
+              <svg
+                class="rdp-chevron"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <polygon
+                  points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
+                />
+              </svg>
+            </button>
+          </nav>
           <table
             aria-label="June 2020"
             aria-multiselectable="true"