@openedx/paragon 22.13.0 → 22.15.0

package/src/Hyperlink/index.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {
+  type BsPrefixRefForwardingComponent as ComponentWithAsProp,
+  type BsPrefixProps,
+} from 'react-bootstrap/esm/helpers';
+import { defineMessages, useIntl } from 'react-intl';
 import { Launch } from '../../icons';
 import Icon from '../Icon';
+// @ts-ignore
+import { customPropTypeRequirement } from '../utils/propTypes/utils';
 
-export const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
-export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
-
-interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
+export interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
   /** specifies the URL */
-  destination: string;
+  destination?: string;
   /** Content of the hyperlink */
   children: React.ReactNode;
   /** Custom class names for the hyperlink */
@@ -24,22 +28,42 @@ interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'
   isInline?: boolean;
   /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon?: boolean;
+  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
+   * loaded into the same browsing context as the current one.
+   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
+   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
+   */
   target?: '_blank' | '_self';
 }
 
-const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
+export type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;
+
+const messages = defineMessages({
+  externalLinkAltText: {
+    id: 'Hyperlink.externalLinkAltText',
+    defaultMessage: 'in a new tab',
+  },
+  externalLinkTitle: {
+    id: 'Hyperlink.externalLinkTitle',
+    defaultMessage: 'Opens in a new tab',
+  },
+});
+
+const Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({
+  as: Component = 'a',
   className,
   destination,
   children,
-  target,
+  target = '_self',
   onClick,
   externalLinkAlternativeText,
   externalLinkTitle,
-  variant,
-  isInline,
-  showLaunchIcon,
+  variant = 'default',
+  isInline = false,
+  showLaunchIcon = true,
   ...attrs
 }, ref) => {
+  const intl = useIntl();
   let externalLinkIcon;
 
   if (target === '_blank') {
@@ -63,11 +87,11 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
       externalLinkIcon = (
         <span
           className="pgn__hyperlink__external-icon"
-          title={externalLinkTitle}
+          title={externalLinkTitle || intl.formatMessage(messages.externalLinkTitle)}
         >
           <Icon
             src={Launch}
-            screenReaderText={externalLinkAlternativeText}
+            screenReaderText={externalLinkAlternativeText || intl.formatMessage(messages.externalLinkAltText)}
             style={{ height: '1em', width: '1em' }}
             data-testid="hyperlink-icon"
           />
@@ -76,8 +100,13 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
     }
   }
 
+  const additionalProps: Record<string, any> = { ...attrs };
+  if (destination) {
+    additionalProps.href = destination;
+  }
+
   return (
-    <a
+    <Component
       ref={ref}
       className={classNames(
         'pgn__hyperlink',
@@ -88,32 +117,29 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
         },
         className,
       )}
-      href={destination}
       target={target}
       onClick={onClick}
-      {...attrs}
+      {...additionalProps}
     >
       {children}
       {externalLinkIcon}
-    </a>
+    </Component>
   );
 });
 
