feat(react): support react 17

docs/pages/components/Popover.mdx

@@ -56,7 +56,9 @@ For custom purposes, you can use the "custom" variant, which is the default.
 ```jsx example
 function CustomPopoverExample() {
   const [show, setShow] = useState(false);
-  const onTogglePopover = () => setShow(!show);
+  const onTogglePopover = () => {
+    setShow(!show);
+  }
   const buttonRef = useRef();
 
   return (

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';
 
@@ -90,19 +91,23 @@ 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();
   render(
     <OptionsMenu 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');
+
+  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');
 });
 
@@ -113,11 +118,15 @@ test('should click trigger with down key on trigger', () => {
     </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();
+
   render(
     <OptionsMenu trigger={trigger}>
       <li className="foo">option 1</li>
@@ -126,12 +135,13 @@ test('should focus trigger on close', () => {
 
   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();
 
   render(
@@ -142,12 +152,14 @@ test('should call onClose when closed', () => {
 
   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();
+
   render(
     <>
       <button>Click me!</button>
@@ -156,9 +168,10 @@ test('should close menu when click outside event occurs', () => {
       </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');
 });
 

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import OptionsMenuWrapper from './OptionsMenuWrapper';
 import OptionsMenuList from './OptionsMenuList';
 import setRef from '../../utils/setRef';
@@ -28,91 +28,65 @@ export interface OptionsMenuProps extends OptionsMenuAlignmentProps {
   children: React.ReactNode;
 }
 
-interface OptionsMenuState {
-  show: boolean;
-}
-
 type AllOptionsMenuProps = OptionsMenuProps &
   React.HTMLAttributes<HTMLLIElement>;
 
-export default class OptionsMenu extends Component<
-  AllOptionsMenuProps,
-  OptionsMenuState
-> {
-  static defaultProps = {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClose: () => {},
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSelect: () => {},
-    align: 'right'
-  };
-
-  private triggerRef: React.RefObject<HTMLButtonElement>;
+const OptionsMenu = ({
+  children,
+  className,
+  closeOnSelect,
+  menuRef,
+  trigger,
+  align = 'right',
+  onClose = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  onSelect = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  ...other
+}: AllOptionsMenuProps) => {
+  const [show, setShow] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
 
-  constructor(props: AllOptionsMenuProps) {
-    super(props);
-    this.state = { show: false };
-    this.triggerRef = React.createRef();
-  }
-
-  toggleMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
-    this.setState(({ show }) => ({ show: !show }));
+  const toggleMenu = () => {
+    setShow(!show);
   };
 
-  handleClose = () => {
-    const { onClose = OptionsMenu.defaultProps.onClose } = this.props;
-    this.setState({ show: false });
+  const handleClose = () => {
+    setShow(false);
     onClose();
-    this.triggerRef.current?.focus();
+    triggerRef.current?.focus();
   };
 
-  handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     const { which, target } = event;
     if (which === down) {
       event.preventDefault();
       (target as HTMLElement).click();
     }
   };
 
-  render() {
-    const { toggleMenu, triggerRef, handleTriggerKeyDown } = this;
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    const {
-      children,
-      className,
-      closeOnSelect,
-      menuRef,
-      trigger,
-      align,
-      onClose,
-      ...other
-    } = this.props;
-
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-    const { show } = this.state;
+  return (
+    <OptionsMenuWrapper align={align} className={className}>
+      {trigger &&
+        trigger({
+          onClick: toggleMenu,
+          'aria-expanded': show,
+          ref: triggerRef,
+          onKeyDown: handleTriggerKeyDown
+        })}
+      <OptionsMenuList
+        show={show}
+        menuRef={(el) => {
+          if (menuRef) {
+            setRef(menuRef, el);
+          }
+        }}
+        onClose={handleClose}
+        onSelect={onSelect}
+        {...other}
+      >
+        {children}
+      </OptionsMenuList>
+    </OptionsMenuWrapper>
+  );
+};
 
-    return (
-      <OptionsMenuWrapper align={align} className={className}>
-        {trigger &&
-          trigger({
-            onClick: toggleMenu,
-            'aria-expanded': show,
-            ref: triggerRef,
-            onKeyDown: handleTriggerKeyDown
-          })}
-        <OptionsMenuList
-          show={show}
-          menuRef={(el) => {
-            if (menuRef) {
-              setRef(menuRef, el);
-            }
-          }}
-          onClose={this.handleClose}
-          {...other}
-        >
-          {children}
-        </OptionsMenuList>
-      </OptionsMenuWrapper>
-    );
-  }
-}
+export default OptionsMenu;