react imports cleanup 11

babel.config.json

@@ -1,14 +1,14 @@
 {
   "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-react", { "useSpread": true, "runtime": "automatic" } ],
         "@babel/preset-typescript"
       ]
     }

component-generator/templates/index.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const componentName = React.forwardRef(({ className, children }, ref) => (
+const componentName = forwardRef(({ className, children }, ref) => (
   <div ref={ref} className={classNames('pgn__css-class', className)}>
     {children}
   </div>

component-generator/templates/test.jsx

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

src/Tooltip/Tooltip.test.tsx

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

src/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import BaseTooltip, { type TooltipProps as BaseTooltipProps } from 'react-bootstrap/Tooltip';
@@ -27,7 +27,7 @@ const PLACEMENT_VARIANTS: Placement[] = [
   'left-start',
 ];
 
-const Tooltip: ComponentWithAsProp<'div', TooltipProps> = React.forwardRef(({
+const Tooltip: ComponentWithAsProp<'div', TooltipProps> = forwardRef(({
   children,
   variant,
   ...props

src/TransitionReplace/TransitionReplace.test.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable no-plusplus, react/prop-types */
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import TransitionReplace from '.';

src/TransitionReplace/index.jsx

@@ -1,9 +1,10 @@
-import React from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import classNames from 'classnames';
 
-class TransitionReplace extends React.Component {
+class TransitionReplace extends Component {
   constructor(props) {
     super(props);
 
@@ -117,17 +118,19 @@ class TransitionReplace extends React.Component {
 
   render() {
     return (
-      <TransitionGroup
-        className={classNames(
-          'pgn-transition-replace-group',
-          'position-relative',
-          { 'overflow-hidden': this.state.height !== null },
-          this.props.className,
-        )}
-        style={{ height: this.state.height }}
-      >
-        {React.Children.map(this.props.children, this.renderChildTransition, this)}
-      </TransitionGroup>
+      (
+        <TransitionGroup
+          className={classNames(
+            'pgn-transition-replace-group',
+            'position-relative',
+            { 'overflow-hidden': this.state.height !== null },
+            this.props.className,
+          )}
+          style={{ height: this.state.height }}
+        >
+          {Children.map(this.props.children, this.renderChildTransition, this)}
+        </TransitionGroup>
+      )
     );
   }
 }

src/Truncate/Truncate.test.jsx

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

src/Truncate/index.jsx

@@ -1,5 +1,5 @@
-import React, {
-  useLayoutEffect, useRef, useEffect,
+import {
+  createElement, useLayoutEffect, useRef, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import { truncateLines } from './utils';
@@ -34,7 +34,7 @@ function TruncateDeprecated({
     }
   }, [children, ellipsis, lines, onTruncate, whiteSpace, width]);
 
-  return React.createElement(elementType, {
+  return createElement(elementType, {
     ref: textContainer,
     className,
   });

src/ValidationMessage/ValidationMessage.test.jsx

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

src/ValidationMessage/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -26,7 +26,7 @@ const defaultProps = {
   variantIconDescription: '',
 };
 
-class ValidationMessage extends React.Component {
+class ValidationMessage extends Component {
   getVariantFeedbackClassName() {
     const { variant } = this.props;
     let className;

src/utils/types/bootstrap.test.tsx

@@ -1,16 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
+import type {
+  ElementType, FC, MouseEventHandler, RefObject,
+} from 'react';
+
+import { forwardRef } from 'react';
 import type { BsPropsWithAs, ComponentWithAsProp } from './bootstrap';
 
 // Note: these are type-only tests. They don't actually do much at runtime; the important checks are at transpile time.
 
 describe('BsPropsWithAs', () => {
-  interface Props<As extends React.ElementType = 'table'> extends BsPropsWithAs<As> {
+  interface Props<As extends ElementType = 'table'> extends BsPropsWithAs<As> {
     otherProp?: number;
   }
 
   it('defines optional bsPrefix, className, and as but no other props', () => {
-    const checkProps = <As extends React.ElementType = 'table'>(_props: Props<As>) => {};
+    const checkProps = <As extends ElementType = 'table'>(_props: Props<As>) => {};
     // These are all valid props per the prop definition:
     checkProps({ });
     checkProps({ bsPrefix: 'bs' });
@@ -34,43 +38,43 @@ describe('ComponentWithAsProp', () => {
     customProp?: string;
   }
   const MyComponent: ComponentWithAsProp<'div', MyProps> = (
-    React.forwardRef<HTMLDivElement, MyProps>(
+    forwardRef<HTMLDivElement, MyProps>(
       ({ as: Inner = 'div', ...props }, ref) => <Inner {...props} ref={ref} />,
     )
   );
 
   // eslint-disable-next-line react/function-component-definition
-  const CustomComponent: React.FC<{ requiredProp: string }> = () => <span />;
+  const CustomComponent: FC<{ requiredProp: string }> = () => <span />;
 
   it('is defined to wrap a <div> by default, and accepts related props', () => {
     // This is valid - by default it is a DIV so accepts props and ref related to DIV:
-    const divClick: React.MouseEventHandler<HTMLDivElement> = () => {};
-    const divRef: React.RefObject<HTMLDivElement> = { current: null };
+    const divClick: MouseEventHandler<HTMLDivElement> = () => {};
+    const divRef: RefObject<HTMLDivElement> = { current: null };
     const valid = <MyComponent ref={divRef} onClick={divClick} customProp="foo" />;
   });
 
   it('is defined to wrap a <div> by default, and rejects unrelated props', () => {
-    const btnRef: React.RefObject<HTMLButtonElement> = { current: null };
+    const btnRef: RefObject<HTMLButtonElement> = { current: null };
     // @ts-expect-error because the ref is to a <button> ref, but this is wrapping a <div>
     const invalidRef = <MyComponent ref={btnRef} customProp="foo" />;
 
-    const btnClick: React.MouseEventHandler<HTMLButtonElement> = () => {};
+    const btnClick: MouseEventHandler<HTMLButtonElement> = () => {};
     // @ts-expect-error because the handler is for a <button> event, but this is wrapping a <div>
     const invalidClick = <MyComponent onClick={btnClick} />;
   });
 
   it('can be changed to wrap a <canvas>, and accepts related props', () => {
-    const canvasClick: React.MouseEventHandler<HTMLCanvasElement> = () => {};
-    const canvasRef: React.RefObject<HTMLCanvasElement> = { current: null };
+    const canvasClick: MouseEventHandler<HTMLCanvasElement> = () => {};
+    const canvasRef: RefObject<HTMLCanvasElement> = { current: null };
     const valid = <MyComponent as="canvas" ref={canvasRef} onClick={canvasClick} customProp="foo" />;
   });
 
   it('can be changed to wrap a <canvas>, and rejects unrelated props', () => {
-    const btnRef: React.RefObject<HTMLButtonElement> = { current: null };
+    const btnRef: RefObject<HTMLButtonElement> = { current: null };
     // @ts-expect-error because the ref is to a <button> ref, but this is wrapping an <canvas>
     const invalidRef = <MyComponent as="canvas" ref={btnRef} customProp="foo" />;
 
-    const btnClick: React.MouseEventHandler<HTMLButtonElement> = () => {};
+    const btnClick: MouseEventHandler<HTMLButtonElement> = () => {};
     // @ts-expect-error because the handler is for a <button> event, but this is wrapping an <canvas>
     const invalidClick = <MyComponent as="canvas" onClick={btnClick} />;
   });

src/utils/types/bootstrap.ts

@@ -1,7 +1,7 @@
 /**
  * Types related to bootstrap components
  */
-import React from 'react';
+import type { ElementType } from 'react';
 
 import type { BsPrefixProps, BsPrefixRefForwardingComponent } from 'react-bootstrap/esm/helpers';
 
@@ -14,7 +14,7 @@ import type { BsPrefixProps, BsPrefixRefForwardingComponent } from 'react-bootst
  *
  * This type assumes no `children` are allowed, but you can extend it to allow children.
  */
-export type BsPropsWithAs<As extends React.ElementType = React.ElementType> = BsPrefixProps<As>;
+export type BsPropsWithAs<As extends ElementType = ElementType> = BsPrefixProps<As>;
 
 /**
  * This is a helper that can be used to define the type of a Paragon component
@@ -39,5 +39,5 @@ export type BsPropsWithAs<As extends React.ElementType = React.ElementType> = Bs
  * ```
  * Note that you need to define the default (e.g. `'div'`) in three different places.
  */
-export type ComponentWithAsProp<DefaultElementType extends React.ElementType, Props>
+export type ComponentWithAsProp<DefaultElementType extends ElementType, Props>
   = BsPrefixRefForwardingComponent<DefaultElementType, Props>;

src/withDeprecatedProps.tsx

@@ -1,5 +1,7 @@
 /* eslint no-console: 0 */
-import React from 'react';
+import type { ComponentType } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, { Component } from 'react';
 
 export enum DeprTypes {
   MOVED = 'MOVED',
@@ -17,11 +19,11 @@ export interface DeprecatedProps extends Record<string, any> {
 }
 
 function withDeprecatedProps<T extends Record<string, any>>(
-  WrappedComponent: React.ComponentType<any>,
+  WrappedComponent: ComponentType<any>,
   componentName: string,
   deprecatedProps: Record<string, DeprecatedProps>,
 ) : any {
-  class WithDeprecatedProps extends React.Component<T> {
+  class WithDeprecatedProps extends Component<T> {
     // eslint-disable-next-line react/static-property-placement
     public static displayName = `withDeprecatedProps(${componentName})`;