react imports cleanup 1

babel.config.json

@@ -1,14 +1,14 @@
 {
   "presets": [
     ["@babel/preset-env", { "modules": false } ],
-    ["@babel/preset-react", { "useSpread": true } ],
+    ["@babel/preset-react", { "useSpread": true} ],
     "@babel/preset-typescript"
   ],
   "env": {
     "test": {
       "presets": [
         ["@babel/preset-env", {}],
-        ["@babel/preset-react", { "useSpread": true } ],
+        ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ],
         "@babel/preset-typescript"
       ]
     }

package.json

@@ -107,8 +107,8 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17 || ^18",
-    "react-dom": "^16.8.6 || ^17 || ^18",
+    "react": "^16.14 || ^17 || ^18",
+    "react-dom": "^16.14 || ^17 || ^18",
     "react-intl": "^5.25.1 || ^6.4.0"
   },
   "devDependencies": {

src/ActionRow/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
+import { createElement } from 'react';
 import classNames from 'classnames';
 
-interface ActionRowProps extends React.HTMLAttributes<HTMLElement> {
+interface ActionRowProps extends HTMLAttributes<HTMLElement> {
   /** Specifies the base element */
-  as?: React.ElementType;
+  as?: ElementType;
   /** Specifies the contents of the row */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Specifies class name to append to the base element */
   className?: string;
   /** Specifies whether row should be displayed horizontally */
@@ -18,7 +19,7 @@ function ActionRow({
   children,
   ...props
 }: ActionRowProps) {
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,

src/Alert/Alert.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { ReactNode } from 'react';
 import { IntlProvider } from 'react-intl';
 import renderer, { act } from 'react-test-renderer';
 import { render, screen, within } from '@testing-library/react';
@@ -11,9 +11,9 @@ import Alert, { AlertProps } from '.';
 
 /** A compile time check. Whatever React elements this wraps won't run at runtime. */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function CompileCheck(_props: { children: React.ReactNode }) { return null; }
+function CompileCheck(_props: { children: ReactNode }) { return null; }
 
-function AlertWrapper({ children, ...props }: AlertProps & { children: React.ReactNode }) {
+function AlertWrapper({ children, ...props }: AlertProps & { children: ReactNode }) {
   return (
     <IntlProvider locale="en" messages={{}}>
       <Alert {...props}>

src/Alert/index.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable react/require-default-props */
+import type { ComponentType, ReactElement, ForwardedRef } from 'react';
+// react import needed to support JSX outside functions
 import React, {
   useCallback,
   useEffect,
@@ -11,6 +13,7 @@ import React, {
   RefAttributes,
   cloneElement,
 } from 'react';
+
 import classNames from 'classnames';
 import {
   Alert as BaseAlert,
@@ -46,15 +49,15 @@ export interface AlertProps extends BaseProps {
   transition?: boolean | TransitionComponent;
   children?: ReactNode;
   /** Icon that will be shown in the alert */
-  icon?: React.ComponentType<IconProps>;
+  icon?: ComponentType<IconProps>;
   /** Whether the alert is shown. */
   show?: boolean;
   /** Whether the alert is dismissible. Defaults to false. */
   dismissible?: boolean;
   /** Optional callback function for when the alert it dismissed. */
   onClose?: () => void;
   /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */
-  actions?: React.ReactElement[];
+  actions?: ReactElement[];
   /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */
   stacked?: boolean;
   /** Sets the text for alert close button, defaults to 'Dismiss'. */
@@ -96,7 +99,7 @@ const Alert = forwardRef(({
   stacked = false,
   show = true,
   ...props
-}: AlertProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+}: AlertProps, ref: ForwardedRef<HTMLDivElement>) => {
   const [isStacked, setIsStacked] = useState(stacked);
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
   const actionButtonSize = 'sm';
@@ -110,7 +113,7 @@ const Alert = forwardRef(({
   }, [isExtraSmall, stacked]);
 
   const cloneActionElement = useCallback(
-    (Action: React.ReactElement) => {
+    (Action: ReactElement) => {
       const addtlActionProps = { size: actionButtonSize, key: Action.props.children };
       return cloneElement(Action, addtlActionProps);
     },

src/Annotation/Annotation.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 import Annotation from '.';

src/Annotation/index.tsx

@@ -1,9 +1,10 @@
-import React, { ForwardedRef } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, ForwardedRef } from 'react';
 import classNames from 'classnames';
 
-interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface AnnotationProps extends HTMLAttributes<HTMLSpanElement> {
   /** Specifies contents of the component. */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Specifies class name to append to the base element. */
   className?: string;
   /** Specifies variant to use. */
@@ -12,7 +13,7 @@ interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
   arrowPlacement?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-const Annotation = React.forwardRef(({
+const Annotation = forwardRef(({
   className,
   variant = 'success',
   children,

src/Avatar/Avatar.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import Avatar from './index';
 

src/Avatar/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import type { ImgHTMLAttributes } from 'react';
 import classNames from 'classnames';
 // @ts-ignore
 import defaultAvatar from './default-avatar.svg';
 
-export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
   /** Alt text. Usually the user's name */
   alt?: string;
   /** Size of the avatar */

src/Badge/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+// React import needed to support JSX outside functions, if removed build-docs fails
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import BaseBadge from 'react-bootstrap/Badge';
 
-const Badge = React.forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);
+const Badge = forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);
 
 const STYLE_VARIANTS = [
   'primary',

src/Breadcrumb/Breadcrumb.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

src/Breadcrumb/BreadcrumbLink.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -24,7 +24,7 @@ export default function BreadcrumbLink({ as, clickHandler, linkProps }) {
     addtlProps.onClick = clickHandler;
   }
 
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,

src/Breadcrumb/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -14,28 +14,30 @@ function Breadcrumb({
   const displayLinks = isMobile ? [links[linkCount - 1]] : links;
 
   return (
-    <nav
-      aria-label={ariaLabel}
-      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}
-      {...props}
-    >
-      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
-        {displayLinks.map((link, i) => (
-          <React.Fragment key={link.label}>
-            <li className={classNames('list-inline-item')}>
-              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />
-            </li>
-            {(activeLabel || ((i + 1) < linkCount))
+    (
+      <nav
+        aria-label={ariaLabel}
+        className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}
+        {...props}
+      >
+        <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
+          {displayLinks.map((link, i) => (
+            <Fragment key={link.label}>
+              <li className={classNames('list-inline-item')}>
+                <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />
+              </li>
+              {(activeLabel || ((i + 1) < linkCount))
               && (
               <li className="list-inline-item" role="presentation">
                 {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}
               </li>
               )}
-          </React.Fragment>
-        ))}
-        {!isMobile && activeLabel && <li className="list-inline-item active" key="active" aria-current="page">{activeLabel}</li>}
-      </ol>
-    </nav>
+            </Fragment>
+          ))}
+          {!isMobile && activeLabel && <li className="list-inline-item active" key="active" aria-current="page">{activeLabel}</li>}
+        </ol>
+      </nav>
+    )
   );
 }
 

src/Bubble/Bubble.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 import Bubble from '.';

src/Bubble/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import type { ReactNode, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 
 export type BubbleVariant = 'primary' | 'success' | 'error' | 'warning';
 
 export interface BubbleProps {
   /** Specifies contents of the component. */
-  children: React.ReactNode;
+  children: ReactNode;
   /** The `Bubble` style variant to use. */
   variant?: BubbleVariant;
   /** Activates disabled variant. */
@@ -16,14 +17,14 @@ export interface BubbleProps {
   expandable?: boolean;
 }
 
-const Bubble = React.forwardRef(({
+const Bubble = forwardRef(({
   variant = 'primary',
   className,
   children = null,
   disabled = false,
   expandable = false,
   ...props
-}: BubbleProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+}: BubbleProps, ref: ForwardedRef<HTMLDivElement>) => (
   <div
     ref={ref}
     className={classNames(

src/Button/Button.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

src/Button/ButtonGroup.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import Button, { ButtonGroup } from './index';

src/Button/ButtonToolbar.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import { ButtonToolbar } from './index';