Update to support React 18

.eslintrc.json

@@ -8,7 +8,7 @@
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended"
   ],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": ["react", "prettier", "jsx-a11y"],
   "rules": {
     "prettier/prettier": "error",

package.json

@@ -33,39 +33,40 @@
   },
   "homepage": "https://neosiae.github.io/react-aria-offcanvas",
   "dependencies": {
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "run-event-handler-once": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^16.4.2 || ^17.0.0",
-    "react-dom": "^16.4.2 || ^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.7",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.8.3",
-    "@testing-library/dom": "^5.6.1",
-    "@testing-library/react": "^8.0.9",
-    "babel-eslint": "^10.1.0",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "gh-pages": "^2.2.0",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.9.0",
-    "jest-dom": "^3.5.0",
-    "prettier": "^1.19.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "gh-pages": "^6.0.0",
+    "html-webpack-plugin": "^5.5.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }

src/OffCanvas.js

@@ -219,19 +219,19 @@ export default class OffCanvas extends Component {
     }
   }
 
-  parentHandlesClose = event => {
+  parentHandlesClose = (event) => {
     if (this.props.onClose) {
       this.props.onClose(event)
     }
   }
 
-  handleOverlayClick = event => {
+  handleOverlayClick = (event) => {
     if (this.props.closeOnOverlayClick && event.target === this.overlay) {
       this.parentHandlesClose(event)
     }
   }
 
-  handleKeyDown = event => {
+  handleKeyDown = (event) => {
     if (this.props.trapFocusAfterOpen && event.keyCode === TAB_KEY) {
       focusTrap(event, this.content)
     }
@@ -242,11 +242,11 @@ export default class OffCanvas extends Component {
     }
   }
 
-  setOverlayRef = overlay => {
+  setOverlayRef = (overlay) => {
     this.overlay = overlay
   }
 
-  setContentRef = content => {
+  setContentRef = (content) => {
     this.content = content
   }
 
@@ -313,14 +313,8 @@ export default class OffCanvas extends Component {
   }
 
   render() {
-    const {
-      isOpen,
-      role,
-      label,
-      labelledby,
-      className,
-      overlayClassName,
-    } = this.props
+    const { isOpen, role, label, labelledby, className, overlayClassName } =
+      this.props
 
     const styles = this.buildStyles()
 

src/helpers/focusManager.js

@@ -13,7 +13,7 @@ export const returnFocus = () => {
   }
 }
 
-export const focusFirstChild = element => {
+export const focusFirstChild = (element) => {
   const tabbable = setTabbable(element)
   tabbable.first.focus()
 }

src/helpers/focusTrap.js

@@ -2,7 +2,7 @@ import { setTabbable } from './tabbable'
 
 const TAB_KEY = 9
 
-const isTabKey = event => event.keyCode === TAB_KEY
+const isTabKey = (event) => event.keyCode === TAB_KEY
 
 // Traps focus in an element.
 const focusTrap = (event, element) => {

src/helpers/static.js

@@ -4,4 +4,4 @@ export const canUseDOM = !!(
   window.document.createElement
 )
 
-export const canUseRoot = root => !!root
+export const canUseRoot = (root) => !!root

src/helpers/styles.js

@@ -1,11 +1,11 @@
 // Sets the vertical or horizontal position of an element.
-const setPosition = position => {
+const setPosition = (position) => {
   let obj = {}
   obj[position] = '0'
   return obj
 }
 
-const setContentTransformValue = position => {
+const setContentTransformValue = (position) => {
   if (position === 'left') {
     return `translateX(-100%)`
   } else if (position === 'right') {
@@ -30,7 +30,7 @@ const setPushTransformValue = (width, height, position) => {
 }
 
 // Checks whether an element has a className.
-export const hasClassName = element => element && element.classList.length > 0
+export const hasClassName = (element) => element && element.classList.length > 0
 
 export const shouldShowContent = (content, isOpen) => {
   if (content) {
@@ -84,7 +84,7 @@ export const createPushStyles = (
     transform: isOpen ? setPushTransformValue(width, height, position) : '',
   }
 
-  return function(element) {
+  return function (element) {
     if (element) {
       // Apply the push styles
       for (const property of Object.keys(styles)) {
@@ -101,13 +101,13 @@ export const applyInitialPushStyles = (element, width, height, position) => {
 }
 
 // Shows/hides the horizontal scrollbar.
-export const shouldHideHorizontalScrollbar = isOpen => {
+export const shouldHideHorizontalScrollbar = (isOpen) => {
   const body = document.querySelector('body')
   body.style.overflowX = isOpen ? 'hidden' : ''
 }
 
 // should lock the body scroll when open
-export const shouldLockBodyScroll = isOpen => {
+export const shouldLockBodyScroll = (isOpen) => {
   const body = document.querySelector('body')
   body.style.overflowY = isOpen ? 'hidden' : ''
 }

src/helpers/tabbable.js

@@ -11,14 +11,14 @@ const tabbable = [
   'video[controls]',
 ]
 
-const findTabbable = element => {
+const findTabbable = (element) => {
   if (element) {
     const tabbableElements = element.querySelectorAll(tabbable.join(','))
     return tabbableElements
   }
 }
 
-export const setTabbable = element => {
+export const setTabbable = (element) => {
   if (element) {
     const tabbableElements = findTabbable(element)
 

tests/OffCanvas.events.spec.js

@@ -1,5 +1,9 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, cleanup, fireEvent } from '@testing-library/react'
 import OffCanvas from '../src/index'
 import App from './helpers/components'
 

tests/OffCanvas.snaps.spec.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react'
 import ReactDOM from 'react-dom'
 import renderer from 'react-test-renderer'

tests/OffCanvas.spec.js

@@ -1,20 +1,24 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react'
 import OffCanvas from '../src/index'
+import '@testing-library/jest-dom'
 import { render, fireEvent, cleanup } from '@testing-library/react'
-import { bindElementToQueries } from '@testing-library/dom'
+import { getQueriesForElement } from '@testing-library/dom'
 import { getContent, extractNumber } from './helpers/tests'
-import 'jest-dom/extend-expect'
 import App from './helpers/components'
 
-const bodyUtils = bindElementToQueries(document.body)
+const bodyUtils = getQueriesForElement(document.body)
 
 function renderPortal() {
   const renderUtils = render(<App />)
   const portalNode = bodyUtils.getByTestId('offcanvas-portal')
   return {
     portalNode,
     ...renderUtils,
-    ...bindElementToQueries(portalNode),
+    ...getQueriesForElement(portalNode),
   }
 }
 

tests/OffCanvas.styles.spec.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react'
 import { render, cleanup, fireEvent } from '@testing-library/react'
 import { getOverlay, getContent } from './helpers/tests'

tests/__snapshots__/OffCanvas.snaps.spec.js.snap

@@ -5,7 +5,7 @@ exports[`OffCanvas renders correctly when closed 1`] = `
   data-testid="overlay"
   onClick={[Function]}
   style={
-    Object {
+    {
       "background": "rgba(255, 255, 255, 0.5)",
       "height": "100%",
       "left": 0,
@@ -21,7 +21,7 @@ exports[`OffCanvas renders correctly when closed 1`] = `
     data-testid="content"
     onKeyDown={[Function]}
     style={
-      Object {
+      {
         "background": "rgba(0, 0, 0, 0.1)",
         "height": "300px",
         "left": "0",
@@ -45,7 +45,7 @@ exports[`OffCanvas renders correctly when open 1`] = `
   data-testid="overlay"
   onClick={[Function]}
   style={
-    Object {
+    {
       "background": "rgba(255, 255, 255, 0.5)",
       "height": "100%",
       "left": 0,
@@ -61,7 +61,7 @@ exports[`OffCanvas renders correctly when open 1`] = `
     data-testid="content"
     onKeyDown={[Function]}
     style={
-      Object {
+      {
         "background": "rgba(0, 0, 0, 0.1)",
         "height": "300px",
         "left": "0",

tests/helpers/tests.js

@@ -1,15 +1,15 @@
 import { render } from '@testing-library/react'
 
-export const getContent = element => {
+export const getContent = (element) => {
   const { getByTestId } = render(element)
   const content = getByTestId('content')
   return content
 }
 
-export const getOverlay = element => {
+export const getOverlay = (element) => {
   const { getByTestId } = render(element)
   const overlay = getByTestId('overlay')
   return overlay
 }
 
-export const extractNumber = property => parseInt(property.match(/[-]*\d+/))
+export const extractNumber = (property) => parseInt(property.match(/[-]*\d+/))

webpack.config.js

@@ -27,7 +27,5 @@ module.exports = {
       filename: './index.html',
     }),
   ],
-  devServer: {
-    contentBase: path.join(__dirname, 'examples'),
-  },
+  devServer: { },
 }