react-day-picker 8.8.2 → 8.9.1

package/dist/style.css

@@ -1,12 +1,13 @@
 .rdp {
-  --rdp-cell-size: 40px;
-  --rdp-caption-font-size: 18px;
-  --rdp-accent-color: #0000ff;
-  --rdp-background-color: #e7edff;
-  --rdp-accent-color-dark: #3003e1;
-  --rdp-background-color-dark: #180270;
+  --rdp-cell-size: 40px; /* Size of the day cells. */
+  --rdp-caption-font-size: 18px; /* Font size for the caption labels. */
+  --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */
+  --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */
+  --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */
+  --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
+  --rdp-selected-color: #fff; /* Color of selected day text */
 
   margin: 1em;
 }
@@ -270,7 +271,7 @@
 .rdp-day_selected,
 .rdp-day_selected:focus-visible,
 .rdp-day_selected:hover {
-  color: white;
+  color: var(--rdp-selected-color);
   opacity: 1;
   background-color: var(--rdp-accent-color);
 }

package/dist/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.css"],"names":[],"mappings":"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","file":"style.css","sourcesContent":[".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}\n"]}
+{"version":3,"sources":["style.css"],"names":[],"mappings":"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","file":"style.css","sourcesContent":[".rdp {\n  --rdp-cell-size: 40px; /* Size of the day cells. */\n  --rdp-caption-font-size: 18px; /* Font size for the caption labels. */\n  --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */\n  --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */\n  --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */\n  --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n  --rdp-selected-color: #fff; /* Color of selected day text */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: var(--rdp-selected-color);\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}\n"]}

package/dist/style.module.css

@@ -1,12 +1,13 @@
 .root {
-  --rdp-cell-size: 40px;
-  --rdp-caption-font-size: 18px;
-  --rdp-accent-color: #0000ff;
-  --rdp-background-color: #e7edff;
-  --rdp-accent-color-dark: #3003e1;
-  --rdp-background-color-dark: #180270;
+  --rdp-cell-size: 40px; /* Size of the day cells. */
+  --rdp-caption-font-size: 18px; /* Font size for the caption labels. */
+  --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */
+  --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */
+  --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */
+  --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
+  --rdp-selected-color: #fff; /* Color of selected day text */
 
   margin: 1em;
 }
@@ -270,7 +271,7 @@
 .day_selected,
 .day_selected:focus-visible,
 .day_selected:hover {
-  color: white;
+  color: var(--rdp-selected-color);
   opacity: 1;
   background-color: var(--rdp-accent-color);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.8.2",
+  "version": "8.9.1",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",
@@ -33,50 +33,50 @@
     "tsconfig.json"
   ],
   "devDependencies": {
-    "@jest/types": "^29.5.0",
+    "@jest/types": "^29.6.3",
     "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.1",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.1",
-    "@types/node": "^18.15.13",
-    "@types/react-dom": "^18.2.6",
-    "@types/react": "^18.0.38",
-    "@types/testing-library__jest-dom": "^5.14.6",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^20.6.5",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.13",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.0",
-    "date-fns": "^2.29.3",
+    "@typescript-eslint/parser": "^5.62.0",
+    "date-fns": "^2.30.0",
+    "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.4.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.10.3",
-    "eslint": "^8.39.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest": "^29.5.0",
+    "eslint-plugin-testing-library": "^5.11.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mockdate": "^3.0.5",
+    "postcss": "^8.4.30",
     "postcss-d-ts": "^1.2.0",
     "postcss-typescript-d-ts": "^1.0.0",
-    "postcss": "^8.4.23",
     "prettier": "^2.8.8",
+    "react": "^18.2.0",
     "react-classnaming": "^0.16.4",
     "react-dom": "^18.2.0",
-    "react": "^18.2.0",
     "rimraf": "^5.0.1",
-    "rollup-plugin-copy": "^3.4.0",
+    "rollup": "^3.29.3",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup": "^3.20.7",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "tsc-alias": "^1.8.6",
-    "tslib": "^2.5.0",
+    "tsc-alias": "^1.8.8",
+    "tslib": "^2.6.2",
     "typescript": "~4.9.5"
   },
   "peerDependencies": {

package/src/DayPicker.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DayPickerDefaultProps } from 'types/DayPickerDefault';
 import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
 import { DayPickerRangeProps } from 'types/DayPickerRange';

package/src/components/Button/Button.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 
 import { customRender } from 'test/render';

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 

package/src/components/Caption/Caption.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/Caption/Caption.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { CaptionDropdowns } from 'components/CaptionDropdowns';
 import { CaptionLabel } from 'components/CaptionLabel';
 import { CaptionNavigation } from 'components/CaptionNavigation';

package/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { setMonth, setYear } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

package/src/components/CaptionDropdowns/CaptionDropdowns.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { addMonths } from 'date-fns';
 
 import { CaptionProps } from 'components/Caption/Caption';

package/src/components/CaptionLabel/CaptionLabel.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 import { getMonthCaption } from 'test/selectors';
 import { freezeBeforeAll } from 'test/utils';

package/src/components/CaptionLabel/CaptionLabel.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 
 /** The props for the {@link CaptionLabel} component. */

package/src/components/CaptionNavigation/CaptionNavigation.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { addMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/CaptionNavigation/CaptionNavigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MouseEventHandler } from 'react';
 
 import { isSameMonth } from 'date-fns';
 
