Migrate to React 18

package.json

@@ -33,19 +33,18 @@
   "peerDependencies": {
     "date-fns": "^2.0.0",
     "prop-types": "^15",
-    "react": "^16",
-    "react-dom": "^16"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@babel/core": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.8.3",
     "@rollup/plugin-commonjs": "^11.0.1",
     "@rollup/plugin-node-resolve": "^7.0.0",
-    "@testing-library/dom": "^6.11.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
-    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@types/date-fns": "^2.6.0",
     "autoprefixer": "^9.7.3",
     "date-fns": "^2.9.0",
@@ -64,16 +63,17 @@
     "postcss-cli": "^7.1.0",
     "prism-react-renderer": "^1.0.2",
     "prop-types": "^15",
-    "react": "^16",
-    "react-dom": "^16",
-    "react-test-renderer": "^16.12.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-test-renderer": "^18.3.1",
     "rollup": "^1.29.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-sass": "^1.2.2",
     "sass": "^1.25.0"
   },
   "dependencies": {
+    "caniuse-lite": "^1.0.30001684",
     "classnames": "^2.2.6"
   }
 }

src/Calendar.js

@@ -1,11 +1,11 @@
-import React from 'react'
-import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
 import { startOfMonth } from 'date-fns'
-import { isSelectable, mergeModifiers } from './utils'
-import useControllableState from './useControllableState'
+import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
+import React from 'react'
+import CalendarGrid from './CalendarGrid'
 import CalendarNavigation from './CalendarNavigation'
 import CalendarWeekHeader from './CalendarWeekHeader'
