chore(types): deprecate Button in CustomComponents (#2439)

* chore(types): deprecate Button in CustomComponents

* Update docs

* Use legacy components.Button

src/UI.ts

@@ -10,10 +10,6 @@ import type { CustomComponents, ClassNames, Styles } from "./types/index.js";
  * Some of these elements are extended by flags and modifiers.
  */
 export enum UI {
-  /** The previous button in the navigation. */
-  ButtonPrevious = "button_previous",
-  /** The next button the navigation. */
-  ButtonNext = "button_next",
   /** The root component displaying the months and the navigation bar. */
   Root = "root",
   /** The Chevron SVG element used by navigation buttons and dropdowns. */
@@ -47,6 +43,18 @@ export enum UI {
   Months = "months",
   /** The navigation bar with the previous and next buttons. */
   Nav = "nav",
+  /**
+   * The next month button in the navigation. *
+   *
+   * @since 9.1.0
+   */
+  NextMonthButton = "button_next",
+  /**
+   * The previous month button in the navigation.
+   *
+   * @since 9.1.0
+   */
+  PreviousMonthButton = "button_previous",
   /** The row containing the week. */
   Week = "week",
   /** The group of row weeks in a month (`tbody`). */
@@ -118,14 +126,14 @@ export enum SelectionState {
 export type DeprecatedUI<T extends CSSProperties | string> = {
   /**
    * This element was applied to the style of any button in DayPicker and it is
-   * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}.
+   * replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
    *
    * @deprecated
    */
   button: T;
   /**
    * This element was resetting the style of any button in DayPicker and it is
-   * replaced by {@link UI.ButtonPrevious} and {@link UI.ButtonNext}.
+   * replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
    *
    * @deprecated
    */
@@ -262,26 +270,26 @@ export type DeprecatedUI<T extends CSSProperties | string> = {
   multiple_months: T;
   /**
    * This element has been removed. To style the navigation buttons, use
-   * {@link UI.ButtonPrevious} and {@link UI.ButtonNext}.
+   * {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
    *
    * @deprecated
    */
   nav_button: T;
   /**
-   * This element has been renamed to {@link UI.ButtonNext}.
+   * This element has been renamed to {@link UI.NextMonthButton}.
    *
    * @deprecated
    */
   nav_button_next: T;
   /**
-   * This element has been renamed to {@link UI.ButtonPrevious}.
+   * This element has been renamed to {@link UI.PreviousMonthButton}.
    *
    * @deprecated
    */
   nav_button_previous: T;
   /**
    * This element has been removed. The dropdown icon is now {@link UI.Chevron}
-   * inside a {@link UI.ButtonNext} or a {@link UI.ButtonPrevious}.
+   * inside a {@link UI.NextMonthButton} or a {@link UI.PreviousMonthButton}.
    *
    * @deprecated
    */

src/components/Button.tsx

@@ -3,8 +3,8 @@ import React from "react";
 /**
  * Render the button elements in the calendar.
  *
- * @group Components
- * @see https://daypicker.dev/guides/custom-components
+ * @private
+ * @deprecated Use `PreviousMonthButton` or `@link NextMonthButton` instead.
  */
 export function Button(props: JSX.IntrinsicElements["button"]) {
   return <button {...props} />;

src/components/Nav.tsx

@@ -35,7 +35,7 @@ export function Nav(
     <nav {...navProps}>
       <components.PreviousMonthButton
         type="button"
-        className={classNames[UI.ButtonPrevious]}
+        className={classNames[UI.PreviousMonthButton]}
         tabIndex={previousMonth ? undefined : -1}
         disabled={previousMonth ? undefined : true}
         aria-label={labelPrevious(previousMonth)}
@@ -49,7 +49,7 @@ export function Nav(
       </components.PreviousMonthButton>
       <components.NextMonthButton
         type="button"
-        className={classNames[UI.ButtonNext]}
+        className={classNames[UI.NextMonthButton]}
         tabIndex={nextMonth ? undefined : -1}
         disabled={nextMonth ? undefined : true}
         aria-label={labelNext(nextMonth)}

src/components/NextMonthButton.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 
+import { useDayPicker } from "../useDayPicker.js";
+
 /**
  * Render the next month button element in the calendar.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
 export function NextMonthButton(props: JSX.IntrinsicElements["button"]) {
-  return <button {...props} />;
+  const { components } = useDayPicker();
+  return <components.Button {...props} />;
 }
 
 export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];

src/components/PreviousMonthButton.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 
+import { useDayPicker } from "../useDayPicker.js";
+
 /**
  * Render the previous month button element in the calendar.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
 export function PreviousMonthButton(props: JSX.IntrinsicElements["button"]) {
-  return <button {...props} />;
+  const { components } = useDayPicker();
+  return <components.Button {...props} />;
 }
 
 export type PreviousMonthButtonProps = Parameters<

src/types/shared.ts

@@ -45,7 +45,12 @@ export type Mode = "single" | "multiple" | "range";
  * @see https://daypicker.dev/guides/custom-components
  */
 export type CustomComponents = {
-  /** Render any button element in DayPicker. */
+  /**
+   * Render any button element in DayPicker.
+   *
+   * @deprecated Use {@link CustomComponents.NextMonthButton} or
+   *   {@link CustomComponents.PreviousMonthButton} instead.
+   */
   Button: typeof components.Button;
   /** Render the chevron icon used in the navigation buttons and dropdowns. */
   Chevron: typeof components.Chevron;

website/docs/guides/custom-components.mdx

@@ -45,7 +45,6 @@ Pass the components you want to customize to the `components` prop. This prop ac
 
 | Function                                                         | Description                                                                                          |
 | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| [`Button`](../api/functions/Button.md)                           | Render the button elements in the calendar.                                                          |
 | [`CaptionLabel`](../api/functions/CaptionLabel.md)               | Render the label in the month caption.                                                               |
 | [`Chevron`](../api/functions/Chevron.md)                         | Render the chevron icon used in the navigation buttons and dropdowns.                                |
 | [`Day`](../api/functions/Day.md)                                 | Render the gridcell of a day in the calendar and handle the interaction and the focus with they day. |