feat(react): support react 17

package.json

@@ -102,7 +102,7 @@
     "prettier": "^2",
     "puppeteer": "^22.12.1",
     "react": "^17",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17",
     "react-helmet": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "remark-frontmatter": "^5.0.0",

packages/react/package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
-    "focus-trap-react": "8",
+    "focus-trap-react": "^10.2.3",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
     "react-id-generator": "^3.0.1",
@@ -65,8 +65,9 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "prop-types": "^15.8.1",
+    "react": "^17",
+    "react-dom": "^17",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
     "ts-node": "^10.9.2",

packages/react/src/components/ClickOutsideListener/index.tsx

@@ -60,15 +60,15 @@ function ClickOutsideListener(
 
   useEffect(() => {
     typeof mouseEvent === 'string' &&
-      document.addEventListener(mouseEvent, handleEvent);
+      document.addEventListener(mouseEvent, handleEvent, true);
     typeof touchEvent === 'string' &&
-      document.addEventListener(touchEvent, handleEvent);
+      document.addEventListener(touchEvent, handleEvent, true);
 
     return () => {
       typeof mouseEvent === 'string' &&
-        document.removeEventListener(mouseEvent, handleEvent);
+        document.removeEventListener(mouseEvent, handleEvent, true);
       typeof touchEvent === 'string' &&
-        document.removeEventListener(touchEvent, handleEvent);
+        document.removeEventListener(touchEvent, handleEvent, true);
     };
   }, [mouseEvent, touchEvent]);
 

packages/react/src/components/Combobox/Combobox.test.tsx

@@ -515,6 +515,9 @@ test('should prevent default with enter keypress and open listbox', () => {
     // rtl doesn't let us mock preventDefault
     // see: https://github.com/testing-library/react-testing-library/issues/572
     event.preventDefault = preventDefault;
+    if (type === 'focus') {
+      fireEvent.focusIn(combobox);
+    }
     fireEvent(combobox, event);
   };
 
@@ -545,6 +548,9 @@ test('should not prevent default with enter keypress and closed listbox', () =>
     // rtl doesn't let us mock preventDefault
     // see: https://github.com/testing-library/react-testing-library/issues/572
     event.preventDefault = preventDefault;
+    if (type === 'focus') {
+      fireEvent.focusIn(combobox);
+    }
     fireEvent(combobox, event);
   };
 

packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import OptionsMenu from './';
 import axe from '../../axe';
 
@@ -10,8 +11,10 @@ const trigger = (props: React.HTMLAttributes<HTMLButtonElement>) => (
 );
 
 test('should render menu', () => {
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger}>
       <li>option 1</li>
       <li>option 2</li>
     </OptionsMenu>
@@ -22,8 +25,10 @@ test('should render menu', () => {
 });
 
 test('should render children', () => {
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger}>
       <li>option 1</li>
       <li>option 2</li>
     </OptionsMenu>
@@ -33,8 +38,10 @@ test('should render children', () => {
 });
 
 test('should render trigger prop', () => {
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger}>
       <li className="foo">option 1</li>
     </OptionsMenu>
   );
@@ -43,8 +50,10 @@ test('should render trigger prop', () => {
 });
 
 test('should support className prop', () => {
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger} className="bananas">
+    <OptionsMenu onSelect={onSelect} trigger={trigger} className="bananas">
       <li>option 1</li>
       <li>option 2</li>
     </OptionsMenu>
@@ -56,13 +65,15 @@ test('should support className prop', () => {
 });
 
 test('should support align prop', () => {
+  const onSelect = jest.fn();
+
   render(
     <>
-      <OptionsMenu trigger={trigger} align="left">
+      <OptionsMenu onSelect={onSelect} trigger={trigger} align="left">
         <li>option 1</li>
         <li>option 2</li>
       </OptionsMenu>
-      <OptionsMenu trigger={trigger} align="right">
+      <OptionsMenu onSelect={onSelect} trigger={trigger} align="right">
         <li>option 1</li>
         <li>option 2</li>
       </OptionsMenu>
@@ -79,8 +90,10 @@ test('should support align prop', () => {
 
 test('should support menuRef prop', () => {
   const menuRef = React.createRef<HTMLUListElement>();
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger} menuRef={menuRef}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger} menuRef={menuRef}>
       <li>option 1</li>
       <li>option 2</li>
     </OptionsMenu>
@@ -90,81 +103,101 @@ test('should support menuRef prop', () => {
   expect(menuRef.current).toEqual(screen.getByRole('menu'));
 });
 
-test('should toggle menu on trigger clicks', () => {
+test('should toggle menu on trigger clicks', async () => {
+  const user = userEvent.setup();
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger}>
       <li className="foo">option 1</li>
     </OptionsMenu>
   );
 
-  fireEvent.click(screen.getByRole('button'));
-  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+  const button = screen.getByRole('button', { name: 'trigger' });
+
+  await user.click(button);
+  expect(button).toHaveAttribute('aria-expanded', 'true');
   expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'true');
 
-  fireEvent.click(screen.getByRole('button'));
-  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  await user.click(button);
+
+  expect(button).toHaveAttribute('aria-expanded', 'false');
   expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'false');
 });
 
 test('should click trigger with down key on trigger', () => {
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger}>
       <li className="foo">option 1</li>
     </OptionsMenu>
   );
 
-  fireEvent.keyDown(screen.getByRole('button'), { keyCode: 40 });
-  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+  const button = screen.getByRole('button');
+
+  fireEvent.keyDown(button, { keyCode: 40 });
+  expect(button).toHaveAttribute('aria-expanded', 'true');
 });
 
-test('should focus trigger on close', () => {
+test('should focus trigger on close', async () => {
+  const user = userEvent.setup();
+  const onSelect = jest.fn();
+
   render(
-    <OptionsMenu trigger={trigger}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger}>
       <li className="foo">option 1</li>
     </OptionsMenu>
   );
 
   const button = screen.getByRole('button');
 
-  fireEvent.click(button);
-  fireEvent.click(button); // to close
+  await user.click(button); // opens menu
+  await user.click(button); // closes menu
   expect(button).toHaveFocus();
 });
 
-test('should call onClose when closed', () => {
+test('should call onClose when closed', async () => {
+  const user = userEvent.setup();
   const onClose = jest.fn();
+  const onSelect = jest.fn();
 
   render(
-    <OptionsMenu trigger={trigger} onClose={onClose}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger} onClose={onClose}>
       <li className="foo">option 1</li>
     </OptionsMenu>
   );
 
   const option = screen.getByRole('menuitem');
 
-  fireEvent.click(option);
+  await user.click(option);
 
   expect(onClose).toBeCalled();
 });
 
-test('should close menu when click outside event occurs', () => {
+test('should close menu when click outside event occurs', async () => {
+  const user = userEvent.setup();
+  const onSelect = jest.fn();
+
   render(
     <>
       <button>Click me!</button>
-      <OptionsMenu trigger={trigger}>
+      <OptionsMenu onSelect={onSelect} trigger={trigger}>
         <li className="foo">option 1</li>
       </OptionsMenu>
     </>
   );
-  fireEvent.click(screen.getByRole('button', { name: 'trigger' }));
+
+  await user.click(screen.getByRole('button', { name: 'trigger' }));
   expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'true');
-  fireEvent.click(screen.getByRole('button', { name: 'Click me!' }));
+  await user.click(screen.getByRole('button', { name: 'Click me!' }));
   expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'false');
 });
 
 test('should return no axe violations when hidden', async () => {
+  const onSelect = jest.fn();
   const { container } = render(
-    <OptionsMenu trigger={trigger} show={false}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger} show={false}>
       <li className="foo">option 1</li>
     </OptionsMenu>
   );
@@ -173,8 +206,9 @@ test('should return no axe violations when hidden', async () => {
 });
 
 test('should return no axe violations when shown', async () => {
+  const onSelect = jest.fn();
   const { container } = render(
-    <OptionsMenu trigger={trigger} show={true}>
+    <OptionsMenu onSelect={onSelect} trigger={trigger} show={true}>
       <li className="foo">option 1</li>
     </OptionsMenu>
   );