-Hyperlink.defaultProps = {
-  className: undefined,
-  target: '_self',
-  onClick: () => {},
-  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,
-  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,
-  variant: 'default',
-  isInline: false,
-  showLaunchIcon: true,
-};
-
 Hyperlink.propTypes = {
-  /** specifies the URL */
-  destination: PropTypes.string.isRequired,
+  /** specifies the component element type to render for the hyperlink */
+  // @ts-ignore
+  as: PropTypes.elementType,
+  /** specifies the URL; required iff `as` prop is a standard anchor tag */
+  destination: customPropTypeRequirement(
+    PropTypes.string,
+    ({ as }: { as: React.ElementType }) => as && as === 'a',
+    // "[`destination` is required when]..."
+    'the `as` prop is a standard anchor element (i.e., "a")',
+  ),
   /** Content of the hyperlink */
+  // @ts-ignore
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,
@@ -137,4 +163,19 @@ Hyperlink.propTypes = {
   showLaunchIcon: PropTypes.bool,
 };
 
+Hyperlink.defaultProps = {
+  as: 'a',
+  className: undefined,
+  destination: undefined,
+  externalLinkAlternativeText: undefined,
+  externalLinkTitle: undefined,
+  isInline: false,
+  onClick: undefined,
+  showLaunchIcon: true,
+  target: '_self',
+  variant: 'default',
+};
+
+Hyperlink.displayName = 'Hyperlink';
+
 export default Hyperlink;

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/MailtoLink/MailtoLink.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 
 import MailtoLink from '.';
 
@@ -11,10 +12,18 @@ const content = 'content';
 
 const baseProps = { subject, body, content };
 
+function MailtoLinkWrapper(props) {
+  return (
+    <IntlProvider locale="en">
+      <MailtoLink {...props} />
+    </IntlProvider>
+  );
+}
+
 describe('correct rendering', () => {
   it('renders MailtoLink with single to, cc, and bcc recipient', () => {
     const singleRecipientLink = (
-      <MailtoLink
+      <MailtoLinkWrapper
         {...baseProps}
         to={emailAddress}
         cc={emailAddress}
@@ -31,7 +40,7 @@ describe('correct rendering', () => {
 
   it('renders mailtoLink with many to, cc, and bcc recipients', () => {
     const multiRecipientLink = (
-      <MailtoLink
+      <MailtoLinkWrapper
         {...baseProps}
         to={emailAddresses}
         cc={emailAddresses}
@@ -46,7 +55,7 @@ describe('correct rendering', () => {
   });
 
   it('renders empty mailtoLink', () => {
-    const { getByText } = render(<MailtoLink content={content} />);
+    const { getByText } = render(<MailtoLinkWrapper content={content} />);
     const linkElement = getByText('content');
     expect(linkElement.getAttribute('href')).toEqual('mailto:');
   });

package/src/Menu/Menu.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
@@ -20,15 +21,17 @@ describe('Menu Item renders correctly', () => {
 
   it('renders as expected with menu items', () => {
     const tree = renderer.create((
-      <Menu>
-        <MenuItem> A Menu Item</MenuItem>
-        <MenuItem iconBefore={Add} stoven>A Menu Item With an Icon Before</MenuItem>
-        <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
-        <MenuItem disabled>A Disabled Menu Item</MenuItem>
-        <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
-        <MenuItem as={Button} variant="primary" size="inline">A Button Menu Item</MenuItem>
-        <MenuItem as={Form.Checkbox}>A Checkbox Menu Item</MenuItem>
-      </Menu>
+      <IntlProvider locale="en">
+        <Menu>
+          <MenuItem> A Menu Item</MenuItem>
+          <MenuItem iconBefore={Add} stoven>A Menu Item With an Icon Before</MenuItem>
+          <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
+          <MenuItem disabled>A Disabled Menu Item</MenuItem>
+          <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
+          <MenuItem as={Button} variant="primary" size="inline">A Button Menu Item</MenuItem>
+          <MenuItem as={Form.Checkbox}>A Checkbox Menu Item</MenuItem>
+        </Menu>
+      </IntlProvider>
     )).toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -71,48 +74,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';
 

package/src/Menu/SelectMenu.test.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
 import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
@@ -10,27 +12,44 @@ import Hyperlink from '../Hyperlink';
 const app = document.createElement('div');
 document.body.appendChild(app);
 
+function SelectMenuWrapper({ children }) {
+  return (
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  );
+}
+SelectMenuWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 function DefaultSelectMenu(props) {
-  return <SelectMenu {...props}><MenuItem>A Menu Item</MenuItem></SelectMenu>;
+  return (
+    <SelectMenuWrapper>
+      <SelectMenu {...props}><MenuItem>A Menu Item</MenuItem></SelectMenu>
+    </SelectMenuWrapper>
+  );
 }
 
 function defaultSelectMenu() {
   return (
-    <SelectMenu>
-      <MenuItem>A Menu Item</MenuItem>
-      <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
-      <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
-      <MenuItem disabled>A Disabled Menu Item</MenuItem>
-      <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
-      <MenuItem>Falstaff</MenuItem>
-      <MenuItem>Scipio</MenuItem>
-      <MenuItem>Faustus</MenuItem>
-      <MenuItem>Cordelia</MenuItem>
-      <MenuItem>Renfrancine</MenuItem>
-      <MenuItem>Stovern</MenuItem>
-      <MenuItem>Kainian</MenuItem>
-      <MenuItem>M. Hortens</MenuItem>
-    </SelectMenu>
+    <SelectMenuWrapper>
+      <SelectMenu>
+        <MenuItem>A Menu Item</MenuItem>
+        <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
+        <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
+        <MenuItem disabled>A Disabled Menu Item</MenuItem>
+        <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
+        <MenuItem>Falstaff</MenuItem>
+        <MenuItem>Scipio</MenuItem>
+        <MenuItem>Faustus</MenuItem>
+        <MenuItem>Cordelia</MenuItem>
+        <MenuItem>Renfrancine</MenuItem>
+        <MenuItem>Stovern</MenuItem>
+        <MenuItem>Kainian</MenuItem>
+        <MenuItem>M. Hortens</MenuItem>
+      </SelectMenu>
+    </SelectMenuWrapper>
   );
 }
 

package/src/Menu/__snapshots__/Menu.test.jsx.snap

@@ -95,7 +95,6 @@ exports[`Menu Item renders correctly renders as expected with menu items 1`] = `
   <a
     className="pgn__hyperlink default-link standalone-link pgn__menu-item"
     href="https://en.wikipedia.org/wiki/Hyperlink"
-    onClick={[Function]}
     target="_self"
   >
     <span

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;
 }