@openedx/paragon 22.12.0 → 22.14.0

package/src/Menu/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import useArrowKeyNavigation from '../hooks/useArrowKeyNavigation';
+import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';
 
 function Menu({
   as,

package/src/Modal/ModalDialogBody.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import useIsVisible from '../hooks/useIsVisible';
+import useIsVisible from '../hooks/useIsVisibleHook';
 
 function ModalDialogBody({
   as,

package/src/Modal/_ModalDialog.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .pgn__modal {
   background: $modal-content-bg;
   border-radius: $modal-content-inner-border-radius;
@@ -315,7 +317,7 @@
 
     .pgn__alert-modal__title_icon {
       flex-shrink: 0;
-      margin-right: map-get($spacers, 2\.5);
+      margin-right: map.get($spacers, 2\.5);
     }
   }
 }

package/src/Modal/index.jsx

@@ -50,6 +50,8 @@ class Modal extends React.Component {
 
   componentWillUnmount() {
     if (this.parentElement) {
+      // TODO: update this to use the new createRoot() compatible APIs.
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(this.parentElement);
     }
   }

package/src/Modal/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 @import "~bootstrap/scss/modal";
 @import "ModalDialog";
@@ -19,12 +20,9 @@
 
 .pgn__modal-backdrop {
   background: $modal-backdrop-bg;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   opacity: $modal-backdrop-opacity;
   position: fixed;
-  right: 0;
-  top: 0;
   z-index: 0;
 }
 
@@ -88,7 +86,7 @@
   margin: auto;
   padding: calc($spacer / 2);
 
-  @media (min-width: map-get($grid-breakpoints, "sm")) {
+  @media (min-width: map.get($grid-breakpoints, "sm")) {
     padding: $spacer;
   }
 }

package/src/Modal/tests/ModalLayer.test.tsx

@@ -78,7 +78,8 @@ describe('<ModalLayer />', () => {
   });
 
   describe('Dismiss modal', () => {
-    it('closes a non-blocking modal layer when backdrop is clicked', () => {
+    it('closes a non-blocking modal layer when backdrop is clicked', async () => {
+      const user = userEvent.setup();
       const closeFn = jest.fn();
       render(
         <ModalLayer isOpen onClose={closeFn} isBlocking={false}>
@@ -86,7 +87,7 @@ describe('<ModalLayer />', () => {
         </ModalLayer>,
       );
       const backdrop = screen.getByTestId('modal-backdrop');
-      userEvent.click(backdrop);
+      await user.click(backdrop);
       expect(closeFn).toHaveBeenCalled();
     });
 

package/src/Nav/_mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin nav-tabs-link-focus(
   $border-color,
   $radius: $nav-tabs-border-radius,
@@ -5,7 +7,7 @@
 ) {
   position: relative;
   outline: 0;
-  z-index: map-get($map: $indexes, $key: 1);
+  z-index: map.get($map: $indexes, $key: 1);
 
   &::before {
     content: "";

package/src/OverflowScroll/data/tests/useOverflowScroll.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { renderHook } from '@testing-library/react-hooks/dom';
-import { act } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import useOverflowScroll from '../useOverflowScroll';
 import useOverflowScrollActions from '../useOverflowScrollActions';
 import getChildrenElements from '../getChildrenElements';

package/src/OverflowScroll/data/tests/useOverflowScrollActions.test.jsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks/dom';
+import { renderHook } from '@testing-library/react';
 import { act } from 'react-test-renderer';
 import useOverflowScrollActions from '../useOverflowScrollActions';
 

package/src/OverflowScroll/data/tests/useOverflowScrollElementAttributes.test.jsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks/dom';
+import { renderHook } from '@testing-library/react';
 import useOverflowScrollElementAttributes, {
   OVERFLOW_SCROLL_OVERFLOW_CONTAINER_CLASS,
   OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_START,

package/src/OverflowScroll/data/tests/useOverflowScrollEventListeners.test.jsx

@@ -1,5 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks/dom';
-import { act } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import useOverflowScrollEventListeners from '../useOverflowScrollEventListeners';
 
 const divElement = document.createElement('div');

package/src/PageBanner/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner-component {
   width: 100%;
@@ -46,7 +47,7 @@
   flex-grow: 1;
   justify-content: center;
   align-items: center;
-  padding: map_get($spacers, 2) map_get($spacers, 2\.5);
+  padding: map.get($spacers, 2) map.get($spacers, 2\.5);
   text-align: center;
 }
 

package/src/Pagination/Pagination.test.jsx

@@ -3,7 +3,6 @@ import { Context as ResponsiveContext } from 'react-responsive';
 import renderer from 'react-test-renderer';
 import {
   render,
-  act,
   screen,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -66,48 +65,53 @@ describe('<Pagination />', () => {
   });
 
   describe('handles controlled and uncontrolled behaviour properly', () => {
-    it('does not internally change page on page click if currentPage is provided', () => {
+    it('does not internally change page on page click if currentPage is provided', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
+      await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
     });
 
-    it('controls page selection internally if currentPage is not provided', () => {
+    it('controls page selection internally if currentPage is not provided', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2');
 
-      userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
+      await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` }));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('3');
 
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2');
     });
 
-    it('does not chang page if you click "next" button while on last page', () => {
+    it('does not chang page if you click "next" button while on last page', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} initialPage={5} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5');
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5');
     });
 
-    it('does not chang page if you click "previous" button while on first page', () => {
+    it('does not chang page if you click "previous" button while on first page', async () => {
+      const user = userEvent.setup();
       render(<Pagination {...baseProps} currentPage={undefined} initialPage={1} />);
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1');
     });
   });
 
   describe('handles focus properly', () => {
-    it('should change focus to next button if previous page is first page', () => {
+    it('should change focus to next button if previous page is first page', async () => {
+      const user = userEvent.setup();
       const props = {
         ...baseProps,
         currentPage: 2,
@@ -117,11 +121,12 @@ describe('<Pagination />', () => {
         },
       };
       render(<Pagination {...props} />);
-      userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
+      await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV));
       expect(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)).toHaveFocus();
     });
 
-    it('should change focus to previous button if next page is last page', () => {
+    it('should change focus to previous button if next page is last page', async () => {
+      const user = userEvent.setup();
       const props = {
         ...baseProps,
         currentPage: baseProps.pageCount - 1,
@@ -131,7 +136,7 @@ describe('<Pagination />', () => {
         },
       };
       render(<Pagination {...props} />);
-      userEvent.click(screen.getByText(props.buttonLabel.next));
+      await user.click(screen.getByText(props.buttonLabel.next));
       expect(screen.getByText(props.buttonLabel.previous)).toHaveFocus();
     });
   });
@@ -191,7 +196,8 @@ describe('<Pagination />', () => {
     });
 
     describe('should fire callbacks properly', () => {
-      it('should not fire onPageSelect when selecting current page', () => {
+      it('should not fire onPageSelect when selecting current page', async () => {
+        const user = userEvent.setup();
         const spy = jest.fn();
         const props = {
           ...baseProps,
@@ -203,11 +209,12 @@ describe('<Pagination />', () => {
           </ResponsiveContext.Provider>
         ));
 
-        userEvent.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false }));
+        await user.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false }));
         expect(spy).toHaveBeenCalledTimes(0);
       });
 
-      it('should fire onPageSelect callback when selecting new page', () => {
+      it('should fire onPageSelect callback when selecting new page', async () => {
+        const user = userEvent.setup();
         const spy = jest.fn();
         const props = {
           ...baseProps,
@@ -219,17 +226,18 @@ describe('<Pagination />', () => {
           </ResponsiveContext.Provider>
         ));
 
-        userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`));
+        await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`));
         expect(spy).toHaveBeenCalledTimes(1);
 
-        userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`));
+        await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`));
         expect(spy).toHaveBeenCalledTimes(2);
       });
     });
   });
 
   describe('fires previous and next button click handlers', () => {
-    it('previous button onClick', () => {
+    it('previous button onClick', async () => {
+      const user = userEvent.setup();
       const spy = jest.fn();
       const props = {
         ...baseProps,
@@ -238,11 +246,12 @@ describe('<Pagination />', () => {
       };
       render(<Pagination {...props} />);
       const expectedPrevButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_PREV}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`;
-      userEvent.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel }));
+      await user.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel }));
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
-    it('next button onClick', () => {
+    it('next button onClick', async () => {
+      const user = userEvent.setup();
       const spy = jest.fn();
       const props = {
         ...baseProps,
@@ -250,7 +259,7 @@ describe('<Pagination />', () => {
       };
       render(<Pagination {...props} />);
       const expectedNextButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_NEXT}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`;
-      userEvent.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel }));
+      await user.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel }));
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
@@ -318,13 +327,12 @@ describe('<Pagination />', () => {
     });
 
     it('for the reduced variant shows dropdown button with the page count as label', async () => {
+      const user = userEvent.setup();
       render(<Pagination variant="reduced" {...props} />);
 
       const dropdownLabel = `${baseProps.currentPage} de ${baseProps.pageCount}`;
 
-      await act(async () => {
-        userEvent.click(screen.getByRole('button', { name: dropdownLabel }));
-      });
+      await user.click(screen.getByRole('button', { name: dropdownLabel }));
       expect(screen.queryAllByRole('button', { name: /^\d+$/ }).length).toEqual(baseProps.pageCount);
     });
 

package/src/Popover/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Popovers
 
 $popover-font-size:                 $font-size-sm !default;
@@ -26,7 +27,7 @@ $popover-arrow-width:               1rem !default;
 $popover-arrow-height:              .5rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+$popover-arrow-outer-color:         color.adjust($popover-border-color, $alpha: .05) !default;
 
 $popover-success-bg:                $success-100 !default;
 $popover-success-icon-color:        $success-500 !default;

package/src/ProductTour/Checkpoint.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 $checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color;
@@ -9,12 +10,12 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   background: $checkpoint-background-color;
   border-top: $checkpoint-border-width solid $checkpoint-border-color;
   border-radius: $border-radius;
-  padding: map_get($spacers, 4);
+  padding: map.get($spacers, 4);
   box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
   z-index: $checkpoint-z-index;
   max-width: $checkpoint-max-width;
 
-  @media (max-width: map-get($grid-breakpoints, "md")) {
+  @media (max-width: map.get($grid-breakpoints, "md")) {
     min-width: 90%;
     max-width: 90%;
   }
@@ -43,7 +44,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   }
 
   .pgn__checkpoint-button_dismiss {
-    margin-inline-end: map_get($spacers, 2);
+    margin-inline-end: map.get($spacers, 2);
   }
 
   .pgn__checkpoint-breadcrumb {
@@ -61,11 +62,11 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
     }
 
     &:not(:first-child) {
-      margin-left: map_get($spacers, 1\.5);
+      margin-left: map.get($spacers, 1\.5);
     }
 
     [dir="rtl"] & {
-      margin-left: map_get($spacers, 1\.5);
+      margin-left: map.get($spacers, 1\.5);
       margin-right: 0;
 
       &:last-child {
@@ -81,19 +82,19 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 
   .pgn__checkpoint-body {
     color: $checkpoint-body-color;
-    margin-bottom: map_get($spacers, 3\.5);
+    margin-bottom: map.get($spacers, 3\.5);
     text-align: start;
   }
 
   .pgn__checkpoint-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: map_get($spacers, 2\.5);
+    margin-bottom: map.get($spacers, 2\.5);
   }
 
   #pgn__checkpoint-title {
     font-size: $h3-font-size;
-    margin-inline-end: map_get($spacers, 2\.5);
+    margin-inline-end: map.get($spacers, 2\.5);
     margin-bottom: 0;
   }
 }

package/src/ProductTour/Checkpoint.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 
 import * as popper from '@popperjs/core';
@@ -100,8 +100,9 @@ describe('Checkpoint', () => {
     });
 
     it('end button onClick calls handleEnd', async () => {
+      const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
       const endButton = screen.getByText('End', { selector: 'button' });
-      await userEvent.click(endButton, undefined, { skipPointerEventsCheck: true });
+      await user.click(endButton);
       expect(handleEnd).toHaveBeenCalledTimes(1);
     });
   });

package/src/ProductTour/ProductTour.test.jsx

@@ -144,6 +144,7 @@ describe('<ProductTour />', () => {
       });
 
       it('onClick of end button disables tour', async () => {
+        const user = userEvent.setup();
         const { rerender } = render(<ProductTourWrapper tours={[tourData]} />);
 
         // Verify a Checkpoint has rendered
@@ -151,29 +152,21 @@ describe('<ProductTour />', () => {
 
         // Advance the Tour to the last Checkpoint
         const advanceButton1 = screen.getByRole('button', { name: 'Next' });
-        await act(async () => {
-          await userEvent.click(advanceButton1);
-        });
+        await user.click(advanceButton1);
 
         const advanceButton2 = screen.getByRole('button', { name: 'Next' });
-        await act(async () => {
-          await userEvent.click(advanceButton2);
-        });
+        await user.click(advanceButton2);
 
         rerender(<ProductTourWrapper tours={[tourData]} />);
 
         const advanceButton3 = screen.getByRole('button', { name: 'Override advance' });
-        await act(async () => {
-          await userEvent.click(advanceButton3);
-        });
+        await user.click(advanceButton3);
 
         rerender(<ProductTourWrapper tours={[tourData]} />);
 
         // Click the end button
         const endButton = screen.getByRole('button', { name: 'End' });
-        await act(async () => {
-          await userEvent.click(endButton);
-        });
+        await user.click(endButton);
 
         // Verify no Checkpoints have rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -188,9 +181,7 @@ describe('<ProductTour />', () => {
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
 
         // Click Escape key
-        await act(async () => {
-          await userEvent.keyboard('{escape}');
-        });
+        await userEvent.keyboard('{Escape}');
 
         // Verify no Checkpoints have been rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -271,31 +262,27 @@ describe('<ProductTour />', () => {
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       });
       it('calls customHandleOnEnd onClick of end button', async () => {
+        const user = userEvent.setup();
         const { rerender } = render(<ProductTourWrapper tours={[overrideTourData]} />);
         const advanceButton = screen.getByRole('button', { name: 'Override advance' });
-        await act(async () => {
-          await userEvent.click(advanceButton);
-        });
+        await user.click(advanceButton);
 
         rerender(<ProductTourWrapper tours={[overrideTourData]} />);
 
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
         const endButton = screen.getByRole('button', { name: 'Override end' });
-        await act(async () => {
-          await userEvent.click(endButton);
-        });
+        await user.click(endButton);
         expect(handleEnd).toBeCalledTimes(1);
         expect(customOnEnd).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument();
       });
       it('calls onEscape on escape button key press', async () => {
+        const user = userEvent.setup();
         render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
         const container = screen.getByRole('dialog');
         container.focus();
-        await act(async () => {
-          await userEvent.keyboard('{escape}');
-        });
+        await user.keyboard('{Escape}');
         expect(handleEscape).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 3')).not.toBeInTheDocument();
       });

package/src/ProductTour/index.jsx

@@ -46,7 +46,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
 
   useEffect(() => {
     const handleEsc = (event) => {
-      if (event.keyCode === 27) {
+      if (event.key === 'Escape') {
         setIsTourEnabled(false);
         if (onEscape) {
           onEscape();

package/src/Scrollable/Scrollable.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react'; // (or /dom, /vue, ...)
-import useIsVisible from '../hooks/useIsVisible';
+import useIsVisible from '../hooks/useIsVisibleHook';
 
 import Scrollable, { CLASSNAME_SCROLL_BOTTOM, CLASSNAME_SCROLL_TOP } from '.';
 
-jest.mock('../hooks/useIsVisible');
+jest.mock('../hooks/useIsVisibleHook');
 
 function rangeOfNumbers() {
   return Array.from({ length: 50 }, (v, k) => k + 1);

package/src/Scrollable/index.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import useIsVisible from '../hooks/useIsVisible';
+import useIsVisible from '../hooks/useIsVisibleHook';
 
 export const CLASSNAME_SCROLL_TOP = 'pgn__scrollable-body-scroll-top';
 export const CLASSNAME_SCROLL_BOTTOM = 'pgn__scrollable-body-scroll-bottom';

package/src/SearchField/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 .pgn__searchfield {
@@ -129,5 +130,5 @@
 .pgn__searchfield__iconbutton-submit,
 .pgn__searchfield__iconbutton-reset {
   flex-shrink: 0;
-  margin-inline-end: map-get($spacers, 1);
+  margin-inline-end: map.get($spacers, 1);
 }

package/src/SelectableBox/tests/SelectableBox.test.jsx

@@ -123,12 +123,13 @@ describe('<SelectableBox />', () => {
       rerender(<SelectableRadio checked />);
       expect(radio.className).toContain('pgn__selectable_box-active');
     });
-    it('ref is passed to onClick function', () => {
+    it('ref is passed to onClick function', async () => {
+      const user = userEvent.setup();
       let inputRef;
       const onClick = (ref) => { inputRef = ref; };
       render(<SelectableRadio onClick={onClick} />);
       const radio = screen.getByRole('button');
-      userEvent.click(radio);
+      await user.click(radio);
       expect(inputRef).not.toBeFalsy();
     });
   });

package/src/StatusAlert/StatusAlert.test.jsx

@@ -113,17 +113,21 @@ describe('<StatusAlert />', () => {
     });
 
     it('does nothing on invalid keystroke q', async () => {
+      const user = userEvent.setup();
       const closeButton = screen.getByRole('button');
       expect(document.activeElement).toEqual(closeButton);
       closeButton.focus();
-      await userEvent.keyboard('{q}');
+      await user.keyboard('{q}');
       expect(document.activeElement).toEqual(closeButton);
     });
 
     it('does nothing on invalid keystroke + ctrl', async () => {
+      const user = userEvent.setup();
       const closeButton = screen.getByRole('button');
       expect(document.activeElement).toEqual(closeButton);
-      await userEvent.keyboard('{ctrl>}{tab}{/ctrl}');
+      // This was '{Control>}{Tab}{/Control}' before, but that _does_ seem to be changing the focus in newer RTL/React.
+      // I don't think that was the point of the test though, so it's 'z' for now.
+      await user.keyboard('{Control>}z{/Control}');
       expect(document.activeElement).toEqual(closeButton);
     });
   });

package/src/Stepper/StepperHeader.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import StepperHeaderStep from './StepperHeaderStep';
 import { StepperContext } from './StepperContext';
-import useWindowSize from '../hooks/useWindowSize';
+import useWindowSize from '../hooks/useWindowSizeHook';
 import breakpoints, { Size } from '../utils/breakpoints';
 
 function StepListSeparator() {

package/src/Stepper/tests/Stepper.test.jsx

@@ -7,7 +7,7 @@ import { stepsReducer } from '../StepperContext';
 
 const mockWindowSize = { width: 1000, height: 1000 };
 
-jest.mock('../../hooks/useWindowSize', () => () => mockWindowSize);
+jest.mock('../../hooks/useWindowSizeHook', () => () => mockWindowSize);
 
 function Example({
   // eslint-disable-next-line react/prop-types

package/src/Table/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
@@ -23,7 +24,7 @@ $table-dark-bg:               theme-color("gray", "hover") !default;
 $table-dark-accent-bg:        rgba($white, .05) !default;
 $table-dark-hover-color:      $table-dark-color !default;
 $table-dark-hover-bg:         rgba($white, .075) !default;
-$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+$table-dark-border-color:     color.adjust($table-dark-bg, $lightness: 7.5%) !default;
 $table-dark-color:            $white !default;
 
 $table-striped-order:         odd !default;