diff --git a/babel.config.json b/babel.config.json index 6815ebd872..f2421ecf77 100644 --- a/babel.config.json +++ b/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" ] } diff --git a/src/Spinner/Spinner.test.tsx b/src/Spinner/Spinner.test.tsx index c5ab098bc5..4dc2b40c53 100644 --- a/src/Spinner/Spinner.test.tsx +++ b/src/Spinner/Spinner.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import Spinner from '.'; diff --git a/src/Spinner/index.tsx b/src/Spinner/index.tsx index 0f3638b57b..2e680de394 100644 --- a/src/Spinner/index.tsx +++ b/src/Spinner/index.tsx @@ -1,4 +1,5 @@ -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'; @@ -6,15 +7,15 @@ interface SpinnerProps extends BaseSpinnerProps { /** Optionally specify additional CSS classes to give this spinner's `
`. */ 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) => { +}: SpinnerProps, ref: ForwardedRef) => { const spinnerProps = { ...attrs, className: classNames('pgn__spinner', className), diff --git a/src/Stack/Stack.test.jsx b/src/Stack/Stack.test.jsx index 7937088da9..10c106413b 100644 --- a/src/Stack/Stack.test.jsx +++ b/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'; diff --git a/src/Stack/index.jsx b/src/Stack/index.jsx index d7a531ba39..fbb582c33c 100644 --- a/src/Stack/index.jsx +++ b/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'; diff --git a/src/StatefulButton/StatefulButtontest.test.jsx b/src/StatefulButton/StatefulButtontest.test.jsx index c8e0dd8b77..95f85ea8ed 100644 --- a/src/StatefulButton/StatefulButtontest.test.jsx +++ b/src/StatefulButton/StatefulButtontest.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import StatefulButton from './index'; diff --git a/src/StatefulButton/index.jsx b/src/StatefulButton/index.jsx index 5d7da83a4f..43ae36ba77 100644 --- a/src/StatefulButton/index.jsx +++ b/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'; diff --git a/src/Stepper/Stepper.jsx b/src/Stepper/Stepper.jsx index 6e300b7097..e2a62a6988 100644 --- a/src/Stepper/Stepper.jsx +++ b/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'; diff --git a/src/Stepper/StepperActionRow.jsx b/src/Stepper/StepperActionRow.jsx index c65a318fc4..5425ae5438 100644 --- a/src/Stepper/StepperActionRow.jsx +++ b/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 = { diff --git a/src/Stepper/StepperContext.jsx b/src/Stepper/StepperContext.jsx index d28a49799b..0d015295a7 100644 --- a/src/Stepper/StepperContext.jsx +++ b/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: '', }); diff --git a/src/Stepper/StepperHeader.jsx b/src/Stepper/StepperHeader.jsx index 433e536b2a..f4586f908a 100644 --- a/src/Stepper/StepperHeader.jsx +++ b/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 ( -
    - {steps.map(({ label, ...stepProps }, index) => ( - - {index !== 0 && } - - {label} - - - ))} -
+ ( +
    + {steps.map(({ label, ...stepProps }, index) => ( + + {index !== 0 && } + + {label} + + + ))} +
+ ) ); } diff --git a/src/Stepper/StepperHeaderStep.jsx b/src/Stepper/StepperHeaderStep.jsx index b8b6b384a6..24a27dfbea 100644 --- a/src/Stepper/StepperHeaderStep.jsx +++ b/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'; diff --git a/src/Stepper/StepperStep.jsx b/src/Stepper/StepperStep.jsx index e3f0064559..e7492f7a29 100644 --- a/src/Stepper/StepperStep.jsx +++ b/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'; diff --git a/src/Stepper/tests/Stepper.test.jsx b/src/Stepper/tests/Stepper.test.jsx index 103df484ab..f9a61b16a8 100644 --- a/src/Stepper/tests/Stepper.test.jsx +++ b/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'; diff --git a/src/Sticky/Sticky.test.jsx b/src/Sticky/Sticky.test.jsx index 95fcf35ed4..dbcf2b67b1 100644 --- a/src/Sticky/Sticky.test.jsx +++ b/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'; diff --git a/src/Sticky/index.jsx b/src/Sticky/index.jsx index f282167b16..de9f552e10 100644 --- a/src/Sticky/index.jsx +++ b/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,7 +10,7 @@ const POSITION_VARIANTS = [ 'bottom', ]; -const Sticky = React.forwardRef(({ +const Sticky = forwardRef(({ position, children, offset, @@ -15,7 +18,7 @@ const Sticky = React.forwardRef(({ ...rest }, ref) => { const [isSticky, setIsSticky] = useState(false); - const defaultRef = React.useRef(); + const defaultRef = useRef(); const resolvedRef = ref || defaultRef; // eslint-disable-next-line consistent-return diff --git a/src/Tabs/Tab.jsx b/src/Tabs/Tab.jsx index abc43183ca..b9bd8f9afa 100644 --- a/src/Tabs/Tab.jsx +++ b/src/Tabs/Tab.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import BaseTab from 'react-bootstrap/Tab'; diff --git a/src/Tabs/Tabs.test.jsx b/src/Tabs/Tabs.test.jsx index 2e829a5321..03955ab476 100644 --- a/src/Tabs/Tabs.test.jsx +++ b/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'; diff --git a/src/Tabs/index.jsx b/src/Tabs/index.jsx index 98255f4dc4..9c3ab2684e 100644 --- a/src/Tabs/index.jsx +++ b/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), diff --git a/src/Toast/index.tsx b/src/Toast/index.tsx index c3e76528b8..b30dade37c 100644 --- a/src/Toast/index.tsx +++ b/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) => void; + onClick?: (event: MouseEvent) => void; } interface ToastProps {