react imports cleanup 2

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/Card/BaseCard.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import type { ReactNode } from 'react';
+// React import needed to support JSX outside functions
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -34,11 +36,11 @@ interface Props extends BsPropsWithAs {
   borderColor?: ColorVariant;
   hasBody?: boolean;
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 type BaseCardType = ComponentWithAsProp<'div', Props>;
 
-const BaseCard : BaseCardType = React.forwardRef<HTMLDivElement, Props>(
+const BaseCard : BaseCardType = forwardRef<HTMLDivElement, Props>(
   (
     {
       prefix,

src/Card/CardBody.jsx

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

src/Card/CardCarousel/CardCarousel.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { OverflowScroll } from '../../OverflowScroll';
 import CardCarouselProvider from './CardCarouselProvider';

src/Card/CardCarousel/CardCarouselControls.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { useIntl } from 'react-intl';
 import Stack from '../../Stack';
 import IconButton from '../../IconButton';

src/Card/CardCarousel/CardCarouselHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, isValidElement } from 'react';
+import { useContext, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import CardCarouselTitle from './CardCarouselTitle';
 import CardCarouselSubtitle from './CardCarouselSubtitle';

src/Card/CardCarousel/CardCarouselItems.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import CardDeck from '../CardDeck';
 import { CardCarouselContext } from './CardCarouselProvider';

src/Card/CardCarousel/CardCarouselProvider.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { OverflowScrollContext } from '../../OverflowScroll';
 

src/Card/CardCarousel/CardCarouselSubtitle.jsx

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

src/Card/CardCarousel/CardCarouselTitle.jsx

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

src/Card/CardCarousel/tests/CardCarousel.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import renderer from 'react-test-renderer';
 import { v4 as uuidv4 } from 'uuid';

src/Card/CardCarousel/tests/CardCarouselControls.test.jsx

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

src/Card/CardContext.jsx

@@ -1,3 +1,4 @@
+// React import needed to support JSX outside functions
 import React, { createContext } from 'react';
 import PropTypes from 'prop-types';
 

src/Card/CardDeck.jsx

@@ -1,11 +1,11 @@
-import React, { Children, useMemo } from 'react';
+import { forwardRef, Children, useMemo } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useOverflowScrollItems } from '../OverflowScroll';
 
-const CardDeck = React.forwardRef(({
+const CardDeck = forwardRef(({
   className,
   children,
   columnSizes,

src/Card/CardDivider.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const CardDivider = React.forwardRef(({ className, ...props }, ref) => (
+const CardDivider = forwardRef(({ className, ...props }, ref) => (
   <div className={classNames('pgn__card-divider', className)} ref={ref} {...props} />
 ));
 

src/Card/CardFooter.jsx

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
 
 const IS_LOADING_HEIGHT_VALUE = 18;
 
-const CardFooter = React.forwardRef(({
+const CardFooter = forwardRef(({
   children,
   className,
   isStacked,

src/Card/CardGrid.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { Children, useMemo } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Row from 'react-bootstrap/Row';
@@ -11,7 +11,7 @@ function CardGrid({
   hasEqualColumnHeights,
 }) {
   const cards = useMemo(
-    () => React.Children.map(children, (card) => (
+    () => Children.map(children, (card) => (
       <Col
         {...columnSizes}
         className={classNames(

src/Card/CardHeader.jsx

@@ -1,12 +1,15 @@
-import React, { useCallback, useContext } from 'react';
+// React import needed to support JSX outside functions
+import React, {
+  forwardRef, isValidElement, cloneElement, useCallback, useContext,
+} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
 
 const SKELETON_HEIGHT_VALUE = 20;
 
-const CardHeader = React.forwardRef(({
+const CardHeader = forwardRef(({
   actions,
   className,
   size,
@@ -18,13 +21,13 @@ const CardHeader = React.forwardRef(({
   const { isLoading } = useContext(CardContext);
   const cloneActions = useCallback(
     (Action) => {
-      if (React.isValidElement(Action)) {
+      if (isValidElement(Action)) {
         const { children } = Action.props;
         const addtlActionProps = {
           size,
           children: Array.isArray(children) ? children.map(cloneActions) : cloneActions(children),
         };
-        return React.cloneElement(Action, addtlActionProps);
+        return cloneElement(Action, addtlActionProps);
       }
 
       return Action;

src/Card/CardImageCap.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import { forwardRef, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
@@ -8,7 +8,7 @@ import { cardSrcFallbackImg } from './CardFallbackDefaultImage';
 const SKELETON_HEIGHT_VALUE = 140;
 const LOGO_SKELETON_HEIGHT_VALUE = 41;
 
-const CardImageCap = React.forwardRef(({
+const CardImageCap = forwardRef(({
   src,
   fallbackSrc,
   srcAlt,

src/Card/CardSection.jsx

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
 
 const SKELETON_HEIGHT_VALUE = 100;
 
-const CardSection = React.forwardRef(({
+const CardSection = forwardRef(({
   className,
   children,
   title,

src/Card/CardStatus.jsx

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import Icon from '../Icon';
 import CardContext from './CardContext';
 
-const CardStatus = React.forwardRef(({
+const CardStatus = forwardRef(({
   className,
   children,
   variant,

src/Card/index.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+// React import needed to support JSX outside functions
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import BaseCard from './BaseCard';
@@ -14,7 +15,7 @@ import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
 
 export const CARD_VARIANTS = ['light', 'dark', 'muted'];
 
-const Card = React.forwardRef(({
+const Card = forwardRef(({
   orientation,
   isLoading,
   className,

src/Card/tests/BaseCard.test.jsx

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

src/Card/tests/CardBody.test.jsx

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

src/Card/tests/CardContext.test.jsx

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

src/Card/tests/CardDeck.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import { v4 as uuidv4 } from 'uuid';
 import CardDeck from '../CardDeck';

src/Card/tests/CardDivider.test.jsx

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

src/Card/tests/CardFooter.test.jsx

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

src/Card/tests/CardGrid.test.jsx

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

src/Card/tests/CardHeader.test.jsx

@@ -1,15 +1,14 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
 import Button from '../../Button';
 import CardHeader from '../CardHeader';
 import CardContext from '../CardContext';
 
 // eslint-disable-next-line react/prop-types
-function CardHeaderWrapper({ isLoading }) {
+function CardHeaderWrapper({ isLoading, size = 'md', actions = null }) {
   return (
     <CardContext.Provider value={{ isLoading }}>
-      <CardHeader />
+      <CardHeader size={size} actions={actions} />
     </CardContext.Provider>
   );
 }
@@ -48,4 +47,10 @@ describe('<CardHeader />', () => {
     const { container } = render(<CardHeaderWrapper isLoading />);
     expect(container.querySelector('.pgn__card-header-loader')).toBeTruthy();
   });
+
+  it('renders with size sm and actions', () => {
+    const actions = <>Actions</>;
+    const { getByText } = render(<CardHeaderWrapper size="sm" actions={actions} />);
+    expect(getByText('Actions')).toBeInTheDocument();
+  });
 });

src/Card/tests/CardImageCap.test.jsx

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

src/Card/tests/CardSection.test.jsx

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

src/Card/tests/CardStatus.test.jsx

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