react imports cleanup 3

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/Carousel/index.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+// React import needed to support JSX outside functions, if removed build-docs will fail
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import BaseCarousel from 'react-bootstrap/Carousel';
 import BaseCarouselItem from 'react-bootstrap/CarouselItem';
@@ -7,11 +8,11 @@ import BaseCarouselCaption from 'react-bootstrap/CarouselCaption';
 export const CAROUSEL_NEXT_LABEL_TEXT = 'Next';
 export const CAROUSEL_PREV_LABEL_TEXT = 'Previous';
 
-const Carousel = React.forwardRef((props, ref) => <BaseCarousel {...props} ref={ref} />);
+const Carousel = forwardRef((props, ref) => <BaseCarousel {...props} ref={ref} />);
 
-const CarouselItem = React.forwardRef((props, ref) => <BaseCarouselItem {...props} ref={ref} />);
+const CarouselItem = forwardRef((props, ref) => <BaseCarouselItem {...props} ref={ref} />);
 
-const CarouselCaption = React.forwardRef((props, ref) => <BaseCarouselCaption {...props} ref={ref} />);
+const CarouselCaption = forwardRef((props, ref) => <BaseCarouselCaption {...props} ref={ref} />);
 
 Carousel.propTypes = {
   /** Specifies element type for this component. */

src/Chip/Chip.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { ComponentProps } from 'react';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -7,7 +7,7 @@ import { Close } from '../../icons';
 import { STYLE_VARIANTS } from './constants';
 import Chip from '.';
 
-function TestChip(props: Omit<React.ComponentProps<typeof Chip>, 'children'>) {
+function TestChip(props: Omit<ComponentProps<typeof Chip>, 'children'>) {
   return (
     <Chip {...props}>
       Test

src/Chip/ChipIcon.tsx

@@ -1,12 +1,13 @@
-import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { ComponentType } from 'react';
+import { KeyboardEventHandler, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { STYLE_VARIANTS } from './constants';
 
 export type ChipIconProps = {
   className: string,
-  src: React.ComponentType,
+  src: ComponentType,
   variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
   disabled?: boolean,
 } & (

src/Chip/index.tsx

@@ -1,4 +1,7 @@
-import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { ReactNode, ComponentType } from 'react';
+import {
+  forwardRef, ForwardedRef, KeyboardEventHandler, MouseEventHandler,
+} from 'react';
 import classNames from 'classnames';
 import ChipIcon from './ChipIcon';
 import { STYLE_VARIANTS } from './constants';
@@ -7,7 +10,7 @@ export const CHIP_PGN_CLASS = 'pgn__chip';
 
 export interface IChip {
   /** Specifies the content of the `Chip`. */
-  children: React.ReactNode,
+  children: ReactNode,
   /** Click handler for the whole `Chip`, has effect only when Chip does not have any interactive icons. */
   onClick?: KeyboardEventHandler & MouseEventHandler,
   /** Specifies an additional `className` to add to the base element. */
@@ -20,7 +23,7 @@ export interface IChip {
    *
    * `import { Check } from '@openedx/paragon/icons';`
    */
-  iconBefore?: React.ComponentType,
+  iconBefore?: ComponentType,
   /** Specifies icon alt text. */
   iconBeforeAlt?: string,
   /**
@@ -29,7 +32,7 @@ export interface IChip {
    *
    * `import { Check } from '@openedx/paragon/icons';`
    */
-  iconAfter?: React.ComponentType,
+  iconAfter?: ComponentType,
   /** Specifies icon alt text. */
   iconAfterAlt?: string,
   /** A click handler for the `Chip` icon before. */
@@ -42,7 +45,7 @@ export interface IChip {
   isSelected?: boolean,
 }
 
-const Chip = React.forwardRef(({
+const Chip = forwardRef(({
   children,
   className,
   variant = 'light',

src/ChipCarousel/ChipCarousel.test.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';

src/ChipCarousel/index.tsx

@@ -1,4 +1,5 @@
-import React, { ForwardedRef } from 'react';
+import type { ReactElement } from 'react';
+import { forwardRef, createElement, ForwardedRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
@@ -22,7 +23,7 @@ export interface OverflowScrollContextProps {
 
 export interface ChipCarouselProps {
   className?: string;
-  items: Array<React.ReactElement>;
+  items: Array<ReactElement>;
   ariaLabel: string;
   disableOpacityMasks?: boolean;
   onScrollPrevious?: () => void;
@@ -33,7 +34,7 @@ export interface ChipCarouselProps {
   gap?: number;
 }
 
-const ChipCarousel = React.forwardRef(({
+const ChipCarousel = forwardRef(({
   className,
   items,
   ariaLabel,
@@ -49,32 +50,33 @@ const ChipCarousel = React.forwardRef(({
   const intl = useIntl();
 
   return (
-    <div
-      className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}
-      {...props}
-      ref={ref}
-    >
-      <OverflowScroll
-        ariaLabel={ariaLabel}
-        hasInteractiveChildren
-        disableScroll={!canScrollHorizontal}
-        disableOpacityMasks={disableOpacityMasks}
-        onScrollPrevious={onScrollPrevious}
-        onScrollNext={onScrollNext}
-        offset={offset}
-        offsetType={offsetType}
+    (
+      <div
+        className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}
+        {...props}
+        ref={ref}
       >
-        <OverflowScrollContext.Consumer>
-          {({
-            setOverflowRef,
-            isScrolledToStart,
-            isScrolledToEnd,
-            scrollToPrevious,
-            scrollToNext,
-          }: OverflowScrollContextProps) => (
-            <>
+        <OverflowScroll
+          ariaLabel={ariaLabel}
+          hasInteractiveChildren
+          disableScroll={!canScrollHorizontal}
+          disableOpacityMasks={disableOpacityMasks}
+          onScrollPrevious={onScrollPrevious}
+          onScrollNext={onScrollNext}
+          offset={offset}
+          offsetType={offsetType}
+        >
+          <OverflowScrollContext.Consumer>
+            {({
+              setOverflowRef,
+              isScrolledToStart,
+              isScrolledToEnd,
+              scrollToPrevious,
+              scrollToNext,
+            }: OverflowScrollContextProps) => (
               <>
-                {!isScrolledToStart && (
+                <>
+                  {!isScrolledToStart && (
                   <IconButton
                     size="sm"
                     className="pgn__chip-carousel__left-control"
@@ -83,8 +85,8 @@ const ChipCarousel = React.forwardRef(({
                     alt={intl.formatMessage(messages.scrollToPrevious)}
                     onClick={scrollToPrevious}
                   />
-                )}
-                {!isScrolledToEnd && (
+                  )}
+                  {!isScrolledToEnd && (
                   <IconButton
                     size="sm"
                     className="pgn__chip-carousel__right-control"
@@ -93,25 +95,26 @@ const ChipCarousel = React.forwardRef(({
                     alt={intl.formatMessage(messages.scrollToNext)}
                     onClick={scrollToNext}
                   />
-                )}
+                  )}
+                </>
+                <div ref={setOverflowRef} className="d-flex">
+                  <OverflowScroll.Items>
+                    {items?.map((item, id) => {
+                      const { children } = item?.props || {};
+                      if (!children) {
+                        return null;
+                      }
+                      // eslint-disable-next-line react/no-array-index-key
+                      return createElement(Chip, { ...item.props, key: id });
+                    })}
+                  </OverflowScroll.Items>
+                </div>
               </>
-              <div ref={setOverflowRef} className="d-flex">
-                <OverflowScroll.Items>
-                  {items?.map((item, id) => {
-                    const { children } = item?.props || {};
-                    if (!children) {
-                      return null;
-                    }
-                    // eslint-disable-next-line react/no-array-index-key
-                    return React.createElement(Chip, { ...item.props, key: id });
-                  })}
-                </OverflowScroll.Items>
-              </div>
-            </>
-          )}
-        </OverflowScrollContext.Consumer>
-      </OverflowScroll>
-    </div>
+            )}
+          </OverflowScrollContext.Consumer>
+        </OverflowScroll>
+      </div>
+    )
   );
 });
 

src/Collapsible/Collapsible.test.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createRef } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
@@ -69,7 +69,7 @@ describe('<Collapsible />', () => {
   });
 
   describe('Imperative Methods', () => {
-    const ref = React.createRef();
+    const ref = createRef();
     beforeEach(() => {
       render(
         <Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
@@ -117,7 +117,7 @@ describe('<Collapsible />', () => {
 
   describe('Mouse Interactions', () => {
     let collapsible;
-    const ref = React.createRef();
+    const ref = createRef();
     beforeEach(() => {
       render(
         <Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
@@ -167,7 +167,7 @@ describe('<Collapsible />', () => {
 
   describe('Keyboard Interactions', () => {
     let collapsible;
-    const ref = React.createRef();
+    const ref = createRef();
     beforeEach(() => {
       render(
         <Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,

src/Collapsible/CollapsibleAdvanced.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+// React import needed to support JSX outside functions, if removed build-docs will fail
+import React, { createContext, Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-export const CollapsibleContext = React.createContext();
+export const CollapsibleContext = createContext();
 
-class CollapsibleAdvanced extends React.Component {
+class CollapsibleAdvanced extends Component {
   static getDerivedStateFromProps(props) {
     if (props.open !== undefined) {
       return {

src/Collapsible/CollapsibleBody.jsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react';
+// React import needed to support JSX outside functions, if removed build-docs will fail
+import React, { createElement, cloneElement, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import Collapse from '../Collapse';
@@ -13,11 +14,11 @@ function CollapsibleBody({
   // Keys are added to these elements so that TransitionReplace
   // will recognize them as unique components and perform the
   // transition properly.
-  const content = React.createElement(tag, { key: 'body', ...props }, children);
+  const content = createElement(tag, { key: 'body', ...props }, children);
   const transitionBody = isOpen ? content : <div key="empty" />;
 
   if (transitionWrapper) {
-    return React.cloneElement(transitionWrapper, {}, transitionBody);
+    return cloneElement(transitionWrapper, {}, transitionBody);
   }
   /* istanbul ignore next */
   return unmountOnExit

src/Collapsible/CollapsibleTrigger.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react';
+import { createElement, useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import { CollapsibleContext } from './CollapsibleAdvanced';
@@ -36,7 +36,7 @@ function CollapsibleTrigger({
     }
   }, [onKeyDown, handleToggle]);
 
-  return React.createElement(
+  return createElement(
     tag,
     {
       ...props,

src/Collapsible/CollapsibleVisible.jsx

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

src/Collapsible/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, isValidElement } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -17,7 +17,7 @@ const styleIcons = {
   // card and card-lg use the defaults specified in defaultProps
 };
 
-const Collapsible = React.forwardRef((props, ref) => {
+const Collapsible = forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -29,7 +29,7 @@ const Collapsible = React.forwardRef((props, ref) => {
   } = props;
 
   const icons = { iconWhenClosed, iconWhenOpen, ...styleIcons[styling] };
-  const titleElement = React.isValidElement(title) ? title : <span>{title}</span>;
+  const titleElement = isValidElement(title) ? title : <span>{title}</span>;
 
   return (
     <Collapsible.Advanced

src/ColorPicker/ColorPicker.test.jsx

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