feat(types): deprecations and updated type names (#2138)

* Rename RootProvider → ContextProviders

* Remove RootContextProps, use ContextProvidersProps

* Update jsdoc

* Rename Root → Calendar

* Calendar: rename internal Month component

* Rename Month → MonthGrid

* CustomComponents: define type using exports

* Rename Caption → MonthCaption

* HeadRow → WeekdaysRow, deprecate Head component

* MonthCaption chore: update imports

* Rename Row → WeekRow

* Rename WeekNumber → WeekNumberRowHeader

* Rename DayPickerProps to shorten names

* DaySelectionMode → Mode

* Events types

* Lint files, remove useInput

* Lint file

* Add deprecated

* Update Labels types

* New: labelWeekNumberHeader

* Update deprecation messages

* Rename test file

* Fix labelDay options typing

* Export deprecated DayPickerDefaultProps

* Formatters: always return strings

* Fix formatters test

* Update selectors for next/prev buttons

* Update snapshot

* Fix tests for next/prev labels

* Fix website build

* Add upgrading guide

* Update for docs

* Update pnpm-lock

* Fix internal links

* Fix internal links

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.10.1",
+  "version": "9.0.0-alpha.0",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",

src/DayPicker.tsx

@@ -1,15 +1,15 @@
-import { Root } from "./components/Root";
-import { RootProvider } from "./contexts/RootProvider";
-import { DayPickerDefaultProps } from "./types/DayPickerDefault";
-import { DayPickerMultipleProps } from "./types/DayPickerMultiple";
-import { DayPickerRangeProps } from "./types/DayPickerRange";
-import { DayPickerSingleProps } from "./types/DayPickerSingle";
+import { Calendar } from "./components/Calendar";
+import { ContextProviders } from "./contexts/ContextProviders";
+import { PropsDefault } from "./types/PropsDefault";
+import { PropsMulti } from "./types/PropsMulti";
+import { PropsRange } from "./types/PropsRange";
+import { PropsSingle } from "./types/PropsSingle";
 
 export type DayPickerProps =
-  | DayPickerDefaultProps
-  | DayPickerSingleProps
-  | DayPickerMultipleProps
-  | DayPickerRangeProps;
+  | PropsDefault
+  | PropsSingle
+  | PropsMulti
+  | PropsRange;
 
 /**
  * DayPicker is a React component to create date pickers, calendars, and date
@@ -18,15 +18,11 @@ export type DayPickerProps =
  * @see http://daypicker.dev
  */
 export function DayPicker(
-  props:
-    | DayPickerDefaultProps
-    | DayPickerSingleProps
-    | DayPickerMultipleProps
-    | DayPickerRangeProps
+  props: PropsDefault | PropsSingle | PropsMulti | PropsRange
 ): JSX.Element {
   return (
-    <RootProvider {...props}>
-      <Root initialProps={props} />
-    </RootProvider>
+    <ContextProviders {...props}>
+      <Calendar initialProps={props} />
+    </ContextProviders>
   );
 }

src/components/Root.tsx → src/components/Calendar.tsx

@@ -5,24 +5,21 @@ import { useDayPicker } from "../contexts/DayPicker";
 import { useFocusContext } from "../contexts/Focus";
 import { useNavigation } from "../contexts/Navigation";
 
-import { Month } from "./Month";
-import { Months } from "./Months";
+import { MonthGrid } from "./MonthGrid";
+import { Months as DefaultMonths } from "./Months";
 
 function isDataAttributes(attrs: DayPickerProps): attrs is {
   [key: string]: string | boolean | number | undefined;
 } {
   return true;
 }
 
-export interface RootProps {
+export interface CalendarProps {
   initialProps: DayPickerProps;
 }
 
-/**
- * Render the container with the months according to the number of months to
- * display.
- */
-export function Root({ initialProps }: RootProps): JSX.Element {
+/** Render the DayPicker Calendar with navigation and the month grids. */
+export function Calendar({ initialProps }: CalendarProps): JSX.Element {
   const dayPicker = useDayPicker();
   const focusContext = useFocusContext();
   const navigation = useNavigation();
@@ -69,7 +66,7 @@ export function Root({ initialProps }: RootProps): JSX.Element {
       };
     }, {});
 
-  const MonthsComponent = initialProps.components?.Months ?? Months;
+  const Months = initialProps.components?.Months ?? DefaultMonths;
 
   return (
     <div
@@ -82,11 +79,11 @@ export function Root({ initialProps }: RootProps): JSX.Element {
       lang={initialProps.lang}
       {...dataAttributes}
     >
-      <MonthsComponent>
+      <Months>
         {navigation.displayMonths.map((month, i) => (
-          <Month key={i} displayIndex={i} displayMonth={month} />
+          <MonthGrid key={i} displayIndex={i} displayMonth={month} />
         ))}
-      </MonthsComponent>
+      </Months>
     </div>
   );
 }

src/components/CaptionDropdowns.test.tsx

@@ -12,18 +12,18 @@ import { user } from "@/test/user";
 import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
-import { CaptionProps } from "./Caption";
 import { CaptionDropdowns } from "./CaptionDropdowns";
+import { MonthCaptionProps } from "./MonthCaption";
 
 const today = new Date(2021, 8);
 const fromYear = 2020;
 const toYear = 2025;
 
 freezeBeforeAll(today);
 
-function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
+function setup(props: MonthCaptionProps, dayPickerProps?: DayPickerProps) {
   customRender(<CaptionDropdowns {...props} />, dayPickerProps);
 }
 

src/components/CaptionDropdowns.tsx

@@ -2,15 +2,15 @@ import { addMonths } from "date-fns";
 
 import { useDayPicker } from "../contexts/DayPicker";
 import { useNavigation } from "../contexts/Navigation";
-import { MonthChangeEventHandler } from "../types/EventHandlers";
+import { MonthChangeEventHandler } from "../types/events";
 
-import { CaptionProps } from "./Caption";
 import { CaptionLabel } from "./CaptionLabel";
+import { MonthCaptionProps } from "./MonthCaption";
 import { MonthsDropdown } from "./MonthsDropdown";
 import { YearsDropdown } from "./YearsDropdown";
 
 /** Render a caption with the dropdowns to navigate between months and years. */
-export function CaptionDropdowns(props: CaptionProps): JSX.Element {
+export function CaptionDropdowns(props: MonthCaptionProps): JSX.Element {
   const { classNames, styles, components } = useDayPicker();
   const { goToMonth } = useNavigation();
 

src/components/CaptionNavigation.tsx

@@ -5,11 +5,11 @@ import { isSameMonth } from "date-fns";
 import { useDayPicker } from "../contexts/DayPicker";
 import { useNavigation } from "../contexts/Navigation";
 
-import { CaptionProps } from "./Caption";
+import { MonthCaptionProps } from "./MonthCaption";
 import { Navigation } from "./Navigation";
 
 /** Render a caption with a button-based navigation. */
-export function CaptionNavigation(props: CaptionProps): JSX.Element {
+export function CaptionNavigation(props: MonthCaptionProps): JSX.Element {
   const { numberOfMonths } = useDayPicker();
   const { previousMonth, nextMonth, goToMonth, displayMonths } =
     useNavigation();

src/components/Day.test.tsx

@@ -4,7 +4,7 @@ import { customRender } from "@/test/render";
 import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
 import { Day, DayProps } from "./Day";
 

src/components/Dropdown.test.tsx

@@ -5,7 +5,7 @@ import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
 import { defaultClassNames } from "../contexts/DayPicker/defaultClassNames";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
 import { Dropdown, DropdownProps } from "./Dropdown";
 

src/components/Head.test.tsx

@@ -46,12 +46,12 @@ describe("when rendered", () => {
   });
 });
 
-describe("when using a custom HeadRow component", () => {
+describe("when using a custom WeekdaysRow component", () => {
   beforeEach(() => {
     setup({
       ...dayPickerProps,
       components: {
-        HeadRow: () => (
+        WeekdaysRow: () => (
           <tr>
             <td>custom head</td>
           </tr>

src/components/Head.tsx

@@ -1,14 +1,19 @@
 import { useDayPicker } from "../contexts/DayPicker";
 
-import { HeadRow } from "./HeadRow";
+import { WeekdaysRow as DefaultWeekdaysRow } from "./WeekdaysRow";
 
-/** Render the table head. */
+/**
+ * Render the table head.
+ *
+ * @deprecated This component should be removed in the next major version. Use
+ *   only `WeekdaysRow`.
+ */
 export function Head(): JSX.Element {
   const { classNames, styles, components } = useDayPicker();
-  const HeadRowComponent = components?.HeadRow ?? HeadRow;
+  const WeekdaysRow = components?.WeekdaysRow ?? DefaultWeekdaysRow;
   return (
     <thead style={styles.head} className={classNames.head}>
-      <HeadRowComponent />
+      <WeekdaysRow />
     </thead>
   );
 }

src/components/Caption.test.tsx → src/components/MonthCaption.test.tsx

@@ -13,16 +13,16 @@ import {
 import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
-import { CustomComponents } from "../types/DayPickerBase";
+import { CustomComponents } from "../types/PropsBase";
 
-import { Caption, CaptionProps } from "./Caption";
+import { MonthCaption, MonthCaptionProps } from "./MonthCaption";
 
 const today = new Date(2021, 8);
 
 freezeBeforeAll(today);
 
-function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
-  customRender(<Caption {...props} />, dayPickerProps);
+function setup(props: MonthCaptionProps, dayPickerProps?: DayPickerProps) {
+  customRender(<MonthCaption {...props} />, dayPickerProps);
 }
 
 describe("when navigation is disabled", () => {
@@ -74,11 +74,11 @@ describe('when the caption layout is "buttons"', () => {
     captionLayout: "buttons"
   };
   test("should render the next month button", () => {
-    customRender(<Caption displayMonth={today} />, dayPickerProps);
+    customRender(<MonthCaption displayMonth={today} />, dayPickerProps);
     expect(getNextButton()).toBeInTheDocument();
   });
   test("should render the previous month button", () => {
-    customRender(<Caption displayMonth={today} />, dayPickerProps);
+    customRender(<MonthCaption displayMonth={today} />, dayPickerProps);
     expect(getPrevButton()).toBeInTheDocument();
   });
 });