@@ -25,12 +25,12 @@ export function CaptionNavigation(props: CaptionProps): JSX.Element {
   const hideNext = numberOfMonths > 1 && (isFirst || !isLast);
   const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
 
-  const handlePreviousClick: React.MouseEventHandler = () => {
+  const handlePreviousClick: MouseEventHandler = () => {
     if (!previousMonth) return;
     goToMonth(previousMonth);
   };
 
-  const handleNextClick: React.MouseEventHandler = () => {
+  const handleNextClick: MouseEventHandler = () => {
     if (!nextMonth) return;
     goToMonth(nextMonth);
   };

package/src/components/Day/Day.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/Day/Day.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { useDayRender } from 'hooks/useDayRender';
 

package/src/components/DayContent/DayContent.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { es } from 'date-fns/locale';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/DayContent/DayContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 import { ActiveModifiers } from 'types/Modifiers';
 

package/src/components/Dropdown/Dropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { fireEvent, screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+import {
+  ChangeEventHandler,
+  CSSProperties,
+  ReactNode,
+  SelectHTMLAttributes
+} from 'react';
 
 import { IconDropdown } from 'components/IconDropdown';
 import { useDayPicker } from 'contexts/DayPicker';
@@ -8,14 +13,14 @@ export interface DropdownProps {
   /** The name attribute of the element. */
   name?: string;
   /** The caption displayed to replace the hidden select. */
-  caption?: React.ReactNode;
-  children?: React.SelectHTMLAttributes<HTMLSelectElement>['children'];
+  caption?: ReactNode;
+  children?: SelectHTMLAttributes<HTMLSelectElement>['children'];
   className?: string;
   ['aria-label']?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   /** The selected value. */
   value?: string | number;
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  onChange?: ChangeEventHandler<HTMLSelectElement>;
 }
 
 /**

package/src/components/Footer/Footer.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 import { getTableFooter, queryTableFooter } from 'test/selectors';
 

package/src/components/Footer/Footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 
 export interface FooterProps {

package/src/components/Head/Head.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { RenderResult, screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/Head/Head.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { HeadRow } from 'components/HeadRow';
 import { useDayPicker } from 'contexts/DayPicker';
 

package/src/components/HeadRow/HeadRow.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { RenderResult } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/HeadRow/HeadRow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 
 import { getWeekdays } from './utils';

package/src/components/IconDropdown/IconDropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 
 import { IconDropdown } from './IconDropdown';

package/src/components/IconDropdown/IconDropdown.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { StyledComponent } from 'types/Styles';
 
 /**

package/src/components/IconLeft/IconLeft.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 
 import { IconLeft } from './IconLeft';

package/src/components/IconLeft/IconLeft.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { StyledComponent } from 'types/Styles';
 
 /**

package/src/components/IconRight/IconRight.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 
 import { IconRight } from './IconRight';

package/src/components/IconRight/IconRight.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { StyledComponent } from 'types/Styles';
 
 /**

package/src/components/Month/Month.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

package/src/components/Month/Month.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Caption } from 'components/Caption';
 import { Table } from 'components/Table';
 import { useDayPicker } from 'contexts/DayPicker';

package/src/components/Months/Months.test.tsx

@@ -0,0 +1,27 @@
+import { customRender } from 'test/render';
+
+import { Months } from './Months';
+
+let root: HTMLElement;
+
+test('should use the default class name', () => {
+  const view = customRender(<Months>foo</Months>, {});
+  root = view.container.firstChild as HTMLElement;
+  expect(root).toHaveClass('rdp-months');
+});
+
+test('should use a custom class name', () => {
+  const view = customRender(<Months>foo</Months>, {
+    classNames: { months: 'foo' }
+  });
+  root = view.container.firstChild as HTMLElement;
+  expect(root).toHaveClass('foo');
+});
+
+test('should use a custom style', () => {
+  const view = customRender(<Months>foo</Months>, {
+    styles: { months: { color: 'red' } }
+  });
+  root = view.container.firstChild as HTMLElement;
+  expect(root).toHaveStyle({ color: 'red' });
+});

package/src/components/Months/Months.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** The props for the {@link Months} component. */
+export type MonthsProps = { children: ReactNode };
+
+/**
+ * Render the wrapper for the month grids.
+ */
+export function Months(props: MonthsProps): JSX.Element {
+  const { classNames, styles } = useDayPicker();
+
+  return (
+    <div className={classNames.months} style={styles.months}>
+      {props.children}
+    </div>
+  );
+}

package/src/components/Months/index.ts

@@ -0,0 +1 @@
+export * from './Months';

package/src/components/MonthsDropdown/MonthsDropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { addMonths, differenceInMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

package/src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ChangeEventHandler } from 'react';
 
 import { isSameYear, setMonth, startOfMonth } from 'date-fns';
 
@@ -46,7 +46,7 @@ export function MonthsDropdown(props: MonthsDropdownProps): JSX.Element {
     }
   }
 
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
     const selectedMonth = Number(e.target.value);
     const newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth);
     props.onChange(newMonth);

package/src/components/Navigation/Navigation.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';

package/src/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MouseEventHandler } from 'react';
 
 import { IconLeft } from 'components/IconLeft';
 import { IconRight } from 'components/IconRight';
@@ -19,9 +19,9 @@ export interface NavigationProps {
   /** Hide the next button. */
   hideNext: boolean;
   /** Event handler when the next button is clicked. */
-  onNextClick: React.MouseEventHandler<HTMLButtonElement>;
+  onNextClick: MouseEventHandler<HTMLButtonElement>;
   /** Event handler when the previous button is clicked. */
-  onPreviousClick: React.MouseEventHandler<HTMLButtonElement>;
+  onPreviousClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 /** A component rendering the navigation buttons or the drop-downs. */