react-day-picker 9.0.0 → 9.0.2

package/dist/esm/UI.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 /**
  * The UI elements composing DayPicker. These elements are mapped to
  * {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
@@ -45,15 +46,15 @@ export declare 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"
@@ -85,3 +86,242 @@ export declare enum SelectionState {
     /** The day is selected. */
     selected = "selected"
 }
+/**
+ * Deprecated UI elements and flags.
+ *
+ * These elements were used in previous version of DayPicker and are kept here
+ * to help the transition to the new {@link UI | UI elements}.
+ *
+ * ```diff
+ *   <DayPicker classNames={{
+ * -  cell: "my-cell",
+ * +  day: "my-cell",
+ * -  day: "my-day",
+ * +  day_button: "my-day",
+ * -  day_disabled: "my-day_disabled",
+ * +  disabled: "my-day_disabled",
+ *    // etc.
+ *   }}/>
+ * ```
+ *
+ * @deprecated
+ * @since 9.0.1
+ * @see https://daypicker.dev/upgrading
+ * @see https://daypicker.dev/docs/styling
+ */
+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}.
+     *
+     * @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}.
+     *
+     * @deprecated
+     */
+    button_reset: T;
+    /**
+     * This element has been renamed to {@link UI.MonthCaption}.
+     *
+     * @deprecated
+     */
+    caption: T;
+    /**
+     * This element has been removed. Captions are styled via
+     * {@link UI.MonthCaption}.
+     *
+     * @deprecated
+     */
+    caption_between: T;
+    /**
+     * This element has been renamed to {@link UI.Dropdowns}.
+     *
+     * @deprecated
+     */
+    caption_dropdowns: T;
+    /**
+     * This element has been removed. Captions are styled via
+     * {@link UI.MonthCaption}.
+     *
+     * @deprecated
+     */
+    caption_end: T;
+    /**
+     * This element has been removed.
+     *
+     * @deprecated
+     */
+    caption_start: T;
+    /**
+     * This element has been renamed to {@link UI.Day}.
+     *
+     * @deprecated
+     */
+    cell: T;
+    /**
+     * This element has been renamed to {@link DayFlag.disabled}.
+     *
+     * @deprecated
+     */
+    day_disabled: T;
+    /**
+     * This element has been renamed to {@link DayFlag.hidden}.
+     *
+     * @deprecated
+     */
+    day_hidden: T;
+    /**
+     * This element has been renamed to {@link DayFlag.outside}.
+     *
+     * @deprecated
+     */
+    day_outside: T;
+    /**
+     * This element has been renamed to {@link SelectionState.range_end}.
+     *
+     * @deprecated
+     */
+    day_range_end: T;
+    /**
+     * This element has been renamed to {@link SelectionState.range_middle}.
+     *
+     * @deprecated
+     */
+    day_range_middle: T;
+    /**
+     * This element has been renamed to {@link SelectionState.range_start}.
+     *
+     * @deprecated
+     */
+    day_range_start: T;
+    /**
+     * This element has been renamed to {@link SelectionState.selected}.
+     *
+     * @deprecated
+     */
+    day_selected: T;
+    /**
+     * This element has been renamed to {@link DayFlag.today}.
+     *
+     * @deprecated
+     */
+    day_today: T;
+    /**
+     * This element has been removed. The dropdown icon is now {@link UI.Chevron}
+     * inside a {@link UI.CaptionLabel}.
+     *
+     * @deprecated
+     */
+    dropdown_icon: T;
+    /**
+     * This element has been renamed to {@link UI.MonthsDropdown}.
+     *
+     * @deprecated
+     */
+    dropdown_month: T;
+    /**
+     * This element has been renamed to {@link UI.YearsDropdown}.
+     *
+     * @deprecated
+     */
+    dropdown_year: T;
+    /**
+     * This element has been removed.
+     *
+     * @deprecated
+     */
+    head: T;
+    /**
+     * This element has been renamed to {@link UI.Weekday}.
+     *
+     * @deprecated
+     */
+    head_cell: T;
+    /**
+     * This element has been renamed to {@link UI.Weekdays}.
+     *
+     * @deprecated
+     */
+    head_row: T;
+    /**
+     * This flag has been removed. Use `data-multiple-months` in your CSS
+     * selectors.
+     *
+     * @deprecated
+     */
+    multiple_months: T;
+    /**
+     * This element has been removed. To style the navigation buttons, use
+     * {@link UI.ButtonPrevious} and {@link UI.ButtonNext}.
+     *
+     * @deprecated
+     */
+    nav_button: T;
+    /**
+     * This element has been renamed to {@link UI.ButtonNext}.
+     *
+     * @deprecated
+     */
+    nav_button_next: T;
+    /**
+     * This element has been renamed to {@link UI.ButtonPrevious}.
+     *
+     * @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}.
+     *
+     * @deprecated
+     */
+    nav_icon: T;
+    /**
+     * This element has been renamed to {@link UI.Week}.
+     *
+     * @deprecated
+     */
+    row: T;
+    /**
+     * This element has been renamed to {@link UI.MonthGrid}.
+     *
+     * @deprecated
+     */
+    table: T;
+    /**
+     * This element has been renamed to {@link UI.Weeks}.
+     *
+     * @deprecated
+     */
+    tbody: T;
+    /**
+     * This element has been removed. The {@link UI.Footer} is now a single element
+     * below the months.
+     *
+     * @deprecated
+     */
+    tfoot: T;
+    /**
+     * This flag has been removed. There are no "visually hidden" elements in
+     * DayPicker 9.
+     *
+     * @deprecated
+     */
+    vhidden: T;
+    /**
+     * This element has been renamed. Use {@link UI.WeekNumber} instead.
+     *
+     * @deprecated
+     */
+    weeknumber: T;
+    /**
+     * This flag has been removed. Use `data-week-numbers` in your CSS.
+     *
+     * @deprecated
+     */
+    with_weeknumber: T;
+};

