feat: add DeprecatedUI enum (#2284)

Add `DeprecatedUI` enum
gpbl · Jul 21, 2024 · f546e58 · f546e58
1 parent 1df41e6
commit f546e58
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 5 deletions.
diff --git a/src/UI.ts b/src/UI.ts
@@ -1,3 +1,5 @@
+import { CSSProperties } from "react";
+
 import type { CustomComponents, ClassNames, Styles } from "./types/index.js";
 
 /**
@@ -47,15 +49,15 @@ export enum UI {
   Nav = "nav",
   /** The row containing the week. */
   Week = "week",
-  /** The group of row weeks in a month. */
+  /** The group of row weeks in a month (`tbody`). */
   Weeks = "weeks",
   /** The column header with the weekday. */
   Weekday = "weekday",
   /** The row grouping the weekdays in the column headers. */
   Weekdays = "weekdays",
-  /** The row header containing the week number. */
+  /** The cell containing the week number. */
   WeekNumber = "week_number",
-  /** The row header containing the week number. */
+  /** The cell header of the week numbers column. */
   WeekNumberHeader = "week_number_header",
   /** The dropdown with the years. */
   YearsDropdown = "years_dropdown"
@@ -89,3 +91,91 @@ export enum SelectionState {
   /** The day is selected. */
   selected = "selected"
 }
+
+/**
+ * Deprecated UI elements and flags.
+ *
+ * @deprecated See the new UI elements in {@link UI}.
+ */
+export type DeprecatedUI<T extends CSSProperties | string> = {
+  /** @deprecated Use `button_previous` and `button_next`. */
+  button: T;
+  /** @deprecated This element has been removed. */
+  button_reset: T;
+  /** @deprecated This element has been renamed. Use `month_caption` instead. */
+  caption: T;
+  /** @deprecated This element has been removed. */
+  caption_between: T;
+  /** @deprecated This element has been removed. */
+  caption_dropdowns: T;
+  /** @deprecated This element has been removed. */
+  caption_end: T;
+  /** @deprecated This element has been removed. */
+  caption_start: T;
+  /** @deprecated Use `day` instead. */
+  cell: T;
+  /** @deprecated Use `disabled` instead. */
+  day_disabled: T;
+  /** @deprecated Use `hidden` instead. */
+  day_hidden: T;
+  /** @deprecated Use `outside` instead. */
+  day_outside: T;
+  /** @deprecated Use `range_end` instead. */
+  day_range_end: T;
+  /** @deprecated Use `range_middle` instead. */
+  day_range_middle: T;
+  /** @deprecated Use `range_start` instead. */
+  day_range_start: T;
+  /** @deprecated Use `selected` instead. */
+  day_selected: T;
+  /** @deprecated Use `today` instead. */
+  day_today: T;
+  /** @deprecated This element has been removed. */
+  dropdown_icon: T;
+  /** @deprecated Use `months_dropdown` instead. */
+  dropdown_month: T;
+  /** @deprecated Use `years_dropdown` instead. */
+  dropdown_year: T;
+  /** @deprecated This element has been removed. */
+  head: T;
+  /** @deprecated Use `weekday` instead. */
+  head_cell: T;
+  /** @deprecated Use `weekdays` instead. */
+  head_row: T;
+  /**
+   * @deprecated This flag has been removed. Use `data-multiple-months` in your
+   *   CSS selectors.
+   */
+  multiple_months: T;
+  /**
+   * @deprecated This element has been removed. Use `button_previous` and
+   *   `button_next`.
+   */
+  nav_button: T;
+  /** @deprecated This element has been renamed. Use `button_next` and */
+  nav_button_next: T;
+  /** @deprecated This element has been renamed. Use `button_previous` and */
+  nav_button_previous: T;
+  /** @deprecated This element has been removed. Use `chevron` instead. */
+  nav_icon: T;
+  /** @deprecated This element has been renamed. Use `week` instead. */
+  row: T;
+  /** @deprecated This element has been renamed. Use `month_grid` instead. */
+  table: T;
+  /** @deprecated This element has been renamed. Use `weeks` instead. */
+  tbody: T;
+  /** @deprecated This element has been removed. Use `footer` instead. */
+  tfoot: T;
+  /** @deprecated This flag has been removed. */
+  vhidden: T;
+  /**
+   * @deprecated This element has been renamed. Use {@link UI.WeekNumber}
+   *   instead.
+   */
+  weeknumber: T;
+  /**
+   * @deprecated This flag has been removed. Use `data-week-numbers` in your
+   *   CSS.
+   */
+  with_weeknumber: T;
+};
diff --git a/src/types/props.ts b/src/types/props.ts
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { DeprecatedUI } from "../UI.js";
 import type { Locale } from "../lib/dateLib.js";
 
 import type {
@@ -63,7 +64,7 @@ export interface PropsBase {
    *
    * @see https://daypicker.dev/docs/styling
    */
-  classNames?: Partial<ClassNames>;
+  classNames?: Partial<ClassNames> & Partial<DeprecatedUI<string>>;
   /**
    * Change the class name for the day matching the `modifiers`.
    *
@@ -77,7 +78,7 @@ export interface PropsBase {
    *
    * @see https://daypicker.dev/docs/styling
    */
-  styles?: Partial<Styles>;
+  styles?: Partial<Styles> & Partial<DeprecatedUI<React.CSSProperties>>;
   /**
    * Change the class name for the day matching the {@link modifiers}.
    *