@patternfly/react-core 4.236.2 → 4.236.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.2",
+  "version": "4.236.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.87.2",
-    "@patternfly/react-styles": "^4.86.2",
-    "@patternfly/react-tokens": "^4.88.2",
+    "@patternfly/react-icons": "^4.87.5",
+    "@patternfly/react-styles": "^4.86.5",
+    "@patternfly/react-tokens": "^4.88.5",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.211.0",
+    "@patternfly/patternfly": "4.212.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "de201ab6c9fa8d24e516025f984b0b86666f484d"
+  "gitHead": "910d0ce39921d2f89298f0fca3694ea6dc141b63"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { canUseDOM } from '../../helpers';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { AboutModalContainer } from './AboutModalContainer';
 import { PickOptional } from '../../helpers/typeUtils';
 
@@ -71,7 +71,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
   }
 
   handleEscKeyClick = (event: KeyboardEvent) => {
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
       this.props.onClose();
     }
   };

package/src/components/AboutModal/__tests__/AboutModal.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { AboutModal, AboutModalProps } from '../AboutModal';
+import { KeyTypes } from '../../../helpers';
 
 const props: AboutModalProps = {
   onClose: jest.fn(),
@@ -15,10 +16,12 @@ const props: AboutModalProps = {
 };
 
 describe('AboutModal', () => {
-  test('closes with escape', () => {
+  test('closes with escape', async () => {
+    const user = userEvent.setup();
+    
     render(<AboutModal {...props} isOpen />);
 
-    userEvent.type(screen.getByRole('dialog'), '{esc}');
+    await user.type(screen.getByRole('dialog'), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 

package/src/components/Alert/Alert.tsx

@@ -73,6 +73,8 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isExpandable?: boolean;
   /** Adds accessible text to the alert Toggle */
   toggleAriaLabel?: string;
+  /** Uniquely identifies the alert */
+  id?: string;
 }
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
@@ -100,6 +102,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   toggleAriaLabel = `${capitalize(variant)} alert details`,
   onMouseEnter = () => {},
   onMouseLeave = () => {},
+  id,
   ...props
 }: AlertProps) => {
   const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
@@ -211,6 +214,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
       })}
       onMouseEnter={myOnMouseEnter}
       onMouseLeave={myOnMouseLeave}
+      id={id}
       {...props}
     >
       {isExpandable && (

package/src/components/Alert/__tests__/Alert.test.tsx

@@ -52,8 +52,9 @@ describe('Alert', () => {
         expect(asFragment()).toMatchSnapshot();
       });
 
-      test('Action Close Button', () => {
+      test('Action Close Button', async () => {
         const onClose = jest.fn();
+        const user = userEvent.setup();
 
         render(
           <Alert
@@ -65,7 +66,7 @@ describe('Alert', () => {
           </Alert>
         );
 
-        userEvent.click(screen.getByLabelText('Close'));
+        await user.click(screen.getByLabelText('Close'));
         expect(onClose).toHaveBeenCalled();
       });
 

package/src/components/AlertGroup/AlertGroupInline.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AlertGroup/alert-group';
 import { AlertGroupProps } from './AlertGroup';
+import { AlertProps } from '../Alert';
 
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
@@ -18,8 +19,8 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
     className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
     {...rest}
   >
-    {React.Children.toArray(children).map((Alert: React.ReactNode, index: number) => (
-      <li key={index}>{Alert}</li>
+    {React.Children.toArray(children).map((alert, index) => (
+      <li key={(alert as React.ReactElement<AlertProps>).props?.id || index}>{alert}</li>
     ))}
     {overflowMessage && (
       <li>

package/src/components/AlertGroup/__tests__/AlertGroup.test.tsx

@@ -23,9 +23,10 @@ describe('AlertGroup', () => {
     expect(asFragment()).toBeTruthy();
   });
 
-  test('Alert group overflow shows up', () => {
+  test('Alert group overflow shows up', async () => {
     const overflowMessage = 'View 2 more alerts';
     const onOverflowClick = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
@@ -38,7 +39,7 @@ describe('AlertGroup', () => {
     const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
     expect(overflowButton).toBeInTheDocument();
 
-    userEvent.click(overflowButton);
+    await user.click(overflowButton);
     expect(onOverflowClick).toHaveBeenCalled();
   });
 
@@ -62,8 +63,9 @@ describe('AlertGroup', () => {
     expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
   });
 
-  test('alertgroup closes when alerts are closed', () => {
+  test('alertgroup closes when alerts are closed', async () => {
     const onClose = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <AlertGroup isToast appendTo={document.body}>
@@ -75,7 +77,7 @@ describe('AlertGroup', () => {
       </AlertGroup>
     );
 
-    userEvent.click(screen.getByLabelText('Close'));
+    await user.click(screen.getByLabelText('Close'));
     expect(onClose).toHaveBeenCalled();
   });
 });

package/src/components/Card/examples/CardLegacySelectable.tsx

@@ -19,7 +19,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    if ([13, 32].includes(event.keyCode)) {
+    if (['Enter', ' '].includes(event.key)) {
       event.preventDefault();
       const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
       setSelected(newSelected);

package/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -67,11 +67,13 @@ describe('Checkbox', () => {
     expect(screen.getByText('This is where custom content goes.')).toBeInTheDocument();
   });
 
-  test('checkbox onChange handler called when component is clicked', () => {
+  test('checkbox onChange handler called when component is clicked', async () => {
     const onChangeHandler = jest.fn();
+    const user = userEvent.setup();
+
     render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
 
-    userEvent.click(screen.getByLabelText('check'));
+    await user.click(screen.getByLabelText('check'));
     expect(onChangeHandler).toHaveBeenCalled();
   });
 

package/src/components/ChipGroup/__tests__/ChipGroup.test.tsx

@@ -35,7 +35,9 @@ describe('ChipGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('chip group expanded', () => {
+  test('chip group expanded', async () => {
+    const user = userEvent.setup();
+
     render(
       <ChipGroup>
         <Chip>1</Chip>
@@ -48,7 +50,7 @@ describe('ChipGroup', () => {
     const moreText = screen.getByText('1 more');
     expect(moreText).toBeInTheDocument();
 
-    userEvent.click(moreText);
+    await user.click(moreText);
     expect(screen.getByText('Show Less')).toBeInTheDocument();
   });
 

package/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx

@@ -22,14 +22,16 @@ test('copy button render', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('copy button onClick', () => {
+test('copy button onClick', async () => {
   const onclick = jest.fn();
+  const user = userEvent.setup();
+
   render(
     <ClipboardCopyButton {...props} onClick={onclick}>
       Copy to Clipboard
     </ClipboardCopyButton>
   );
 
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
   expect(onclick).toHaveBeenCalled();
 });

package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx

@@ -22,11 +22,13 @@ describe('ClipboardCopyToggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('toggle button onClick', () => {
+  test('toggle button onClick', async () => {
     const onclick = jest.fn();
+    const user = userEvent.setup();
+
     render(<ClipboardCopyToggle {...props} onClick={onclick} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onclick).toHaveBeenCalled();
   });
 

package/src/components/ContextSelector/ContextSelector.tsx

@@ -8,7 +8,7 @@ import { ContextSelectorContext } from './contextSelectorConstants';
 import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { FocusTrap, getUniqueId } from '../../helpers';
 import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
@@ -102,7 +102,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   popperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
   onEnterPressed = (event: any) => {
-    if (event.charCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       this.props.onSearchButtonClick();
     }
   };

package/src/components/ContextSelector/ContextSelectorToggle.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { PickOptional } from '../../helpers/typeUtils';
 
 export interface ContextSelectorToggleProps {
@@ -67,8 +67,7 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
 
   onEscPress = (event: any) => {
     const { isOpen, onToggle } = this.props;
-    const keyCode = event.keyCode || event.which;
-    if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY) {
+    if (isOpen && event.key === KeyTypes.Escape) {
       onToggle(null, false);
       this.toggle.current.focus();
     }
@@ -76,16 +75,13 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
 
   onKeyDown = (event: any) => {
     const { isOpen, onToggle, onEnter } = this.props;
-    if ((event.keyCode === KEY_CODES.TAB && !isOpen) || event.key !== KEY_CODES.ENTER) {
+    if ((event.key === KeyTypes.Tab && !isOpen) || event.key !== KeyTypes.Enter) {
       return;
     }
     event.preventDefault();
-    if (
-      (event.keyCode === KEY_CODES.TAB || event.keyCode === KEY_CODES.ENTER || event.key !== KEY_CODES.SPACE) &&
-      isOpen
-    ) {
+    if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key !== KeyTypes.Space) && isOpen) {
       onToggle(null, !isOpen);
-    } else if ((event.keyCode === KEY_CODES.ENTER || event.key === ' ') && !isOpen) {
+    } else if ((event.key === KeyTypes.Enter || event.key === ' ') && !isOpen) {
       onToggle(null, !isOpen);
       onEnter();
     }

package/src/components/ContextSelector/__tests__/ContextSelector.test.tsx

@@ -25,11 +25,13 @@ describe('ContextSelector', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify onToggle is called ', () => {
+  test('Verify onToggle is called ', async () => {
     const mockfn = jest.fn();
+    const user = userEvent.setup();
+
     render(<ContextSelector onToggle={mockfn}>{items}</ContextSelector>);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(mockfn.mock.calls).toHaveLength(1);
   });
 });

package/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx

@@ -23,15 +23,16 @@ test('Renders ContextSelectorItem disabled and hovered', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Verify onClick is called ', () => {
+test('Verify onClick is called ', async () => {
   const mockfn = jest.fn();
+  const user = userEvent.setup();
 
   render(
     <ContextSelectorItem onClick={mockfn} sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
 
   expect(mockfn.mock.calls).toHaveLength(1);
 });

package/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ContextSelectorToggle } from '../ContextSelectorToggle';
+import { KeyTypes } from '../../../helpers';
 
 describe('ContextSelectorToggle', () => {
   test('Renders ContextSelectorToggle', () => {
@@ -11,40 +12,49 @@ describe('ContextSelectorToggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify onToggle is called ', () => {
+  test('Verify onToggle is called ', async () => {
     const mockfnOnToggle = jest.fn();
+    const user = userEvent.setup();
 
     render(<ContextSelectorToggle onToggle={mockfnOnToggle} id="toggle-id" />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(mockfnOnToggle).toHaveBeenCalledTimes(1);
   });
 
-  test('Verify ESC press', () => {
+  test('Verify ESC press', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{esc}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify ESC press with not isOpen', () => {
+  test('Verify ESC press with not isOpen', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{esc}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify keydown tab ', () => {
+  test('Verify keydown tab ', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{tab}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Tab}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify keydown enter ', () => {
+  test('Verify keydown enter ', async () => {
+    const user = userEvent.setup();
+    
     const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
 
-    userEvent.type(screen.getByRole('button'), '{enter}');
+    await user.type(screen.getByRole('button'), `{${KeyTypes.Enter}}`);
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -80,8 +80,9 @@ describe('DataList', () => {
     expect(selectableInput).not.toBeInTheDocument();
   });
 
-  test('List calls selectableRow.onChange when the selectable input changes', () => {
+  test('List calls selectableRow.onChange when the selectable input changes', async () => {
     const mock = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
@@ -94,7 +95,7 @@ describe('DataList', () => {
     );
 
     const selectableInput = screen.getByRole('radio', { hidden: true });
-    userEvent.click(selectableInput);
+    await user.click(selectableInput);
 
     expect(mock).toHaveBeenCalled();
   });

package/src/components/DataList/__tests__/DataListCheck.test.tsx

@@ -3,8 +3,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DataListCheck } from '../DataListCheck';
 
-it('does not throw a "A component is changing an uncontrolled input of type checkbox to be controlled" error when changed if using isChecked', () => {
+it('does not throw a "A component is changing an uncontrolled input of type checkbox to be controlled" error when changed if using isChecked', async () => {
   const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  const user = userEvent.setup();
 
   const ControlledDataListCheck = () => {
     const [checked, setChecked] = React.useState(false);
@@ -14,7 +15,7 @@ it('does not throw a "A component is changing an uncontrolled input of type chec
 
   render(<ControlledDataListCheck />);
 
-  userEvent.click(screen.getByRole('checkbox'));
+  await user.click(screen.getByRole('checkbox'));
 
   expect(consoleSpy).not.toHaveBeenCalled();
 });

package/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -12,6 +12,7 @@ import {
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { KeyTypes } from '../../../helpers';
 
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
@@ -126,7 +127,7 @@ test(`Drawer has resizable callback and id`, () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Resizeable DrawerPanelContent can be wrapped in a context without causing an error', () => {
+test('Resizeable DrawerPanelContent can be wrapped in a context without causing an error', async () => {
   const TestContext = React.createContext({});
 
   const consoleError = jest.spyOn(console, 'error').mockImplementation();
@@ -148,6 +149,8 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
     </TestContext.Provider>
   );
 
+  const user = userEvent.setup();
+
   render(
     <Drawer isExpanded={true} position="left">
       <DrawerContent panelContent={panelContent}>
@@ -156,8 +159,8 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
     </Drawer>
   );
 
-  userEvent.tab();
-  userEvent.keyboard('{arrowleft}');
+  await user.tab();
+  await user.keyboard(`{${KeyTypes.ArrowLeft}}`);
 
   expect(consoleError).not.toHaveBeenCalled();
 })

package/src/components/Dropdown/Toggle.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownContext } from './dropdownConstants';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { PickOptional } from '../../helpers/typeUtils';
 
 export interface ToggleProps {
@@ -95,13 +95,12 @@ export class Toggle extends React.Component<ToggleProps> {
 
   onEscPress = (event: KeyboardEvent) => {
     const { parentRef, getMenuRef } = this.props;
-    const keyCode = event.keyCode || event.which;
     const menuRef = getMenuRef && getMenuRef();
     const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
     const escFromWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target as Node);
     if (
       this.props.isOpen &&
-      (keyCode === KEY_CODES.ESCAPE_KEY || event.key === 'Tab') &&
+      (event.key === KeyTypes.Escape || event.key === 'Tab') &&
       (escFromToggle || escFromWithinMenu)
     ) {
       this.props.onToggle(false, event);

package/src/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -201,9 +201,10 @@ describe('KebabToggle', () => {
 });
 
 describe('API', () => {
-  test('click on item', () => {
+  test('click on item', async () => {
     const mockToggle = jest.fn();
     const mockSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <Dropdown
@@ -214,7 +215,7 @@ describe('API', () => {
       />
     );
 
-    userEvent.click(screen.getByText('Link')); // "Link" is the text of the first item
+    await user.click(screen.getByText('Link')); // "Link" is the text of the first item
     expect(mockToggle.mock.calls).toHaveLength(0);
     expect(mockSelect.mock.calls).toHaveLength(1);
   });

package/src/components/Dropdown/__tests__/DropdownToggle.test.tsx

@@ -8,8 +8,9 @@ import { DropdownContext } from '../dropdownConstants';
 
 describe('DropdownToggle', () => {
   describe('API', () => {
-    test('click on closed', () => {
+    test('click on closed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <DropdownToggle onToggle={mockToggle} parentRef={document.createElement('div')}>
@@ -17,12 +18,13 @@ describe('DropdownToggle', () => {
         </DropdownToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle.mock.calls[0][0]).toBe(true);
     });
 
-    test('click on opened', () => {
+    test('click on opened', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
@@ -30,7 +32,7 @@ describe('DropdownToggle', () => {
         </DropdownToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle.mock.calls[0][0]).toBe(false);
     });
 

package/src/components/Dropdown/__tests__/DropdownToggleAction.test.tsx

@@ -20,11 +20,12 @@ test('passing class', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('checkbox passes value and event to onClick handler', () => {
+test('checkbox passes value and event to onClick handler', async () => {
   const onClickMock = jest.fn();
+  const user = userEvent.setup();
 
   render(<DropdownToggleAction id="action" aria-label="acton" onClick={onClickMock} />);
 
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
   expect(onClickMock).toHaveBeenCalled();
 });

package/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx

@@ -54,10 +54,12 @@ describe('DropdownToggleCheckbox', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('checkbox passes value and event to onChange handler', () => {
+  test('checkbox passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+    
     render(<DropdownToggleCheckbox id="check" {...props} aria-label="check" />);
 
-    userEvent.click(screen.getByRole('checkbox'));
+    await user.click(screen.getByRole('checkbox'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 });

package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -18,12 +18,13 @@ test('Renders ExpandableSection expanded', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('ExpandableSection onToggle called', () => {
+test('ExpandableSection onToggle called', async () => {
   const mockfn = jest.fn();
+  const user = userEvent.setup();
 
   render(<ExpandableSection onToggle={mockfn}> test </ExpandableSection>);
 
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
   expect(mockfn.mock.calls).toHaveLength(1);
 });