package/dist/esm/UI.js

@@ -46,15 +46,15 @@ export var UI;
     UI["Nav"] = "nav";
     /** The row containing the week. */
     UI["Week"] = "week";
-    /** The group of row weeks in a month. */
+    /** The group of row weeks in a month (`tbody`). */
     UI["Weeks"] = "weeks";
     /** The column header with the weekday. */
     UI["Weekday"] = "weekday";
     /** The row grouping the weekdays in the column headers. */
     UI["Weekdays"] = "weekdays";
-    /** The row header containing the week number. */
+    /** The cell containing the week number. */
     UI["WeekNumber"] = "week_number";
-    /** The row header containing the week number. */
+    /** The cell header of the week numbers column. */
     UI["WeekNumberHeader"] = "week_number_header";
     /** The dropdown with the years. */
     UI["YearsDropdown"] = "years_dropdown";

package/dist/esm/UI.js.map

@@ -1 +1 @@
-{"version":3,"file":"UI.js","sourceRoot":"","sources":["../../src/UI.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAN,IAAY,EAoDX;AApDD,WAAY,EAAE;IACZ,6CAA6C;IAC7C,wCAAkC,CAAA;IAClC,sCAAsC;IACtC,gCAA0B,CAAA;IAC1B,uEAAuE;IACvE,mBAAa,CAAA;IACb,wEAAwE;IACxE,yBAAmB,CAAA;IACnB;;;OAGG;IACH,iBAAW,CAAA;IACX,4EAA4E;IAC5E,8BAAwB,CAAA;IACxB,iFAAiF;IACjF,oCAA8B,CAAA;IAC9B,+DAA+D;IAC/D,6BAAuB,CAAA;IACvB,2DAA2D;IAC3D,2BAAqB,CAAA;IACrB,6CAA6C;IAC7C,oCAA8B,CAAA;IAC9B,sCAAsC;IACtC,uBAAiB,CAAA;IACjB,sBAAsB;IACtB,8BAAwB,CAAA;IACxB,6DAA6D;IAC7D,oCAA8B,CAAA;IAC9B,oCAAoC;IACpC,wCAAkC,CAAA;IAClC,iCAAiC;IACjC,qBAAe,CAAA;IACf,6CAA6C;IAC7C,uBAAiB,CAAA;IACjB,6DAA6D;IAC7D,iBAAW,CAAA;IACX,mCAAmC;IACnC,mBAAa,CAAA;IACb,yCAAyC;IACzC,qBAAe,CAAA;IACf,0CAA0C;IAC1C,yBAAmB,CAAA;IACnB,2DAA2D;IAC3D,2BAAqB,CAAA;IACrB,iDAAiD;IACjD,gCAA0B,CAAA;IAC1B,iDAAiD;IACjD,6CAAuC,CAAA;IACvC,mCAAmC;IACnC,sCAAgC,CAAA;AAClC,CAAC,EApDW,EAAE,KAAF,EAAE,QAoDb;AAED,wCAAwC;AACxC,MAAM,CAAN,IAAY,OAWX;AAXD,WAAY,OAAO;IACjB,2BAA2B;IAC3B,gCAAqB,CAAA;IACrB,yBAAyB;IACzB,4BAAiB,CAAA;IACjB,4CAA4C;IAC5C,8BAAmB,CAAA;IACnB,0BAA0B;IAC1B,8BAAmB,CAAA;IACnB,wBAAwB;IACxB,0BAAe,CAAA;AACjB,CAAC,EAXW,OAAO,KAAP,OAAO,QAWlB;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,cASX;AATD,WAAY,cAAc;IACxB,iDAAiD;IACjD,yCAAuB,CAAA;IACvB,oDAAoD;IACpD,+CAA6B,CAAA;IAC7B,mDAAmD;IACnD,6CAA2B,CAAA;IAC3B,2BAA2B;IAC3B,uCAAqB,CAAA;AACvB,CAAC,EATW,cAAc,KAAd,cAAc,QASzB"}
+{"version":3,"file":"UI.js","sourceRoot":"","sources":["../../src/UI.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,MAAM,CAAN,IAAY,EAoDX;AApDD,WAAY,EAAE;IACZ,6CAA6C;IAC7C,wCAAkC,CAAA;IAClC,sCAAsC;IACtC,gCAA0B,CAAA;IAC1B,uEAAuE;IACvE,mBAAa,CAAA;IACb,wEAAwE;IACxE,yBAAmB,CAAA;IACnB;;;OAGG;IACH,iBAAW,CAAA;IACX,4EAA4E;IAC5E,8BAAwB,CAAA;IACxB,iFAAiF;IACjF,oCAA8B,CAAA;IAC9B,+DAA+D;IAC/D,6BAAuB,CAAA;IACvB,2DAA2D;IAC3D,2BAAqB,CAAA;IACrB,6CAA6C;IAC7C,oCAA8B,CAAA;IAC9B,sCAAsC;IACtC,uBAAiB,CAAA;IACjB,sBAAsB;IACtB,8BAAwB,CAAA;IACxB,6DAA6D;IAC7D,oCAA8B,CAAA;IAC9B,oCAAoC;IACpC,wCAAkC,CAAA;IAClC,iCAAiC;IACjC,qBAAe,CAAA;IACf,6CAA6C;IAC7C,uBAAiB,CAAA;IACjB,6DAA6D;IAC7D,iBAAW,CAAA;IACX,mCAAmC;IACnC,mBAAa,CAAA;IACb,mDAAmD;IACnD,qBAAe,CAAA;IACf,0CAA0C;IAC1C,yBAAmB,CAAA;IACnB,2DAA2D;IAC3D,2BAAqB,CAAA;IACrB,2CAA2C;IAC3C,gCAA0B,CAAA;IAC1B,kDAAkD;IAClD,6CAAuC,CAAA;IACvC,mCAAmC;IACnC,sCAAgC,CAAA;AAClC,CAAC,EApDW,EAAE,KAAF,EAAE,QAoDb;AAED,wCAAwC;AACxC,MAAM,CAAN,IAAY,OAWX;AAXD,WAAY,OAAO;IACjB,2BAA2B;IAC3B,gCAAqB,CAAA;IACrB,yBAAyB;IACzB,4BAAiB,CAAA;IACjB,4CAA4C;IAC5C,8BAAmB,CAAA;IACnB,0BAA0B;IAC1B,8BAAmB,CAAA;IACnB,wBAAwB;IACxB,0BAAe,CAAA;AACjB,CAAC,EAXW,OAAO,KAAP,OAAO,QAWlB;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,cASX;AATD,WAAY,cAAc;IACxB,iDAAiD;IACjD,yCAAuB,CAAA;IACvB,oDAAoD;IACpD,+CAA6B,CAAA;IAC7B,mDAAmD;IACnD,6CAA2B,CAAA;IAC3B,2BAA2B;IAC3B,uCAAqB,CAAA;AACvB,CAAC,EATW,cAAc,KAAd,cAAc,QASzB"}

package/dist/esm/selection/useRange.js

@@ -2,7 +2,7 @@ import React from "react";
 import { addToRange, dateMatchModifiers } from "../utils/index.js";
 import { rangeIncludesDate } from "../utils/rangeIncludesDate.js";
 export function useRange(props, dateLib) {
-    const { mode, disabled, selected: initiallySelected, required, onSelect } = props;
+    const { mode, disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;
     const { differenceInCalendarDays } = dateLib;
     const [selected, setSelected] = React.useState(initiallySelected);
     // Update the selected date if the required flag is set.
@@ -37,7 +37,9 @@ export function useRange(props, dateLib) {
             let newDate = newRange.from;
             while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
                 newDate = dateLib.addDays(newDate, 1);
-                if (disabled && dateMatchModifiers(newDate, disabled, dateLib)) {
+                if (excludeDisabled &&
+                    disabled &&
+                    dateMatchModifiers(newDate, disabled, dateLib)) {
                     newRange.from = triggerDate;
                     newRange.to = undefined;
                     break;

package/dist/esm/selection/useRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRange.js","sourceRoot":"","sources":["../../../src/selection/useRange.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useRange.js","sourceRoot":"","sources":["../../../src/selection/useRange.tsx"],"names":[],"mappings":"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"}

package/dist/esm/types/props.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { DeprecatedUI } from "../UI.js";
 import type { Locale } from "../lib/dateLib.js";
 import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared.js";
 /**
@@ -37,7 +38,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`.
      *
@@ -51,7 +52,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}.
      *
@@ -430,7 +431,9 @@ export interface PropsBase {
 export interface PropsSingleRequired {
     mode: "single";
     required: true;
+    /** The selected date. */
     selected: Date;
+    /** Event handler when a day is selected. */
     onSelect?: (selected: Date, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
 }
 /**
@@ -441,7 +444,9 @@ export interface PropsSingleRequired {
 export interface PropsSingle {
     mode: "single";
     required?: false | undefined;
+    /** The selected date. */
     selected?: Date | undefined;
+    /** Event handler when a day is selected. */
     onSelect?: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
 }
 /**
@@ -452,9 +457,13 @@ export interface PropsSingle {
 export interface PropsMultiRequired {
     mode: "multiple";
     required: true;
+    /** The selected dates. */
     selected: Date[];
+    /** Event handler when days are selected. */
     onSelect?: (selected: Date[], triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
+    /** The minimum number of selectable days. */
     min?: number;
+    /** The maximum number of selectable days. */
     max?: number;
 }
 /**
@@ -465,9 +474,13 @@ export interface PropsMultiRequired {
 export interface PropsMulti {
     mode: "multiple";
     required?: false | undefined;
+    /** The selected dates. */
     selected?: Date[] | undefined;
+    /** Event handler when days are selected. */
     onSelect?: (selected: Date[] | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
+    /** The minimum number of selectable days. */
     min?: number;
+    /** The maximum number of selectable days. */
     max?: number;
 }
 /**
@@ -478,9 +491,20 @@ export interface PropsMulti {
 export interface PropsRangeRequired {
     mode: "range";
     required: true;
+    disabled?: Matcher | Matcher[] | undefined;
+    /**
+     * When `true`, the range will reset when including a disabled day.
+     *
+     * @since V9.0.2
+     */
+    excludeDisabled?: boolean | undefined;
+    /** The selected range. */
     selected: DateRange;
+    /** Event handler when a range is selected. */
     onSelect?: (selected: DateRange, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
+    /** The minimum number of days to include in the range. */
     min?: number;
+    /** The maximum number of days to include in the range. */
     max?: number;
 }
 /**
@@ -491,9 +515,19 @@ export interface PropsRangeRequired {
 export interface PropsRange {
     mode: "range";
     required?: false | undefined;
-    selected?: DateRange | undefined;
     disabled?: Matcher | Matcher[] | undefined;
+    /**
+     * When `true`, the range will reset when including a disabled day.
+     *
+     * @since V9.0.2
+     */
+    excludeDisabled?: boolean | undefined;
+    /** The selected range. */
+    selected?: DateRange | undefined;
+    /** Event handler when the selection changes. */
     onSelect?: (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
+    /** The minimum number of days to include in the range. */
     min?: number;
+    /** The maximum number of days to include in the range. */
     max?: number;
 }

package/examples/ModifiersDisabled.test.tsx

@@ -5,13 +5,20 @@ import { render } from "@/test/render";
 
 import { ModifiersDisabled } from "./ModifiersDisabled";
 
+const today = new Date(2024, 6, 22);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
 const days = [
-  new Date(2024, 5, 2),
-  new Date(2024, 5, 9),
-  new Date(2024, 5, 29)
+  new Date(2024, 6, 6),
+  new Date(2024, 6, 13),
+  new Date(2024, 6, 20),
+  new Date(2024, 6, 27)
 ];
 
 test.each(days)("the day %s should be disabled", (day) => {
   render(<ModifiersDisabled />);
+  // return all month's
   expect(dateButton(day)).toBeDisabled();
 });

package/examples/ModifiersDisabled.tsx

@@ -3,11 +3,5 @@ import React from "react";
 import { DayPicker } from "react-day-picker";
 
 export function ModifiersDisabled() {
-  return (
-    <DayPicker
-      defaultMonth={new Date(2024, 5, 10)}
-      mode="range"
-      disabled={{ dayOfWeek: [0, 6] }}
-    />
-  );
+  return <DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />;
 }

package/examples/RangeExcludeDisabled.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function RangeExcludeDisabled() {
+  return (
+    <DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} excludeDisabled />
+  );
+}

package/examples/index.ts

@@ -43,6 +43,7 @@ export * from "./MultipleMonthsPaged";
 export * from "./NumberingSystem";
 export * from "./OutsideDays";
 export * from "./Range";
+export * from "./RangeExcludeDisabled";
 export * from "./RangeMinMax";
 export * from "./RangeShiftKey";
 export * from "./Rtl";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -135,7 +135,7 @@
   "devDependencies": {
     "@date-fns/utc": "^1.2.0",
     "@jest/types": "^29.6.3",
-    "@testing-library/dom": "^10.3.1",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -154,7 +154,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-testing-library": "^6.2.2",

package/src/DayPicker.tsx

@@ -42,7 +42,7 @@ import { isDateRange } from "./utils/typeguards.js";
  * @group DayPicker
  * @see https://daypicker.dev
  */
-export function DayPicker<T extends DayPickerProps>(props: T) {
+export function DayPicker(props: DayPickerProps) {
   const { components, formatters, labels, dateLib, classNames } = useMemo(
     () => ({
       dateLib: getDateLib(props.dateLib),
@@ -116,9 +116,9 @@ export function DayPicker<T extends DayPickerProps>(props: T) {
     isSelected,
     select,
     selected: selectedValue
-  } = useSelection<T>(props, dateLib) ?? {};
+  } = useSelection(props, dateLib) ?? {};
 
-  const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus<T>(
+  const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(
     props,
     calendar,
     getModifiers,
@@ -221,9 +221,9 @@ export function DayPicker<T extends DayPickerProps>(props: T) {
 
   const dataAttributes = getDataAttributes(props);
 
-  const contextValue: DayPickerContext<T> = {
-    selected: selectedValue as SelectedValue<T>,
-    select: select as SelectHandler<T>,
+  const contextValue: DayPickerContext<DayPickerProps> = {
+    selected: selectedValue as SelectedValue<DayPickerProps>,
+    select: select as SelectHandler<DayPickerProps>,
     isSelected,
     months,
     nextMonth,