@openedx/paragon 22.13.0 → 22.14.0

package/src/Form/_index.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:string";
 @import "variables";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/input-group";
@@ -60,7 +62,7 @@ $select-icon-padding: .5625rem !default;
     }
   }
 
-  @media (min-width: map-get($grid-breakpoints, "sm")) {
+  @media (min-width: map.get($grid-breakpoints, "sm")) {
     margin-inline-end: $custom-control-gutter;
   }
 
@@ -306,7 +308,7 @@ $select-icon-padding: .5625rem !default;
       text-align: right;
     }
 
-    &:not(:focus):not(.has-value) {
+    &:not(:focus, .has-value) {
       color: transparent;
     }
 
@@ -318,17 +320,17 @@ $select-icon-padding: .5625rem !default;
     }
   }
 
-  .form-control:not(:focus):not(.has-value) {
+  .form-control:not(:focus, .has-value) {
     &::placeholder,
     &::-webkit-datetime-edit {
       opacity: 0;
     }
   }
 
-  select.form-control:not(.has-value):not(:focus) {
+  select.form-control:not(.has-value, :focus) {
     // color: rgba(0,0,0,0); Force the rgba syntax to appear in the output rather
     // than transparent. IE11 does not understand color: transparent here.
-    color: unquote("rgba(0,0,0,0)");
+    color: string.unquote("rgba(0,0,0,0)");
   }
 }
 
@@ -545,7 +547,7 @@ select.form-control {
 .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
 .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn,
 .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text,
-.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .btn:not(:last-child, .dropdown-toggle),
 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
   [dir="rtl"] & {
     border-radius: 0 $input-border-radius $input-border-radius 0;
@@ -588,7 +590,7 @@ select.form-control {
   .pgn__form-autosuggest__dropdown {
     @include pgn-box-shadow(1, "centered");
 
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (min-width: map.get($grid-breakpoints, "sm")) {
       margin-inline-end: $custom-control-gutter;
     }
 

package/src/Form/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+@use "sass:map";
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;
 $input-font-family:                     $input-btn-font-family !default;
@@ -198,7 +200,7 @@ $custom-range-thumb-border-radius:           1rem !default;
 $custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
-$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-active-bg:               color.adjust($component-active-bg, $lightness: 35%) !default;
 $custom-range-thumb-disabled-bg:             theme-color("gray", "default") !default;
 
 $custom-file-height:                $input-height !default;
@@ -238,7 +240,7 @@ $form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg x
 
 $form-validation-states: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$form-validation-states: map-merge(
+$form-validation-states: map.merge(
   (
     "valid": (
       "color": $form-feedback-valid-color,

package/src/Form/tests/FormAutosuggest.test.jsx

@@ -89,59 +89,64 @@ describe('render behavior', () => {
     expect(screen.getByDisplayValue('Test Value')).toBeInTheDocument();
   });
 
-  it('renders component with options', () => {
+  it('renders component with options', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
   });
 
-  it('renders with value required error msg', () => {
+  it('renders with value required error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isValueRequired />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example value required error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders with selection required error msg', () => {
+  it('renders with selection required error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent isSelectionRequired />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.type(input, '1');
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.type(input, '1');
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example selection required error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders with custom error msg', () => {
+  it('renders with custom error msg', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent hasCustomError />);
     const input = getByTestId('autosuggest-textbox-input');
 
     // if you click into the input and click outside, you should see the error message
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     const formControlFeedback = getByText('Example custom error message');
 
     expect(formControlFeedback).toBeInTheDocument();
   });
 
-  it('renders component with options that all have IDs', () => {
+  it('renders component with options that all have IDs', async () => {
+    const user = userEvent.setup();
     const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const optionItemIds = getAllByTestId('autosuggest-optionitem').map(item => item.id);
 
     expect(optionItemIds).not.toContain(null);
@@ -154,12 +159,13 @@ describe('render behavior', () => {
     expect(getByTestId('autosuggest-screen-reader-options-count').getAttribute('aria-live')).toEqual('assertive');
   });
 
-  it('displays correct amount of options found to screen readers', () => {
+  it('displays correct amount of options found to screen readers', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
   });
@@ -172,167 +178,180 @@ describe('render behavior', () => {
 });
 
 describe('controlled behavior', () => {
-  it('sets input value based on clicked option', () => {
+  it('sets input value based on clicked option', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(input.value).toEqual('Option 1');
   });
 
-  it('calls onChange based on clicked option', () => {
+  it('calls onChange based on clicked option', async () => {
+    const user = userEvent.setup();
     const onChange = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onChange).toHaveBeenCalledWith({ selectionId: 'option-1-id', selectionValue: 'Option 1', userProvidedText: 'Option 1' });
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onChange when the textbox is cleared', () => {
+  it('calls onChange when the textbox is cleared', async () => {
+    const user = userEvent.setup();
     const onChange = jest.fn();
     const { getByTestId } = render(<FormAutosuggestTestComponent onChange={onChange} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.type(input, '1');
-    userEvent.type(input, '{backspace}');
+    await user.type(input, '1');
+    await user.type(input, '{backspace}');
 
     expect(onChange).toHaveBeenCalledWith({ selectionId: '', selectionValue: '', userProvidedText: '' });
   });
 
-  it('calls the function passed to onClick when an option with it is selected', () => {
+  it('calls the function passed to onClick when an option with it is selected', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 2');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('does not call onClick when an option without it is selected', () => {
+  it('does not call onClick when an option without it is selected', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent onClick={onClick} />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const menuItem = getByText('Option 1');
-    userEvent.click(menuItem);
+    await user.click(menuItem);
 
     expect(onClick).toHaveBeenCalledTimes(0);
   });
 
-  it('should set the correct activedescendant', () => {
+  it('should set the correct activedescendant', async () => {
+    const user = userEvent.setup();
     const { getByTestId, getAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const expectedOptionId = getAllByTestId('autosuggest-optionitem')[0].id;
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     expect(input.getAttribute('aria-activedescendant')).toEqual(expectedOptionId);
   });
 
-  it('filters dropdown based on typed field value with one match', () => {
+  it('filters dropdown based on typed field value with one match', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, 'Option 1');
+    await user.click(input);
+    await user.type(input, 'Option 1');
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(1);
   });
 
-  it('toggles options list', () => {
+  it('toggles options list', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const dropdownBtn = getByTestId('autosuggest-iconbutton');
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
 
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
     const reopenedList = queryAllByTestId('autosuggest-optionitem');
     expect(reopenedList.length).toBe(3);
   });
 
-  it('filters dropdown based on typed field value with multiple matches', () => {
+  it('filters dropdown based on typed field value with multiple matches', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(2);
   });
 
-  it('closes options list on click outside', () => {
+  it('closes options list on click outside', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.click(document.body);
+    await user.click(document.body);
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('updates screen reader option count based on typed field value with multiple matches', () => {
+  it('updates screen reader option count based on typed field value with multiple matches', async () => {
+    const user = userEvent.setup();
     const { getByText, getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
     expect(getByText('0 options found')).toBeInTheDocument();
-    userEvent.click(input);
+    await user.click(input);
 
     expect(getByText('3 options found')).toBeInTheDocument();
 
-    userEvent.click(input);
-    userEvent.type(input, '1');
+    await user.click(input);
+    await user.type(input, '1');
 
     expect(getByText('2 options found')).toBeInTheDocument();
   });
 
-  it('closes options list when tabbed out and the input is no longer active', () => {
+  it('closes options list when tabbed out and the input is no longer active', async () => {
+    const user = userEvent.setup();
     const { getByTestId, queryAllByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
 
-    userEvent.click(input);
+    await user.click(input);
     expect(document.activeElement).toBe(getByTestId('autosuggest-textbox-input'));
 
     const list = queryAllByTestId('autosuggest-optionitem');
     expect(list.length).toBe(3);
 
-    userEvent.tab();
+    await user.tab();
     expect(document.activeElement).not.toBe(getByTestId('autosuggest-textbox-input'));
 
     const updatedList = queryAllByTestId('autosuggest-optionitem');
     expect(updatedList.length).toBe(0);
   });
 
-  it('check focus on input after esc', () => {
+  it('check focus on input after esc', async () => {
+    const user = userEvent.setup();
     const { getByTestId } = render(<FormAutosuggestTestComponent />);
     const input = getByTestId('autosuggest-textbox-input');
     const dropdownBtn = getByTestId('autosuggest-iconbutton');
-    userEvent.click(dropdownBtn);
+    await user.click(dropdownBtn);
 
-    userEvent.keyboard('{esc}');
+    await user.keyboard('{Escape}');
 
     expect(input.matches(':focus')).toBe(true);
   });

package/src/Form/tests/FormCheckboxSet.test.jsx

@@ -166,7 +166,8 @@ describe('FormCheckboxSet', () => {
     });
   });
 
-  it('checks if onClick is called once in FormCheckboxSet', () => {
+  it('checks if onClick is called once in FormCheckboxSet', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
     const { getByLabelText } = render(
       <FormGroup controlId="my-field">
@@ -181,7 +182,7 @@ describe('FormCheckboxSet', () => {
       </FormGroup>,
     );
 
-    userEvent.click(getByLabelText('Red'));
+    await user.click(getByLabelText('Red'));
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 });

package/src/Form/tests/FormControl.test.jsx

@@ -28,7 +28,8 @@ function Component({ isClearValue }) {
 }
 
 describe('FormControl', () => {
-  it('textarea changes its height with autoResize prop', () => {
+  it('textarea changes its height with autoResize prop', async () => {
+    const user = userEvent.setup();
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
     const inputText = 'new text';
@@ -45,25 +46,27 @@ describe('FormControl', () => {
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
 
-    userEvent.type(textarea, inputText);
+    await user.type(textarea, inputText);
 
     expect(onChangeFunc).toHaveBeenCalledTimes(inputText.length);
     expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsetHeight}px`);
   });
 
-  it('should apply and accept input mask for phone numbers', () => {
+  it('should apply and accept input mask for phone numbers', async () => {
+    const user = userEvent.setup();
     render(<Component />);
 
     const input = screen.getByTestId('form-control-with-mask');
-    userEvent.type(input, '5555555555');
+    await user.type(input, '5555555555');
     expect(input.value).toBe('+1 (555) 555-5555');
   });
 
-  it('should be cleared from the mask elements value', () => {
+  it('should be cleared from the mask elements value', async () => {
+    const user = userEvent.setup();
     render(<Component isClearValue />);
 
     const input = screen.getByTestId('form-control-with-mask');
-    userEvent.type(input, '5555555555');
+    await user.type(input, '5555555555');
 
     expect(input.value).toBe('+1 (555) 555-5555');
     expect(unmaskedInputValue).toBe('15555555555');

package/src/Form/tests/FormRadioSet.test.jsx

@@ -109,7 +109,8 @@ describe('FormRadioSet', () => {
     expect(deciduousRadio).toHaveAttribute('name', 'trees');
   });
 
-  it('checks if onClick is called once in FormRadioSet', () => {
+  it('checks if onClick is called once in FormRadioSet', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
     const { getByLabelText } = render(
       <FormGroup>
@@ -124,7 +125,7 @@ describe('FormRadioSet', () => {
       </FormGroup>,
     );
 
-    userEvent.click(getByLabelText('Red'));
+    await user.click(getByLabelText('Red'));
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 });

package/src/Hyperlink/index.scss

@@ -1,9 +1,11 @@
+@use "sass:map";
+
 .pgn__hyperlink {
   display: inline-flex;
   align-items: center;
   text-align: start;
 
   &__external-icon {
-    margin-inline-start: map_get($spacers, 2);
+    margin-inline-start: map.get($spacers, 2);
   }
 }

package/src/Hyperlink/index.tsx

@@ -114,6 +114,7 @@ Hyperlink.propTypes = {
   /** specifies the URL */
   destination: PropTypes.string.isRequired,
   /** Content of the hyperlink */
+  // @ts-ignore
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,

package/src/IconButtonToggle/IconButtonToggle.test.jsx

@@ -21,7 +21,8 @@ describe('IconButtonToggle tests', () => {
     expect(btnAbc).toHaveClass('btn-icon-primary-active');
     expect(btnAbc).toHaveAttribute('aria-selected', 'true');
   });
-  test('switching activeValue works as expected', () => {
+  test('switching activeValue works as expected', async () => {
+    const user = userEvent.setup();
     const spyChanger = jest.fn();
     render(
       <IconButtonToggle activeValue="abc" onChange={spyChanger}>
@@ -38,7 +39,7 @@ describe('IconButtonToggle tests', () => {
     expect(btnAbc).toHaveClass('btn-icon-primary-active');
     expect(btnAbc).toHaveAttribute('aria-selected', 'true');
 
-    userEvent.click(btnDef);
+    await user.click(btnDef);
 
     waitFor(() => {
       expect(btnDef).toHaveClass('btn-icon-primary-active');

package/src/IconButtonToggle/index.scss

@@ -1,7 +1,9 @@
+@use "sass:map";
+
 .pgn__icon-button-toggle__container {
   display: flex;
 
   .btn-icon + .btn-icon {
-    margin-inline-start: map_get($spacers, 1);
+    margin-inline-start: map.get($spacers, 1);
   }
 }

package/src/ListBox/ListBox.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import ListBox from '.';
@@ -82,15 +82,18 @@ describe('ListBox', () => {
 
     listBoxElement.focus();
 
-    expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
+    await waitFor(() => {
+      expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-0');
+    });
   });
 
   it('should not select first ListBoxOption on focus if ListBoxOption selected', async () => {
+    const user = userEvent.setup();
     const listBoxElement = screen.getByRole('listbox');
 
     listBoxElement.focus();
 
-    await userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     listBoxElement.focus();
 
@@ -98,11 +101,12 @@ describe('ListBox', () => {
   });
 
   it('should select next ListBoxOption on down arrow key', async () => {
+    const user = userEvent.setup();
     const listBoxElement = screen.getByRole('listbox');
 
     listBoxElement.focus();
 
-    await userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
 
     expect(listBoxElement.getAttribute('aria-activedescendant')).toEqual('list-box-option-1');
   });

package/src/Menu/Menu.test.jsx

@@ -71,48 +71,53 @@ describe('Keyboard Interactions', () => {
     expect(defaultItem).toHaveFocus();
   });
 
-  it('should focus the next item after ArrowDown keyDown', () => {
+  it('should focus the next item after ArrowDown keyDown', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default');
     const cantTouchThisItem = screen.getByText(MENU_ITEM_TEXT).parentElement;
 
-    userEvent.type(defaultItem, '{arrowdown}');
+    await user.type(defaultItem, '{arrowdown}');
 
     expect(cantTouchThisItem).toHaveFocus();
   });
 
-  it('should focus the next item after Tab keyDown', () => {
+  it('should focus the next item after Tab keyDown', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default').parentElement;
     const cantTouchThisItem = screen.getByText(MENU_ITEM_TEXT).parentElement;
     defaultItem.focus();
-    userEvent.tab();
+    await user.tab();
 
     expect(cantTouchThisItem).toHaveFocus();
   });
 
-  it('should loop focus to the first item after Tab keyDown on last item', () => {
+  it('should loop focus to the first item after Tab keyDown on last item', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default').parentElement;
     const iconBeforeItem = screen.getByText('Icon Before');
     iconBeforeItem.focus();
-    userEvent.tab();
+    await user.tab();
 
     expect(defaultItem).toHaveFocus();
   });
 
-  it('should loop focus to the last item after ArrowUp keyDown on first item', () => {
+  it('should loop focus to the last item after ArrowUp keyDown on first item', async () => {
+    const user = userEvent.setup();
     const defaultItem = screen.getByText('Default').parentElement;
     const iconBeforeItem = screen.getByText('Icon Before').parentElement;
     defaultItem.focus();
-    userEvent.type(defaultItem, '{arrowup}');
+    await user.type(defaultItem, '{arrowup}');
 
     expect(iconBeforeItem).toHaveFocus();
   });
 
-  it('should focus the previous item after Shift + Tab keyDown', () => {
+  it('should focus the previous item after Shift + Tab keyDown', async () => {
+    const user = userEvent.setup();
     const button1 = screen.getAllByRole('button')[0];
     const button2 = screen.getAllByRole('button')[1];
 
     button2.focus();
-    userEvent.tab({ shift: true });
+    await user.tab({ shift: true });
 
     expect(button1).toHaveFocus();
   });

package/src/Menu/SelectMenu.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { ExpandMore } from '../../icons';
 import Button from '../Button';
 import ModalPopup from '../Modal/ModalPopup';
-import useToggle from '../hooks/useToggle';
+import useToggle from '../hooks/useToggleHook';
 import Menu from '.';
 import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';