feat: Add TypeScript types for <Overlay>, <OverlayTrigger>, <Tooltip>…

…, <IconButton> (#3100)

* feat: add typings for <Overlay> and <OverlayTrigger>

* feat: add typings for <Tooltip>

* feat: add typings for <IconButton>

* chore: typing cleanups for <Chip> code

* feat: slightly more detailed types for <Chip/ChipIcon> - per review

src/Chip/ChipIcon.tsx

@@ -1,9 +1,7 @@
 import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
-// @ts-ignore
 import IconButton from '../IconButton';
-// @ts-ignore
 import { STYLE_VARIANTS } from './constants';
 
 export type ChipIconProps = {

src/ChipCarousel/index.tsx

@@ -4,9 +4,7 @@ import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 // @ts-ignore
 import { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';
-// @ts-ignore
 import IconButton from '../IconButton';
-// @ts-ignore
 import Icon from '../Icon';
 // @ts-ignore
 import { ArrowForward, ArrowBack } from '../../icons';

src/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -47,33 +47,11 @@ exports[`<IconButton /> renders with deprecated props 1`] = `
   <span
     className="btn-icon__icon-container"
   >
-    <svg
-      aria-hidden="true"
-      className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon"
-      data-icon="InfoOutlineIcon"
-      data-prefix="pgn"
-      focusable="false"
-      role="img"
-      style={{}}
-      viewBox="0 0 function SvgInfoOutline(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z",
-    fill: "currentColor"
-  }));
-} undefined"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill="currentColor"
-        style={{}}
-      />
-    </svg>
+    <span
+      aria-hidden={true}
+      className="btn-icon__icon"
+      id="Icon1"
+    />
   </span>
 </button>
 `;

src/IconButton/index.tsx

@@ -7,7 +7,7 @@ import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
-  iconAs?: typeof Icon | typeof FontAwesomeIcon,
+  iconAs?: React.ComponentType<any>,
   /** Additional CSS class[es] to apply to this button */
   className?: string;
   /** Alt text for your icon. For best practice, avoid using alt text to describe
@@ -75,11 +75,13 @@ const IconButton = React.forwardRef<HTMLButtonElement, Props>(({
       {...attrs}
     >
       <span className="btn-icon__icon-container">
-        <IconComponent
-          className={classNames('btn-icon__icon', iconClassNames)}
-          icon={icon as any}
-          src={src}
-        />
+        {IconComponent && (
+          <IconComponent
+            className={classNames('btn-icon__icon', iconClassNames)}
+            icon={icon as any}
+            src={src}
+          />
+        )}
       </span>
     </button>
   );

src/Overlay/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 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';
 
 // Note: The only thing this file adds to the base component is propTypes validation.
@@ -92,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 = {
@@ -148,7 +149,7 @@ Overlay.defaultProps = {
   rootCloseEvent: undefined,
   show: false,
   target: undefined,
-  transition: true,
+  transition: Fade,
 };
 
 OverlayTrigger.defaultProps = {

src/setupTest.ts

@@ -18,7 +18,3 @@ class ResizeObserver {
 }
 
 window.ResizeObserver = ResizeObserver;
-
-(window as any).crypto = {
-  getRandomValues: (arr: any) => crypto.randomBytes(arr.length),
-};

www/src/components/CodeBlock.tsx

@@ -37,7 +37,7 @@ const {
 
 export type CollapsibleLiveEditorTypes = {
   children: React.ReactNode;
-  clickToCopy: (arg: string) => void;
+  clickToCopy: () => void;
   handleCodeChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };
 

www/src/components/css-utilities-table/index.tsx

@@ -7,7 +7,7 @@ import { colorCSSDeclaration } from './utils';
 
 function CSSUtilitiesTable({ selectors }: CSSUtilities) {
   const [showPopover, setShowPopover] = useState<boolean>(false);
-  const [popoverTarget, setPopoverTarget] = useState<EventTarget | undefined>(undefined);
+  const [popoverTarget, setPopoverTarget] = useState<HTMLElement | undefined>(undefined);
   const [computedStyle, setComputedStyle] = useState<string>('');
 
   useEffect(() => {
@@ -21,7 +21,7 @@ function CSSUtilitiesTable({ selectors }: CSSUtilities) {
   }, []);
 
   const handleCSSVariableMouseEnter = (e: React.MouseEvent, declaration: string) => {
-    setPopoverTarget(e.target);
+    setPopoverTarget(e.target as HTMLElement);
     setShowPopover(true);
 
     const propertyName = declaration.split(':')[0];