react imports cleanup 10

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"
       ]
     }

src/Spinner/Spinner.test.tsx

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

src/Spinner/index.tsx

@@ -1,20 +1,21 @@
-import React from 'react';
+import type { ReactNode, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import BaseSpinner, { type SpinnerProps as BaseSpinnerProps } from 'react-bootstrap/Spinner';
 
 interface SpinnerProps extends BaseSpinnerProps {
   /** Optionally specify additional CSS classes to give this spinner's `<div>`. */
   className?: string;
   /** Specifies the screen reader content for a11y. */
-  screenReaderText?: React.ReactNode;
+  screenReaderText?: ReactNode;
 }
 
 /** A spinning animation that indicates loading. */
-const Spinner = React.forwardRef(({
+const Spinner = forwardRef(({
   className,
   screenReaderText,
   ...attrs
-}: SpinnerProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+}: SpinnerProps, ref: ForwardedRef<HTMLDivElement>) => {
   const spinnerProps = {
     ...attrs,
     className: classNames('pgn__spinner', className),

src/Stack/Stack.test.jsx

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

src/Stack/index.jsx

@@ -1,3 +1,4 @@
+// React import needed to support build-docs, if removed the build-docs will break
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

src/StatefulButton/StatefulButtontest.test.jsx

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

src/StatefulButton/index.jsx

@@ -1,3 +1,4 @@
+// React import needed to support build-docs, if removed the build-docs will break
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

src/Stepper/Stepper.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import StepperStep from './StepperStep';
 import StepperHeader from './StepperHeader';

src/Stepper/StepperActionRow.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { createElement, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { StepperContext } from './StepperContext';
 import ActionRow from '../ActionRow';
@@ -16,7 +16,7 @@ function StepperActionRow({
     return null;
   }
 
-  return React.createElement(as, props, children);
+  return createElement(as, props, children);
 }
 
 StepperActionRow.propTypes = {

src/Stepper/StepperContext.jsx

@@ -1,9 +1,9 @@
-import React, {
-  useCallback, useEffect, useReducer, useState,
+import {
+  createContext, useCallback, useEffect, useReducer, useState,
 } from 'react';
 import PropTypes from 'prop-types';
 
-export const StepperContext = React.createContext({
+export const StepperContext = createContext({
   activeKey: '',
 });
 

src/Stepper/StepperHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { Fragment, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import StepperHeaderStep from './StepperHeaderStep';
@@ -12,20 +12,22 @@ function StepListSeparator() {
 
 function StepList({ steps, activeKey }) {
   return (
-    <ul className="pgn__stepper-header-step-list">
-      {steps.map(({ label, ...stepProps }, index) => (
-        <React.Fragment key={stepProps.eventKey}>
-          {index !== 0 && <StepListSeparator />}
-          <StepperHeaderStep
-            {...stepProps}
-            index={index}
-            isActive={activeKey === stepProps.eventKey}
-          >
-            {label}
-          </StepperHeaderStep>
-        </React.Fragment>
-      ))}
-    </ul>
+    (
+      <ul className="pgn__stepper-header-step-list">
+        {steps.map(({ label, ...stepProps }, index) => (
+          <Fragment key={stepProps.eventKey}>
+            {index !== 0 && <StepListSeparator />}
+            <StepperHeaderStep
+              {...stepProps}
+              index={index}
+              isActive={activeKey === stepProps.eventKey}
+            >
+              {label}
+            </StepperHeaderStep>
+          </Fragment>
+        ))}
+      </ul>
+    )
   );
 }
 

src/Stepper/StepperHeaderStep.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

src/Stepper/StepperStep.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { StepperContext } from './StepperContext';

src/Stepper/tests/Stepper.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/Sticky/Sticky.test.jsx

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

src/Sticky/index.jsx

@@ -1,4 +1,7 @@
-import React, { useLayoutEffect, useState } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, {
+  forwardRef, useRef, useLayoutEffect, useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -7,15 +10,15 @@ const POSITION_VARIANTS = [
   'bottom',
 ];
 
-const Sticky = React.forwardRef(({
+const Sticky = forwardRef(({
   position,
   children,
   offset,
   className,
   ...rest
 }, ref) => {
   const [isSticky, setIsSticky] = useState(false);
-  const defaultRef = React.useRef();
+  const defaultRef = useRef();
   const resolvedRef = ref || defaultRef;
 
   // eslint-disable-next-line consistent-return

src/Tabs/Tab.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import BaseTab from 'react-bootstrap/Tab';
 

src/Tabs/Tabs.test.jsx

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

src/Tabs/index.jsx

@@ -1,4 +1,8 @@
+// React import needed to support build-docs, if removed the build-docs will break
 import React, {
+  Children,
+  isValidElement,
+  cloneElement,
   useEffect,
   useMemo,
   useRef,
@@ -81,14 +85,14 @@ function Tabs({
         handleDropdownTabClick(eventKey);
       }
     };
-    const childrenList = React.Children.map(children, (child, index) => {
+    const childrenList = Children.map(children, (child, index) => {
       if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') {
         // eslint-disable-next-line no-console
         console.error(
           `Tabs children can only be of type Tab. ${children[index]} was passed instead.`,
         );
       }
-      if (!React.isValidElement(child)) {
+      if (!isValidElement(child)) {
         return child;
       }
       const {
@@ -114,7 +118,7 @@ function Tabs({
         newTitle = title;
       }
       const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : '';
-      const modifiedTab = React.cloneElement(child, {
+      const modifiedTab = cloneElement(child, {
         ...rest,
         title: newTitle,
         tabClassName: classNames(tabClass, tabClassName),

src/Toast/index.tsx

@@ -1,3 +1,5 @@
+import type { MouseEvent } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import BaseToast from 'react-bootstrap/Toast';
@@ -15,7 +17,7 @@ export const TOAST_DELAY = 5000;
 interface ToastAction {
   label: string;
   href?: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 }
 
 interface ToastProps {