react imports cleanup 1

babel.config.json

@@ -1,14 +1,13 @@
 {
   "presets": [
     ["@babel/preset-env", { "modules": false } ],
-    ["@babel/preset-react", { "useSpread": true } ],
+    ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ],
     "@babel/preset-typescript"
   ],
   "env": {
     "test": {
       "presets": [
         ["@babel/preset-env", {}],
-        ["@babel/preset-react", { "useSpread": true } ],
         "@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,5 +1,6 @@
 /* eslint-disable react/require-default-props */
-import React, {
+import type { ComponentType, ReactElement, ForwardedRef } from 'react';
+import {
   useCallback,
   useEffect,
   useState,
@@ -46,15 +47,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 +97,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 +111,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/Breadcrumb/Breadcrumb.test.tsx

@@ -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.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import classNames from 'classnames';
 
 interface BreadcrumbLinkProps {
@@ -39,7 +39,7 @@ export default function BreadcrumbLink({ as, clickHandler = undefined, linkProps
     addtlProps.onClick = clickHandler;
   }
 
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,

src/Breadcrumb/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import classNames from 'classnames';
 
 import BreadcrumbLink from './BreadcrumbLink';
@@ -46,7 +46,7 @@ function Breadcrumb({
     >
       <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
         {displayLinks.map((link, i) => (
-          <React.Fragment key={link.label}>
+          <Fragment key={link.label}>
             <li className={classNames('list-inline-item')}>
               <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />
             </li>
@@ -56,7 +56,7 @@ function Breadcrumb({
                 {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}
               </li>
               )}
-          </React.Fragment>
+          </Fragment>
         ))}
         {!isMobile && activeLabel && <li className="list-inline-item active" key="active" aria-current="page">{activeLabel}</li>}
       </ol>

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

src/Button/index.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+import type {
+  ElementType, ComponentType, ReactNode, ForwardedRef, AriaRole,
+} from 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
 import BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
@@ -29,7 +32,7 @@ type OtherDeprecatedValue = string & {}; // Allow any other string value for now
 
 export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
   /** Set a custom element for this component (default: `button`, with `type="button"`). */
-  as?: React.ElementType;
+  as?: ElementType;
   size?: 'sm' | 'md' | 'lg' | 'inline';
   /**
    * An icon component to render. Example:
@@ -38,15 +41,15 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
    * <Button iconBefore={Close}>Close</Button>
    * ```
    */
-  iconBefore?: React.ComponentType;
+  iconBefore?: ComponentType;
   /**
    * An icon component to render. Example:
    * ```
    * import { Close } from '@openedx/paragon/icons';
    * <Button iconAfter={Close}>Close</Button>
    * ```
    */
-  iconAfter?: React.ComponentType;
+  iconAfter?: ComponentType;
 
   // The following are the same as in BaseButtonProps, but we re-define them to add documentation.
   // The upstream type defintions do not have any comments/docs.
@@ -56,7 +59,7 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
   /** Optional: Specify additional class name(s) to apply to the button */
   className?: string;
   /** Specifies the text that is displayed within the button. */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Specifies variant to use.
    * Can be one of the base variants: `primary`, `secondary`, `tertiary`, `brand`, `success`, `danger`, `warning`,
    * `info`, `dark`, `light`, `link`,
@@ -66,13 +69,13 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
   variant?: BaseVariant | `inverse-${BaseVariant}` | `outline-${BaseVariant}` | `inverse-outline-${BaseVariant}` | OtherDeprecatedValue;
 }
 
-const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({
+const Button: ComponentWithAsProp<'button', ButtonProps> = forwardRef(({
   children,
   iconAfter,
   iconBefore,
   size,
   ...props
-}: ButtonProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+}: ButtonProps, ref: ForwardedRef<HTMLDivElement>) => (
   <BaseButton
     size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
     {...props}
@@ -91,9 +94,9 @@ const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({
 
 interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
   /** Specifies element type for this component. */
-  as?: React.ElementType;
+  as?: ElementType;
   /** An ARIA role describing the button group (default: `group`). */
-  role?: React.AriaRole;
+  role?: AriaRole;
   /** Specifies the size for all Buttons in the group (default: `md`). */
   size?: 'sm' | 'md' | 'lg' | 'inline';
   /** Display as a button toggle group (default: `false`). */
@@ -105,7 +108,7 @@ interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
 }
 
 const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
-  React.forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+  forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) => (
     <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />
   ))
 );
@@ -115,13 +118,13 @@ const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
 
 interface ButtonToolbarProps extends BaseButtonToolbarProps {
   /** An ARIA role describing the button group (default: `toolbar`). */
-  role?: React.AriaRole;
+  role?: AriaRole;
   /** Overrides underlying component base CSS class name (default: `btn-toolbar`) */
   bsPrefix?: string;
 }
 
 const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (
-  React.forwardRef((props: ButtonToolbarProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+  forwardRef((props: ButtonToolbarProps, ref: ForwardedRef<HTMLDivElement>) => (
     <BaseButtonToolbar {...props} ref={ref} />
   ))
 );

src/asInput/asInput.test.jsx

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