@openedx/paragon 23.0.0-alpha.2 → 23.0.0-alpha.4

package/src/Modal/modal-dialog.mdx

@@ -31,10 +31,13 @@ label for the dialog element.
   const variants = ['default', 'warning', 'danger', 'success', 'dark'];
   const [modalSize, setModalSize] = useState('md');
   const [modalVariant, setModalVariant] = useState('default');
+
   return (
     <>
       <div className="d-flex">
-        <Button variant="outline-primary" onClick={open}>Open standard modal dialog</Button>
+        <Button variant="outline-primary" onClick={open}>
+          Open standard modal dialog
+        </Button>
       </div>
       <ModalDialog
         title="My dialog"
@@ -44,6 +47,7 @@ label for the dialog element.
         variant={modalVariant}
         hasCloseButton
         isFullscreenOnMobile
+        isOverflowVisible
       >
         <ModalDialog.Header>
           <ModalDialog.Title>
@@ -73,7 +77,11 @@ label for the dialog element.
             </Form.RadioSet>
           </Form.Group>
           <p>
-            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
+            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
+            Beard man braid migas single-origin coffee forage ramps. Tumeric messenger
+            bag bicycle rights wayfarers, try-hard cronut blue bottle health goth.
+            Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa
+            semiotics woke next level organic roof party +1 try-hard.
           </p>
         </ModalDialog.Body>
 
@@ -82,7 +90,7 @@ label for the dialog element.
             <ModalDialog.CloseButton variant="tertiary">
               Cancel
             </ModalDialog.CloseButton>
-            <Button variant="primary">
+            <Button>
               A button
             </Button>
           </ActionRow>
@@ -102,10 +110,13 @@ label for the dialog element.
   const variants = ['default', 'warning', 'danger', 'success', 'dark'];
   const [modalSize, setModalSize] = useState('md');
   const [modalVariant, setModalVariant] = useState('dark');
+
   return (
     <>
       <div className="d-flex">
-        <Button variant="outline-primary" onClick={open}>Open marketing modal dialog</Button>
+        <Button variant="outline-primary" onClick={open}>
+          Open marketing modal dialog
+        </Button>
       </div>
       <ModalDialog
         title="My dialog"
@@ -114,6 +125,7 @@ label for the dialog element.
         size={modalSize}
         variant={modalVariant}
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background
@@ -144,7 +156,11 @@ label for the dialog element.
             </Form.RadioSet>
           </Form.Group>
           <p>
-            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
+            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
+            Beard man braid migas single-origin coffee forage ramps. Tumeric messenger
+            bag bicycle rights wayfarers, try-hard cronut blue bottle health goth.
+            Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa
+            semiotics woke next level organic roof party +1 try-hard.
           </p>
         </ModalDialog.Body>
 
@@ -153,7 +169,80 @@ label for the dialog element.
             <ModalDialog.CloseButton variant="tertiary">
               Cancel
             </ModalDialog.CloseButton>
-            <Button variant="primary">
+            <Button>
+              A button
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </>
+  )
+}
+```
+
+## Overflow visibility handling
+
+The `isOverflowVisible` toggle controls whether content that extends beyond the modal's viewport boundaries is visible.
+When enabled (`isOverflowVisible` is set to `true`), any overflow content, such as dropdowns or tooltips,
+will be displayed outside the modal's main area instead of being clipped.
+
+In this example, switching `isOverflowVisible` on and off affects the visibility of the dropdown options in
+the autosuggest field, showing how overflow handling impacts content display within a modal.
+
+```jsx live
+() => {
+  const [isOpen, open, close] = useToggle(false);
+  const [isOn, setOn, setOff, toggle] = useToggle(false);
+
+  return (
+    <>
+      <div className="d-flex">
+        <Button variant="outline-primary" onClick={open}>
+          Open standard modal dialog
+        </Button>
+      </div>
+      <ModalDialog
+        title="My dialog"
+        isOpen={isOpen}
+        onClose={close}
+        hasCloseButton
+        isFullscreenOnMobile
+        isOverflowVisible={isOn}
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            I'm a dialog box
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+
+        <ModalDialog.Body>
+          <Stack className="mb-3" direction="horizontal" gap={2}>
+            <Form.Switch checked={isOn} onChange={toggle}>
+              isOverflowVisible
+            </Form.Switch>
+            {isOn
+              ? <Badge variant="success">{JSON.stringify(isOn)}</Badge>
+              : <Badge variant="light">{JSON.stringify(isOn)}</Badge>
+            }
+          </Stack>
+          <Form.Autosuggest
+            aria-label="form autosuggest"
+            helpMessage="Select language"
+            placeholder="Open autosuggest dropdown"
+          >
+            <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
+          </Form.Autosuggest>
+        </ModalDialog.Body>
+
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              Cancel
+            </ModalDialog.CloseButton>
+            <Button>
               A button
             </Button>
           </ActionRow>

package/src/Modal/tests/ModalDialog.test.jsx

@@ -24,6 +24,7 @@ describe('ModalDialog', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Header>
           <ModalDialog.Title>The title</ModalDialog.Title>
@@ -58,6 +59,7 @@ describe('ModalDialog with Hero', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background backgroundSrc="imageurl" />

package/src/Modal/tests/ModalPopupNoMock.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ModalPopup from '../ModalPopup';
+
+describe('<ModalPopup />', () => {
+  const mockPositionRef = React.createRef();
+
+  describe('when isOpen', () => {
+    const isOpen = true;
+    const closeFn = jest.fn();
+
+    it('calls close on click events but not touchstart events', async () => {
+      render(
+        <ModalPopup
+          positionRef={mockPositionRef}
+          isOpen={isOpen}
+          onClose={closeFn}
+        >
+          <div>Modal Contents</div>
+        </ModalPopup>,
+      );
+      await fireEvent.touchStart(document.body);
+      expect(closeFn).not.toHaveBeenCalled();
+      await userEvent.click(document.body);
+      expect(closeFn).toHaveBeenCalled();
+    });
+  });
+});

package/src/Nav/index.scss

@@ -1,5 +1,13 @@
 @import "mixins";
 
+:root {
+  --pgn-border-color-nav-tabs-link-border-hover:
+    var(--pgn-border-color-nav-tabs-link-border-hover-top)
+    var(--pgn-border-color-nav-tabs-link-border-hover-right)
+    var(--pgn-border-color-nav-tabs-link-border-hover-bottom)
+    var(--pgn-border-color-nav-tabs-link-border-hover-left);
+}
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with

package/src/Overlay/{index.jsx → index.tsx}

@@ -1,9 +1,14 @@
 import React from 'react';
-import BaseOverlay from 'react-bootstrap/Overlay';
-import BaseOverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import BaseOverlay, { type OverlayProps, type Placement } from 'react-bootstrap/Overlay';
+import BaseOverlayTrigger, { type OverlayTriggerProps, type OverlayTriggerType } from 'react-bootstrap/OverlayTrigger';
+import Fade from 'react-bootstrap/Fade';
 import PropTypes from 'prop-types';
 
-const PLACEMENT_VARIANTS = [
+// Note: The only thing this file adds to the base component is propTypes validation.
+// As more Paragon consumers adopt TypeScript, we could consider removing almost all of this code
+// and just re-export the Overlay and OverlayTrigger components from react-bootstrap unmodified.
+
+const PLACEMENT_VARIANTS: Placement[] = [
   'auto-start',
   'auto',
   'auto-end',
@@ -21,16 +26,16 @@ const PLACEMENT_VARIANTS = [
   'left-start',
 ];
 
-const TRIGGER_VARIANTS = [
+const TRIGGER_VARIANTS: OverlayTriggerType[] = [
   'hover',
   'click',
   'focus',
 ];
 
-function Overlay(props) {
+function Overlay(props: OverlayProps) {
   return <BaseOverlay {...props} />;
 }
-function OverlayTrigger(props) {
+function OverlayTrigger(props: OverlayTriggerProps) {
   return (
     <BaseOverlayTrigger {...props}>
       {props.children}
@@ -88,7 +93,7 @@ Overlay.propTypes = {
    * Animate the entering and exiting of the Overlay. `true` will use the `<Fade>` transition,
    * or a custom react-transition-group `<Transition>` component can be provided.
    */
-  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.elementType]),
+  transition: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
 };
 
 OverlayTrigger.propTypes = {
@@ -144,7 +149,7 @@ Overlay.defaultProps = {
   rootCloseEvent: undefined,
   show: false,
   target: undefined,
-  transition: true,
+  transition: Fade,
 };
 
 OverlayTrigger.defaultProps = {

package/src/PageBanner/index.scss

@@ -4,12 +4,12 @@
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
   background-color: var(--pgn-page-baner-bg, inherit);
   color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
 

package/src/Pagination/pagination-bootstrap.scss

@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-pagination-focus-box-shadow:
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-x)
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-y)
+    var(--pgn-elevation-pagination-focus-box-shadow-blur)
+    var(--pgn-elevation-pagination-focus-box-shadow-spread)
+    var(--pgn-elevation-pagination-focus-box-shadow-color);
+}
+
 .pagination {
   display: flex;
 

package/src/Popover/index.scss

@@ -7,7 +7,7 @@
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: var(--pgn-typography-font-size-h5);
+    font-size: var(--pgn-typography-font-size-h5-base);
   }
 
   .pgn__icon {

package/src/ProductTour/Checkpoint.scss

@@ -88,7 +88,7 @@
   }
 
   #pgn__checkpoint-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }

package/src/ProgressBar/bootstrap-progress.scss

@@ -1,3 +1,18 @@
+:root {
+  --pgn-transition-progress-bar-animation-timing:
+    var(--pgn-transition-progress-bar-animation-timing-duration)
+    var(--pgn-transition-progress-bar-animation-timing-timing-function)
+    var(--pgn-transition-progress-bar-animation-timing-iteration-count)
+    var(--pgn-transition-progress-bar-animation-timing-delay);
+
+  --pgn-transition-progress-bar-transition:
+    var(--pgn-transition-progress-bar-transition-property)
+    var(--pgn-transition-progress-bar-transition-duration)
+    var(--pgn-transition-progress-bar-transition-timing-function)
+    var(--pgn-transition-progress-bar-transition-delay)
+    var(--pgn-transition-progress-bar-transition-behavior);
+}
+
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
@@ -10,7 +25,7 @@
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
@@ -22,12 +37,12 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--pgn-color-progress-bar-bar-base);
+  color: var(--pgn-color-progress-bar-base);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 
-  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+  @include transition(var(--pgn-transition-progress-bar-transition));
 }
 
 .progress-bar-striped {
@@ -38,7 +53,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
-    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+    animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes;
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {

package/src/ProgressBar/index.scss

@@ -6,7 +6,7 @@
 }
 
 .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -22,7 +22,7 @@
     border: none;
 
     .progress-bar {
-      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+      background-color: var(--pgn-color-progress-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
@@ -87,6 +87,6 @@
   .pgn__progress-hint {
     box-sizing: border-box;
     padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }

package/src/Stepper/index.scss

@@ -56,7 +56,7 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: var(--pgn-typography-font-size-xs);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {

package/src/Sticky/index.scss

@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-sticky-shadow-bottom:
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-1-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-1-color),
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-2-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-2-color);
+}
+
 .pgn__sticky {
   display: flex;
   width: 100%;

package/src/Toast/index.scss

@@ -1,5 +1,17 @@
 @import "bootstrap-toast";
 
+:root {
+  --pgn-elevation-toast-box-shadow:
+    var(--pgn-elevation-toast-box-shadow-1-offset-x)
+    var(--pgn-elevation-toast-box-shadow-1-offset-y)
+    var(--pgn-elevation-toast-box-shadow-1-blur)
+    var(--pgn-elevation-toast-box-shadow-1-color),
+    var(--pgn-elevation-toast-box-shadow-2-offset-x)
+    var(--pgn-elevation-toast-box-shadow-2-offset-y)
+    var(--pgn-elevation-toast-box-shadow-2-blur)
+    var(--pgn-elevation-toast-box-shadow-2-color);
+}
+
 .toast {
   background-color: var(--pgn-color-toast-bg);
   box-shadow: var(--pgn-elevation-toast-box-shadow);
@@ -31,7 +43,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: var(--pgn-typography-font-size-sm);
       margin: 0;
       padding-right: .75rem;
     }

package/src/Tooltip/index.scss

@@ -1,3 +1,19 @@
+:root {
+  --pgn-elevation-tooltip-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-1-blur)
+      var(--pgn-elevation-tooltip-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-2-blur)
+      var(--pgn-elevation-tooltip-box-shadow-2-color)
+    );
+}
+
 // Base class
 .tooltip {
   position: absolute;

package/src/Tooltip/{index.jsx → index.tsx}

@@ -1,9 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import BaseTooltip from 'react-bootstrap/Tooltip';
+import BaseTooltip, { type TooltipProps as BaseTooltipProps } from 'react-bootstrap/Tooltip';
+import { type Placement } from 'react-bootstrap/Overlay';
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
 
-const PLACEMENT_VARIANTS = [
+interface TooltipProps extends BaseTooltipProps {
+  variant?: 'light';
+}
+
+const PLACEMENT_VARIANTS: Placement[] = [
   'auto-start',
   'auto',
   'auto-end',
@@ -21,7 +27,7 @@ const PLACEMENT_VARIANTS = [
   'left-start',
 ];
 
-const Tooltip = React.forwardRef(({
+const Tooltip: ComponentWithAsProp<'div', TooltipProps> = React.forwardRef(({
   children,
   variant,
   ...props

package/src/index.d.ts

@@ -5,9 +5,14 @@
 // Things that have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export { default as Bubble } from './Bubble';
+export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
+export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -20,7 +25,6 @@ export const Avatar: any; // from './Avatar';
 export const AvatarButton: any; // from './AvatarButton';
 export const Badge: any; // from './Badge';
 export const Breadcrumb: any; // from './Breadcrumb';
-export const Button: any, ButtonGroup: any, ButtonToolbar: any; // from './Button';
 export const
   Card: any,
   CardColumns: any,
@@ -72,8 +76,6 @@ export const
   FormAutosuggestOption: any,
   InputGroup: any;
 // from './Form';
-export const Hyperlink: any, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT: string, HYPER_LINK_EXTERNAL_LINK_TITLE: string; // from './Hyperlink';
-export const IconButton: any, IconButtonWithTooltip: any; // from './IconButton';
 export const IconButtonToggle: any; // from './IconButtonToggle';
 export const Input: any; // from './Input';
 export const InputSelect: any; // from './InputSelect';
@@ -106,7 +108,6 @@ export const
   NavLink: any;
 // from './Nav';
 export const Navbar: any, NavbarBrand: any, NAVBAR_LABEL: string; // from './Navbar';
-export const Overlay: any, OverlayTrigger: any; // from './Overlay';
 export const PageBanner: any, PAGE_BANNER_DISMISS_ALT_TEXT: string; // from './PageBanner';
 export const
   Pagination: any,
@@ -145,7 +146,6 @@ export const
 // from './Tabs';
 export const TextArea: any; // from './TextArea';
 export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
-export const Tooltip: any; // from './Tooltip';
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';
 export const ValidationMessage: any; // from './ValidationMessage';

package/src/index.js

@@ -1,13 +1,18 @@
-// To keep this file in sync with the .d.ts file, it's in the same order
-// and each line number is the same
+// Keep this file in sync with the .d.ts file (manually). It's in the same order
+// and each line number is the same, to make it easier.
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export { default as Bubble } from './Bubble';
+export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
+export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -20,7 +25,6 @@ export { default as Avatar } from './Avatar';
 export { default as AvatarButton } from './AvatarButton';
 export { default as Badge } from './Badge';
 export { default as Breadcrumb } from './Breadcrumb';
-export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export {
   default as Card,
   CardColumns,
@@ -69,8 +73,6 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
-export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
-export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as IconButtonToggle } from './IconButtonToggle';
 export { default as Image, Figure } from './Image';
 export { default as MailtoLink, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, MAIL_TO_LINK_EXTERNAL_LINK_TITLE } from './MailtoLink';
@@ -97,7 +99,6 @@ export {
   NavLink,
 } from './Nav';
 export { default as Navbar, NavbarBrand, NAVBAR_LABEL } from './Navbar';
-export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as PageBanner, PAGE_BANNER_DISMISS_ALT_TEXT } from './PageBanner';
 export {
   default as Pagination,
@@ -132,7 +133,6 @@ export {
   TabPane,
 } from './Tabs';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
-export { default as Tooltip } from './Tooltip';
 export { default as TransitionReplace } from './TransitionReplace';
 export { default as ValidationMessage } from './ValidationMessage';
 export { default as DataTable } from './DataTable';

package/src/{setupTest.js → setupTest.ts}

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import 'regenerator-runtime/runtime';
 
 import '@testing-library/jest-dom';