-import CalendarGrid from './CalendarGrid'
+import useControllableState from './useControllableState'
+import { isSelectable, mergeModifiers } from './utils'
 
 export default function Calendar({
   locale,

src/CalendarDay.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import { bool, instanceOf, func, number, object, objectOf, string } from 'prop-types'
-import { getDate, format, isToday } from 'date-fns'
 import classNames from 'classnames'
+import { format, getDate, isToday } from 'date-fns'
+import { bool, func, instanceOf, number, object, objectOf, string } from 'prop-types'
+import React from 'react'
 
 const defaultModifiersClassNames = {
   today: '-today',
@@ -18,10 +18,10 @@ export default function CalendarDay({
   date,
   height,
   locale,
-  modifiers: receivedModifiers,
+  modifiers: receivedModifiers = {},
   modifiersClassNames: receivedModifiersClassNames,
-  onClick,
-  onHover
+  onClick = () => {},
+  onHover = () => {}
 }) {
   const dayOfMonth = getDate(date)
   const dayClassNames = {}
@@ -71,9 +71,3 @@ CalendarDay.propTypes = {
   onHover: func,
   onClick: func
 }
-
-CalendarDay.defaultProps = {
-  modifiers: {},
-  onHover: () => {},
-  onClick: () => {}
-}

src/CalendarGrid.js

@@ -1,10 +1,10 @@
-import React from 'react'
-import { bool, instanceOf, func, number, object, objectOf, string } from 'prop-types'
-import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth } from 'date-fns'
 import classNames from 'classnames'
-import useGrid from './useGrid'
-import { ORIGIN_BOTTOM, ORIGIN_TOP } from './constants'
+import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth } from 'date-fns'
+import { bool, func, instanceOf, number, object, objectOf, string } from 'prop-types'
+import React from 'react'
 import CalendarDay from './CalendarDay'
+import { ORIGIN_BOTTOM, ORIGIN_TOP } from './constants'
+import useGrid from './useGrid'
 
 const computeModifiers = (modifiers, date) => {
   const computedModifiers = {}
@@ -19,13 +19,13 @@ const computeModifiers = (modifiers, date) => {
 export default function CalendarGrid({
   locale,
   month,
-  modifiers,
+  modifiers = {},
   modifiersClassNames,
   onMonthChange,
   onDayHover,
   onDayClick,
-  transitionDuration,
-  touchDragEnabled
+  transitionDuration = 500,
+  touchDragEnabled = true
 }) {
   const grid = useGrid({ locale, month: startOfMonth(month), onMonthChange, transitionDuration, touchDragEnabled })
   const { startDate, endDate, cellHeight, containerElementRef, isWide, offset, origin, transition } = grid
@@ -81,12 +81,6 @@ CalendarGrid.propTypes = {
   onMonthChange: func.isRequired,
   onDayHover: func,
   onDayClick: func,
-  transitionDuration: number.isRequired,
+  transitionDuration: number,
   touchDragEnabled: bool
 }
-
-CalendarGrid.defaultProps = {
-  modifiers: {},
-  transitionDuration: 500,
-  touchDragEnabled: true
-}

src/CalendarWeekHeader.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import { eachDayOfInterval, endOfWeek, format, startOfWeek } from 'date-fns'
 import { object, string } from 'prop-types'
-import { eachDayOfInterval, endOfWeek, startOfWeek, format } from 'date-fns'
+import React from 'react'
 
-export default function CalendarWeekHeader({ locale, weekdayFormat }) {
+export default function CalendarWeekHeader({ locale, weekdayFormat = 'eee' }) {
   const today = new Date()
 
   const weekDays = eachDayOfInterval({
@@ -25,7 +25,3 @@ CalendarWeekHeader.propTypes = {
   locale: object.isRequired,
   weekdayFormat: string
 }
-
-CalendarWeekHeader.defaultProps = {
-  weekdayFormat: 'eee'
-}

src/DatePicker.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react'
 import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
+import React, { useState } from 'react'
+import DatePickerCalendar from './DatePickerCalendar'
+import Popover from './Popover'
 import useDateInput from './useDateInput'
 import useDetectTouch from './useDetectTouch'
 import useOutsideClickHandler from './useOutsideClickHandler'
-import DatePickerCalendar from './DatePickerCalendar'
-import Popover from './Popover'
 
 export default function DatePicker({
   children,
   locale,
   date,
-  onDateChange,
+  onDateChange = () => {},
   format,
   minimumDate,
   maximumDate,
@@ -97,7 +97,3 @@ DatePicker.propTypes = {
   weekdayFormat: string,
   touchDragEnabled: bool
 }
-
-DatePicker.defaultProps = {
-  onDateChange: () => {}
-}

src/DateRangePicker.js

@@ -1,25 +1,25 @@
-import React, { useState } from 'react'
 import { bool, func, instanceOf, number, object, objectOf, string } from 'prop-types'
-import { isRangeLengthValid } from './utils'
-import { START_DATE, END_DATE } from './constants'
-import useDateInput from './useDateInput'
-import useOutsideClickHandler from './useOutsideClickHandler'
-import useDetectTouch from './useDetectTouch'
+import React, { useState } from 'react'
+import { END_DATE, START_DATE } from './constants'
 import DateRangePickerCalendar from './DateRangePickerCalendar'
 import Popover from './Popover'
+import useDateInput from './useDateInput'
+import useDetectTouch from './useDetectTouch'
+import useOutsideClickHandler from './useOutsideClickHandler'
+import { isRangeLengthValid } from './utils'
 
 export default function DateRangePicker({
   children,
   locale,
   startDate,
   endDate,
-  onStartDateChange,
-  onEndDateChange,
+  onStartDateChange = () => {},
+  onEndDateChange = () => {},
   format,
   minimumDate,
   maximumDate,
-  minimumLength,
-  maximumLength,
+  minimumLength = 0,
+  maximumLength = null,
   modifiers,
   modifiersClassNames,
   weekdayFormat,
@@ -133,10 +133,3 @@ DateRangePicker.propTypes = {
   weekdayFormat: string,
   touchDragEnabled: bool
 }
-
-DateRangePicker.defaultProps = {
-  onStartDateChange: () => {},
-  onEndDateChange: () => {},
-  minimumLength: 0,
-  maximumLength: null
-}

src/DateRangePickerCalendar.js

@@ -1,25 +1,25 @@
-import React, { useState } from 'react'
+import { differenceInDays, isAfter, isBefore, isSameDay, startOfDay, startOfMonth } from 'date-fns'
 import { bool, func, instanceOf, number, object, objectOf, oneOf, string } from 'prop-types'
-import { differenceInDays, isSameDay, isAfter, isBefore, startOfMonth, startOfDay } from 'date-fns'
-import { isRangeLengthValid, isSelectable, mergeModifiers, setTime } from './utils'
-import { START_DATE, END_DATE } from './constants'
-import useControllableState from './useControllableState'
+import React, { useState } from 'react'
 import Calendar from './Calendar'
+import { END_DATE, START_DATE } from './constants'
+import useControllableState from './useControllableState'
+import { isRangeLengthValid, isSelectable, mergeModifiers, setTime } from './utils'
 
 export default function DateRangePickerCalendar({
   locale,
   startDate,
   endDate,
   focus,
   month: receivedMonth,
-  onStartDateChange,
-  onEndDateChange,
-  onFocusChange,
+  onStartDateChange = () => {},
+  onEndDateChange = () => {},
+  onFocusChange = () => {},
   onMonthChange,
   minimumDate,
   maximumDate,
-  minimumLength,
-  maximumLength,
+  minimumLength = 0,
+  maximumLength = null,
   modifiers: receivedModifiers,
   modifiersClassNames,
   weekdayFormat,
@@ -118,9 +118,9 @@ DateRangePickerCalendar.propTypes = {
   endDate: instanceOf(Date),
   focus: oneOf([START_DATE, END_DATE]),
   month: instanceOf(Date),
-  onStartDateChange: func.isRequired,
-  onEndDateChange: func.isRequired,
-  onFocusChange: func.isRequired,
+  onStartDateChange: func,
+  onEndDateChange: func,
+  onFocusChange: func,
   onMonthChange: func,
   minimumDate: instanceOf(Date),
   maximumDate: instanceOf(Date),
@@ -131,11 +131,3 @@ DateRangePickerCalendar.propTypes = {
   weekdayFormat: string,
   touchDragEnabled: bool
 }
-
-DateRangePickerCalendar.defaultProps = {
-  onStartDateChange: () => {},
-  onEndDateChange: () => {},
-  onFocusChange: () => {},
-  minimumLength: 0,
-  maximumLength: null
-}

src/useDetectTouch.js

@@ -10,10 +10,10 @@ export default function useDetectTouch() {
     }
 
     const removeListener = () => {
-      document.removeEventListener('touchstart', handleTouch)
+      document.removeEventListener('touchstart', handleTouch, { passive: true })
     }
 
-    document.addEventListener('touchstart', handleTouch)
+    document.addEventListener('touchstart', handleTouch, { passive: true })
     return removeListener
   }, [])
 

src/useGrid.js

@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect, useEffect, useReducer } from 'react'
+import { useEffect, useLayoutEffect, useReducer, useRef } from 'react'
 
 import {
   addMonths,
@@ -200,14 +200,14 @@ export default function useGrid({ locale, month: currentMonth, onMonthChange, tr
         }
       }
 
-      containerElement.addEventListener('touchstart', handleDragStart)
-      containerElement.addEventListener('touchmove', handleDrag)
-      containerElement.addEventListener('touchend', handleDragEnd)
+      containerElement.addEventListener('touchstart', handleDragStart, { passive: true })
+      containerElement.addEventListener('touchmove', handleDrag, { passive: true })
+      containerElement.addEventListener('touchend', handleDragEnd, { passive: true })
 
       return () => {
-        containerElement.removeEventListener('touchstart', handleDragStart)
-        containerElement.removeEventListener('touchmove', handleDrag)
-        containerElement.removeEventListener('touchend', handleDragEnd)
+        containerElement.removeEventListener('touchstart', handleDragStart, { passive: true })
+        containerElement.removeEventListener('touchmove', handleDrag, { passive: true })
+        containerElement.removeEventListener('touchend', handleDragEnd, { passive: true })
       }
     }
   })

src/useOutsideClickHandler.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 export default function useOutsideClickHandler(callback) {
   const refA = useRef()
@@ -16,10 +16,10 @@ export default function useOutsideClickHandler(callback) {
       }
     }
 
-    document.addEventListener('click', handleOutsideClick)
+    document.addEventListener('click', handleOutsideClick, { passive: true })
 
     return () => {
-      document.removeEventListener('click', handleOutsideClick)
+      document.removeEventListener('click', handleOutsideClick, { passive: true })
     }
   }, [callback])
 

test/Calendar.test.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import '@testing-library/jest-dom'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
 import { format } from 'date-fns'
 import { enGB as locale } from 'date-fns/locale'
+import React from 'react'
 import Calendar from '../src/Calendar'
 
 describe('Calendar', () => {

test/DatePicker.test.js

@@ -1,9 +1,9 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
+import { fireEvent, render } from '@testing-library/react'
+import classNames from 'classnames'
 import { format, subMonths } from 'date-fns'
 import { enGB as locale } from 'date-fns/locale'
-import classNames from 'classnames'
+import React from 'react'
 import DatePicker from '../src/DatePicker'
 
 describe('DatePicker', () => {

test/DatePickerCalendar.test.js

@@ -1,8 +1,8 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
+import { fireEvent, render } from '@testing-library/react'
 import { format, startOfMonth, subMonths } from 'date-fns'
 import { enGB as locale } from 'date-fns/locale'
+import React from 'react'
 import DatePickerCalendar from '../src/DatePickerCalendar'
 
 describe('DatePickerCalendar', () => {