diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 213404a6d7..5e5fca821a 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/README.md b/README.md index 42d439241c..d94f3a2863 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,11 @@ ➡️ **[react-day-picker.js.org](http://react-day-picker.js.org)** for guides, examples and API reference. - - - - - Shows a screenshot of the React DayPicker component in a browser’s window. - - + + + + Shows a screenshot of the React DayPicker component in a browser’s window. + ## Main features diff --git a/package.json b/package.json index 1be4566c15..1dfff0c01a 100644 --- a/package.json +++ b/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 ", "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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e04a37dd4a..6aed2797f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: specifier: ^29.6.3 version: 29.6.3 '@rollup/plugin-commonjs': - specifier: ^25.0.0 - version: 25.0.5(rollup@3.29.3) + specifier: ^25.0.7 + version: 25.0.7(rollup@3.29.3) '@rollup/plugin-node-resolve': specifier: ^15.2.3 version: 15.2.3(rollup@3.29.3) @@ -57,8 +57,8 @@ importers: specifier: ^5.62.0 version: 5.62.0(eslint@8.51.0)(typescript@4.9.5) date-fns: - specifier: ^2.30.0 - version: 2.30.0 + specifier: ^3.0.0 + version: 3.0.6 eslint: specifier: ^8.50.0 version: 8.51.0 @@ -2917,12 +2917,6 @@ packages: dependencies: regenerator-runtime: 0.13.11 - /@babel/runtime@7.22.15: - resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==} - engines: {node: '>=6.9.0'} - dependencies: - regenerator-runtime: 0.14.0 - /@babel/runtime@7.22.6: resolution: {integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==} engines: {node: '>=6.9.0'} @@ -4438,8 +4432,8 @@ packages: react: 18.2.0 dev: false - /@rollup/plugin-commonjs@25.0.5(rollup@3.29.3): - resolution: {integrity: sha512-xY8r/A9oisSeSuLCTfhssyDjo9Vp/eDiRLXkg1MXCcEEgEjPmLU+ZyDB20OOD0NlyDa/8SGbK5uIggF5XTx77w==} + /@rollup/plugin-commonjs@25.0.7(rollup@3.29.3): + resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==} engines: {node: '>=14.0.0'} peerDependencies: rollup: ^2.68.0||^3.0.0||^4.0.0 @@ -4452,7 +4446,7 @@ packages: estree-walker: 2.0.2 glob: 8.0.3 is-reference: 1.2.1 - magic-string: 0.27.0 + magic-string: 0.30.3 rollup: 3.29.3 dev: true @@ -7170,6 +7164,10 @@ packages: '@babel/runtime': 7.23.1 dev: true + /date-fns@3.0.6: + resolution: {integrity: sha512-W+G99rycpKMMF2/YD064b2lE7jJGUe+EjOES7Q8BIGY8sbNdbgcs9XFTZwvzc9Jx1f3k7LB7gZaZa7f8Agzljg==} + dev: true + /debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -8808,7 +8806,7 @@ packages: /history@4.10.1: resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==} dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.1 loose-envify: 1.4.0 resolve-pathname: 3.0.0 tiny-invariant: 1.2.0 @@ -10391,13 +10389,6 @@ packages: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true - /magic-string@0.27.0: - resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} - engines: {node: '>=12'} - dependencies: - '@jridgewell/sourcemap-codec': 1.4.15 - dev: true - /magic-string@0.30.3: resolution: {integrity: sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==} engines: {node: '>=12'} @@ -10544,7 +10535,7 @@ packages: prop-types: ^15.0.0 react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.1 prop-types: 15.8.1 react: 18.2.0 tiny-warning: 1.0.3 @@ -12085,7 +12076,7 @@ packages: react: ^16.6.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.22.15 + '@babel/runtime': 7.23.1 invariant: 2.2.4 prop-types: 15.8.1 react: 18.2.0 @@ -12131,7 +12122,7 @@ packages: react-loadable: '*' webpack: '>=4.41.1 || 5.x' dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.1 react-loadable: /@docusaurus/react-loadable@5.5.2(react@18.2.0) webpack: 5.88.2 @@ -12155,7 +12146,7 @@ packages: react: '>=15' react-router: '>=5' dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.1 react: 18.2.0 react-router: 5.3.3(react@18.2.0) @@ -12164,7 +12155,7 @@ packages: peerDependencies: react: '>=15' dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.1 history: 4.10.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -12178,7 +12169,7 @@ packages: peerDependencies: react: '>=15' dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.1 history: 4.10.1 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 @@ -12282,7 +12273,7 @@ packages: /regenerator-transform@0.15.0: resolution: {integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==} dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.1 /regenerator-transform@0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} diff --git a/src/components/Table/utils/daysToMonthWeeks.ts b/src/components/Table/utils/daysToMonthWeeks.ts index 0e96674b01..bfda3d0819 100644 --- a/src/components/Table/utils/daysToMonthWeeks.ts +++ b/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 diff --git a/src/components/Table/utils/getMonthWeeks.test.ts b/src/components/Table/utils/getMonthWeeks.test.ts index 78bc6aec4e..ba00503b30 100644 --- a/src/components/Table/utils/getMonthWeeks.test.ts +++ b/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); }); }); }); diff --git a/src/components/Table/utils/getMonthWeeks.ts b/src/components/Table/utils/getMonthWeeks.ts index 6d671a2c25..8b4c9a2141 100644 --- a/src/components/Table/utils/getMonthWeeks.ts +++ b/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[] { diff --git a/src/types/DayPickerBase.ts b/src/types/DayPickerBase.ts index 2150748545..84e827afca 100644 --- a/src/types/DayPickerBase.ts +++ b/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. diff --git a/src/types/EventHandlers.ts b/src/types/EventHandlers.ts index 18484d13d9..a5a1c764b6 100644 --- a/src/types/EventHandlers.ts +++ b/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'; diff --git a/src/types/Matchers.ts b/src/types/Matchers.ts index 4301e92d44..6119de94fd 100644 --- a/src/types/Matchers.ts +++ b/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}. */ diff --git a/website/examples/modifiers-today.tsx b/website/examples/modifiers-today.tsx index b15198b6d5..f4901afc3e 100644 --- a/website/examples/modifiers-today.tsx +++ b/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 =

Try clicking the today’s date.

; + const initialFooter =

Try clicking today’s date.

; const [footer, setFooter] = useState(initialFooter); const handleDayClick: DayClickEventHandler = (day, modifiers) => { if (modifiers.today) { - setFooter(

You clicked the today’s date.

); + setFooter(

You clicked today’s date.

); } else { setFooter(initialFooter); } diff --git a/website/test-integration/examples/modifiers-today.test.tsx b/website/test-integration/examples/modifiers-today.test.tsx index e5ef6c4d8b..77d468c4f5 100644 --- a/website/test-integration/examples/modifiers-today.test.tsx +++ b/website/test-integration/examples/modifiers-today.test.tsx @@ -30,7 +30,7 @@ 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'); }); }); @@ -38,8 +38,6 @@ 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.'); }); });