Merge branch 'main' into dependabot/npm_and_yarn/website/mdx-js/react…

…-3.0.0

CONTRIBUTING.md

@@ -10,7 +10,7 @@ There are many ways to help the development of DayPicker:
 - Opening PRs with new features, bug fixes and improved rendering performance
 - Align the source code to the latest Typescript / React practices
 - Helping with unit and integration tests
-- Proofreading [our website](http://react-day-picker-next.netlify.app) and the
+- Proofreading [our website](https://react-day-picker.js.org/) and the
   code documentation in the source files
 - Making the website more stylish
 - Help maintaining [the repository](https://github.com/gpbl/react-day-picker) on Github and triaging issues and PRs

README.md

@@ -4,13 +4,11 @@
 
 ➡️ **[react-day-picker.js.org](http://react-day-picker.js.org)** for guides, examples and API reference.
 
-<a href="http://react-day-picker.js.org">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcSet="https://user-images.githubusercontent.com/120693/188241991-19d0e8a1-230a-48c8-8477-3c90d4e36197.png"/>
-    <source media="(prefers-color-scheme: light)" srcSet="https://user-images.githubusercontent.com/120693/188238076-311ec6d1-503d-4c21-8ffe-d89faa60e40f.png"/>
-    <img alt="Shows a screenshot of the React DayPicker component in a browser’s window." width="900" />
-  </picture>
-</a>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcSet="https://user-images.githubusercontent.com/120693/188241991-19d0e8a1-230a-48c8-8477-3c90d4e36197.png"/>
+  <source media="(prefers-color-scheme: light)" srcSet="https://user-images.githubusercontent.com/120693/188238076-311ec6d1-503d-4c21-8ffe-d89faa60e40f.png"/>
+  <img alt="Shows a screenshot of the React DayPicker component in a browser’s window." width="900" />
+</picture>
 
 ## Main features
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.9.1",
+  "version": "8.10.0",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <[email protected]>",
   "homepage": "http://react-day-picker.js.org",
@@ -34,7 +34,7 @@
   ],
   "devDependencies": {
     "@jest/types": "^29.6.3",
-    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.1",
     "@rollup/plugin-typescript": "^11.1.3",
@@ -49,7 +49,7 @@
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.62.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.0.0",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -80,7 +80,7 @@
     "typescript": "~4.9.5"
   },
   "peerDependencies": {
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.28.0 || ^3.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "funding": {

src/components/Table/utils/daysToMonthWeeks.ts

@@ -20,7 +20,7 @@ export function daysToMonthWeeks(
     ISOWeek?: boolean;
     locale?: Locale;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    firstWeekContainsDate?: 1 | 4;
   }
 ): MonthWeek[] {
   const toWeek = options?.ISOWeek

src/components/Table/utils/getMonthWeeks.test.ts

@@ -65,12 +65,12 @@ describe('when using the "enGB" locale', () => {
       expect(weekNumbers[weekNumbers.length - 1]).toEqual(5);
     });
   });
-  describe('when setting a 3 as first day of year', () => {
+  describe('when setting thursday as first day of year', () => {
     const date = new Date(2022, 0);
-    const weeks = getMonthWeeks(date, { locale, firstWeekContainsDate: 3 });
-    test('the number of week should have number 53', () => {
+    const weeks = getMonthWeeks(date, { locale, firstWeekContainsDate: 4 });
+    test('the number of week should have number 52', () => {
       const weekNumbers = weeks.map((week) => week.weekNumber);
-      expect(weekNumbers[0]).toEqual(53);
+      expect(weekNumbers[0]).toEqual(52);
     });
   });
 });

src/components/Table/utils/getMonthWeeks.ts

@@ -26,7 +26,7 @@ export function getMonthWeeks(
     locale: Locale;
     useFixedWeeks?: boolean;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    firstWeekContainsDate?: 1 | 4;
     ISOWeek?: boolean;
   }
 ): MonthWeek[] {

src/types/DayPickerBase.ts

@@ -210,7 +210,7 @@ export interface DayPickerBase {
    *
    * See also {@link ISOWeek}.
    */
-  firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+  firstWeekContainsDate?: 1 | 4;
   /**
    * Use ISO week dates instead of the locale setting. See also
    * https://en.wikipedia.org/wiki/ISO_week_date.

src/types/EventHandlers.ts

@@ -6,7 +6,7 @@ import {
   TouchEvent
 } from 'react';
 
-import { DateRange } from 'types/Matchers';
+import { DateRange } from './Matchers';
 
 import { ActiveModifiers } from './Modifiers';
 

src/types/Matchers.ts

@@ -16,12 +16,12 @@
  * const dateMatcher: Matcher = new Date();
  *
  * // will match the days in the array
- * const arrayMatcher: Matcher = [new Date(2019, 1, 2);, new Date(2019, 1, 4)];
+ * const arrayMatcher: Matcher = [new Date(2019, 1, 2), new Date(2019, 1, 4)];
  *
  * // will match days after the 2nd of February 2019
- * const afterMatcher: DateAfter = { after: new Date(2019, 1, 2); };
+ * const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) };
  *  // will match days before the 2nd of February 2019 }
- * const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2); };
+ * const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) };
  *
  * // will match Sundays
  * const dayOfWeekMatcher: DayOfWeek = {
@@ -30,13 +30,13 @@
  *
  * // will match the included days, except the two dates
  * const intervalMatcher: DateInterval = {
- *    after: new Date(2019, 1, 2);,
+ *    after: new Date(2019, 1, 2),
  *    before: new Date(2019, 1, 5)
  * };
  *
  * // will match the included days, including the two dates
  * const rangeMatcher: DateRange = {
- *    from: new Date(2019, 1, 2);,
+ *    from: new Date(2019, 1, 2),
  *    to: new Date(2019, 1, 5)
  * };
  *
@@ -72,7 +72,7 @@ export type DateInterval = { before: Date; after: Date };
 /** A matcher to match a range of dates. The range can be open. Differently from {@link DateInterval}, the dates here are included. */
 export type DateRange = { from: Date | undefined; to?: Date | undefined };
 
-/** A matcher to match a date being one of the specified days of the week (`0-7`, where `0` is Sunday). */
+/** A matcher to match a date being one of the specified days of the week (`0-6`, where `0` is Sunday). */
 export type DayOfWeek = { dayOfWeek: number[] };
 
 /** Returns true if `matcher` is of type {@link DateInterval}. */

website/examples/modifiers-today.tsx

@@ -3,12 +3,12 @@ import React, { useState } from 'react';
 import { DayClickEventHandler, DayPicker } from 'react-day-picker';
 
 export default function App() {
-  const initialFooter = <p>Try clicking the today’s date.</p>;
+  const initialFooter = <p>Try clicking today’s date.</p>;
   const [footer, setFooter] = useState(initialFooter);
 
   const handleDayClick: DayClickEventHandler = (day, modifiers) => {
     if (modifiers.today) {
-      setFooter(<p>You clicked the today’s date.</p>);
+      setFooter(<p>You clicked today’s date.</p>);
     } else {
       setFooter(initialFooter);
     }

website/test-integration/examples/modifiers-today.test.tsx

@@ -30,16 +30,14 @@ describe('when rendering a month that contains today', () => {
 describe('when the today date is clicked', () => {
   beforeEach(async () => act(() => user.click(getDayButton(today))));
   test('should update the footer', () => {
-    expect(getTableFooter()).toHaveTextContent('You clicked the today’s date');
+    expect(getTableFooter()).toHaveTextContent('You clicked today’s date');
   });
 });
 
 describe('when another date is clicked', () => {
   const date = addDays(today, 1);
   beforeEach(async () => act(() => user.click(getDayButton(date))));
   test('should update the footer', () => {
-    expect(getTableFooter()).toHaveTextContent(
-      'Try clicking the today’s date.'
-    );
+    expect(getTableFooter()).toHaveTextContent('Try clicking today’s date.');
   });
 });