react imports cleanup 9

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/ProductTour/Checkpoint.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 import { createPopper } from '@popperjs/core';
@@ -10,7 +10,7 @@ import CheckpointBody from './CheckpointBody';
 import CheckpointHeader from './CheckpointHeader';
 import messages from './messages';
 
-const Checkpoint = React.forwardRef(({
+const Checkpoint = forwardRef(({
   body,
   dismissAltText,
   index,

src/ProductTour/Checkpoint.test.jsx

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

src/ProductTour/CheckpointActionRow.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
 import ActionRow from '../ActionRow';
 import Button from '../Button';
 
-const CheckpointActionRow = React.forwardRef(({
+const CheckpointActionRow = forwardRef(({
   advanceButtonText,
   backButtonText,
   endButtonText,

src/ProductTour/CheckpointBody.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const CheckpointBody = React.forwardRef(({ children }, ref) => {
+const CheckpointBody = forwardRef(({ children }, ref) => {
   if (!children) {
     return null;
   }

src/ProductTour/CheckpointHeader.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -8,7 +8,7 @@ import { Close } from '../../icons';
 import CheckpointTitle from './CheckpointTitle';
 import messages from './messages';
 
-const CheckpointHeader = React.forwardRef(({
+const CheckpointHeader = forwardRef(({
   dismissAltText, index, onDismiss, title, totalCheckpoints,
 }, ref) => {
   const intl = useIntl();

src/ProductTour/CheckpointTitle.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const CheckpointTitle = React.forwardRef(({ children }, ref) => (
+const CheckpointTitle = forwardRef(({ children }, ref) => (
   <h2 id="pgn__checkpoint-title" ref={ref}>
     {children}
   </h2>

src/ProductTour/ProductTour.test.jsx

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

src/ProductTour/index.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
 
 import Checkpoint from './Checkpoint';
 
-const ProductTour = React.forwardRef(({ tours }, ref) => {
+const ProductTour = forwardRef(({ tours }, ref) => {
   const tourValue = tours.find((tour) => tour.enabled);
   const {
     enabled,

src/ProgressBar/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import ProgressBarBase from 'react-bootstrap/ProgressBar';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -31,8 +31,8 @@ function ProgressBarAnnotated({
   thresholdHint,
   ...props
 }) {
-  const progressInfoRef = React.useRef();
-  const thresholdInfoRef = React.useRef();
+  const progressInfoRef = useRef();
+  const thresholdInfoRef = useRef();
   const thresholdPercent = (threshold || 0) - (now || 0);
   const isProgressHintAfter = now < HINT_SWAP_PERCENT;
   const isThresholdHintAfter = threshold < HINT_SWAP_PERCENT;

src/Scrollable/Scrollable.test.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react'; // (or /dom, /vue, ...)
+import { render, screen } from '@testing-library/react';
 import useIsVisible from '../hooks/useIsVisibleHook';
 
 import Scrollable, { CLASSNAME_SCROLL_BOTTOM, CLASSNAME_SCROLL_TOP } from '.';

src/Scrollable/index.jsx

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

src/SearchField/SearchField.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/SearchField/SearchFieldAdvanced.jsx

@@ -1,3 +1,4 @@
+// React import needed to support build-docs, if removed the build-docs will break
 import React, {
   useRef, createContext, useState, useEffect,
 } from 'react';

src/SearchField/SearchFieldClearButton.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { SearchFieldContext } from './SearchFieldAdvanced';
 import Icon from '../Icon';

src/SearchField/SearchFieldInput.jsx

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

src/SearchField/SearchFieldLabel.jsx

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

src/SearchField/SearchFieldSubmitButton.jsx

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

src/SearchField/index.jsx

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

src/SelectableBox/SelectableBoxSet.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, createElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getInputType } from './utils';
@@ -11,7 +11,7 @@ const INPUT_TYPES = [
 
 const DEFAULT_COLUMNS_NUMBER = 2;
 
-const SelectableBoxSet = React.forwardRef(({
+const SelectableBoxSet = forwardRef(({
   children,
   name,
   value,
@@ -26,7 +26,7 @@ const SelectableBoxSet = React.forwardRef(({
 }, ref) => {
   const inputType = getInputType('SelectableBoxSet', type);
 
-  return React.createElement(
+  return createElement(
     inputType,
     {
       name,

src/SelectableBox/index.jsx

@@ -1,4 +1,6 @@
-import React, { useRef, useEffect } from 'react';
+import {
+  forwardRef, createElement, useRef, useEffect,
+} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import SelectableBoxSet from './SelectableBoxSet';
@@ -11,7 +13,7 @@ const INPUT_TYPES = [
   'checkbox',
 ];
 
-const SelectableBox = React.forwardRef(({
+const SelectableBox = forwardRef(({
   type,
   value,
   checked,
@@ -41,7 +43,7 @@ const SelectableBox = React.forwardRef(({
   };
 
   const inputRef = useRef(null);
-  const input = React.createElement(inputType, {
+  const input = createElement(inputType, {
     value,
     checked,
     hidden: inputHidden,

src/SelectableBox/tests/SelectableBox.test.jsx

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

src/SelectableBox/tests/SelectableBoxSet.test.jsx

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

src/Sheet/Sheet.test.jsx

@@ -1,18 +1,17 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
 
 import Sheet, { POSITIONS, VARIANTS } from '.';
 
 /* eslint-disable react/prop-types */
-jest.mock('./SheetContainer', () => function SheetContainerMock(props) {
+jest.mock('./SheetContainer', () => (function SheetContainerMock(props) {
   const { children, ...otherProps } = props;
   return (
     <sheet-container {...otherProps}>
       {children}
     </sheet-container>
   );
-});
+}));
 
 jest.mock('react-focus-on', () => ({
   FocusOn: (props) => {

src/Sheet/SheetContainer.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
-class SheetContainer extends React.Component {
+class SheetContainer extends Component {
   constructor(props) {
     super(props);
     this.sheetRootName = 'sheet-root';

src/Sheet/SheetContainer.test.jsx

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

src/Sheet/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FocusOn } from 'react-focus-on';
@@ -17,11 +17,11 @@ export const VARIANTS = {
   dark: 'dark',
 };
 
-class Sheet extends React.Component {
+class Sheet extends Component {
   constructor(props) {
     super(props);
 
-    this.wrapperRef = React.createRef();
+    this.wrapperRef = createRef();
     this.renderSheet = this.renderSheet.bind(this);
   }