From b830556de552145512d1297b5066bd3a1b29cdb9 Mon Sep 17 00:00:00 2001
From: jacobo-dominguez-wgu <jacobo.dominguez@wgu.edu>
Date: Tue, 23 Sep 2025 12:05:49 -0600
Subject: [PATCH 1/2] chore: removing unnecessary react imports part 11

---
 babel.config.json                             |  4 +--
 component-generator/templates/index.jsx       |  4 +--
 component-generator/templates/test.jsx        |  1 -
 src/Tooltip/Tooltip.test.tsx                  |  1 -
 src/Tooltip/index.tsx                         |  4 +--
 .../TransitionReplace.test.jsx                |  1 -
 src/TransitionReplace/index.jsx               | 28 +++++++++--------
 src/Truncate/Truncate.test.jsx                |  1 -
 src/Truncate/index.jsx                        |  6 ++--
 .../ValidationMessage.test.jsx                |  1 -
 src/ValidationMessage/index.jsx               |  4 +--
 src/utils/types/bootstrap.test.tsx            | 30 +++++++++++--------
 src/utils/types/bootstrap.ts                  |  6 ++--
 13 files changed, 46 insertions(+), 45 deletions(-)

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/component-generator/templates/index.jsx b/component-generator/templates/index.jsx
index 86866e97cd..94db0ab59c 100644
--- a/component-generator/templates/index.jsx
+++ b/component-generator/templates/index.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const componentName = React.forwardRef(({ className, children }, ref) => (
+const componentName = forwardRef(({ className, children }, ref) => (
   <div ref={ref} className={classNames('pgn__css-class', className)}>
     {children}
   </div>
diff --git a/component-generator/templates/test.jsx b/component-generator/templates/test.jsx
index 1785cc404c..aedd6ee98d 100644
--- a/component-generator/templates/test.jsx
+++ b/component-generator/templates/test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import componentName from './index';
 
diff --git a/src/Tooltip/Tooltip.test.tsx b/src/Tooltip/Tooltip.test.tsx
index f67718340d..a3ff25fbee 100644
--- a/src/Tooltip/Tooltip.test.tsx
+++ b/src/Tooltip/Tooltip.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import Tooltip from '.';
diff --git a/src/Tooltip/index.tsx b/src/Tooltip/index.tsx
index 9d9131b459..0f1bee639f 100644
--- a/src/Tooltip/index.tsx
+++ b/src/Tooltip/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import BaseTooltip, { type TooltipProps as BaseTooltipProps } from 'react-bootstrap/Tooltip';
@@ -27,7 +27,7 @@ const PLACEMENT_VARIANTS: Placement[] = [
   'left-start',
 ];
 
-const Tooltip: ComponentWithAsProp<'div', TooltipProps> = React.forwardRef(({
+const Tooltip: ComponentWithAsProp<'div', TooltipProps> = forwardRef(({
   children,
   variant,
   ...props
diff --git a/src/TransitionReplace/TransitionReplace.test.jsx b/src/TransitionReplace/TransitionReplace.test.jsx
index b7531c1f38..d8d8e59b22 100644
--- a/src/TransitionReplace/TransitionReplace.test.jsx
+++ b/src/TransitionReplace/TransitionReplace.test.jsx
@@ -1,5 +1,4 @@
 /* eslint-disable no-plusplus, react/prop-types */
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import TransitionReplace from '.';
diff --git a/src/TransitionReplace/index.jsx b/src/TransitionReplace/index.jsx
index f39bcd48e0..2bd2d1f4a5 100644
--- a/src/TransitionReplace/index.jsx
+++ b/src/TransitionReplace/index.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import classNames from 'classnames';
 
-class TransitionReplace extends React.Component {
+class TransitionReplace extends Component {
   constructor(props) {
     super(props);
 
@@ -117,17 +117,19 @@ class TransitionReplace extends React.Component {
 
   render() {
     return (
-      <TransitionGroup
-        className={classNames(
-          'pgn-transition-replace-group',
-          'position-relative',
-          { 'overflow-hidden': this.state.height !== null },
-          this.props.className,
-        )}
-        style={{ height: this.state.height }}
-      >
-        {React.Children.map(this.props.children, this.renderChildTransition, this)}
-      </TransitionGroup>
+      (
+        <TransitionGroup
+          className={classNames(
+            'pgn-transition-replace-group',
+            'position-relative',
+            { 'overflow-hidden': this.state.height !== null },
+            this.props.className,
+          )}
+          style={{ height: this.state.height }}
+        >
+          {Children.map(this.props.children, this.renderChildTransition, this)}
+        </TransitionGroup>
+      )
     );
   }
 }
diff --git a/src/Truncate/Truncate.test.jsx b/src/Truncate/Truncate.test.jsx
index d1cc120c85..f601daca95 100644
--- a/src/Truncate/Truncate.test.jsx
+++ b/src/Truncate/Truncate.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Truncate from '.';
 
diff --git a/src/Truncate/index.jsx b/src/Truncate/index.jsx
index 292b7e2b7f..ee295b8fa7 100644
--- a/src/Truncate/index.jsx
+++ b/src/Truncate/index.jsx
@@ -1,5 +1,5 @@
-import React, {
-  useLayoutEffect, useRef, useEffect,
+import {
+  createElement, useLayoutEffect, useRef, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import { truncateLines } from './utils';
@@ -34,7 +34,7 @@ function TruncateDeprecated({
     }
   }, [children, ellipsis, lines, onTruncate, whiteSpace, width]);
 
-  return React.createElement(elementType, {
+  return createElement(elementType, {
     ref: textContainer,
     className,
   });
diff --git a/src/ValidationMessage/ValidationMessage.test.jsx b/src/ValidationMessage/ValidationMessage.test.jsx
index 785c4f24c2..d11ab1ba8c 100644
--- a/src/ValidationMessage/ValidationMessage.test.jsx
+++ b/src/ValidationMessage/ValidationMessage.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import ValidationMessage from '.';
diff --git a/src/ValidationMessage/index.jsx b/src/ValidationMessage/index.jsx
index e944a0eb2c..644c92dc55 100644
--- a/src/ValidationMessage/index.jsx
+++ b/src/ValidationMessage/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -26,7 +26,7 @@ const defaultProps = {
   variantIconDescription: '',
 };
 
-class ValidationMessage extends React.Component {
+class ValidationMessage extends Component {
   getVariantFeedbackClassName() {
     const { variant } = this.props;
     let className;
diff --git a/src/utils/types/bootstrap.test.tsx b/src/utils/types/bootstrap.test.tsx
index 0346c5d2b4..f28471747c 100644
--- a/src/utils/types/bootstrap.test.tsx
+++ b/src/utils/types/bootstrap.test.tsx
@@ -1,16 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
+import type {
+  ElementType, FC, MouseEventHandler, RefObject,
+} from 'react';
+
+import { forwardRef } from 'react';
 import type { BsPropsWithAs, ComponentWithAsProp } from './bootstrap';
 
 // Note: these are type-only tests. They don't actually do much at runtime; the important checks are at transpile time.
 
 describe('BsPropsWithAs', () => {
-  interface Props<As extends React.ElementType = 'table'> extends BsPropsWithAs<As> {
+  interface Props<As extends ElementType = 'table'> extends BsPropsWithAs<As> {
     otherProp?: number;
   }
 
   it('defines optional bsPrefix, className, and as but no other props', () => {
-    const checkProps = <As extends React.ElementType = 'table'>(_props: Props<As>) => {};
+    const checkProps = <As extends ElementType = 'table'>(_props: Props<As>) => {};
     // These are all valid props per the prop definition:
     checkProps({ });
     checkProps({ bsPrefix: 'bs' });
@@ -34,43 +38,43 @@ describe('ComponentWithAsProp', () => {
     customProp?: string;
   }
   const MyComponent: ComponentWithAsProp<'div', MyProps> = (
-    React.forwardRef<HTMLDivElement, MyProps>(
+    forwardRef<HTMLDivElement, MyProps>(
       ({ as: Inner = 'div', ...props }, ref) => <Inner {...props} ref={ref} />,
     )
   );
 
   // eslint-disable-next-line react/function-component-definition
-  const CustomComponent: React.FC<{ requiredProp: string }> = () => <span />;
+  const CustomComponent: FC<{ requiredProp: string }> = () => <span />;
 
   it('is defined to wrap a <div> by default, and accepts related props', () => {
     // This is valid - by default it is a DIV so accepts props and ref related to DIV:
-    const divClick: React.MouseEventHandler<HTMLDivElement> = () => {};
-    const divRef: React.RefObject<HTMLDivElement> = { current: null };
+    const divClick: MouseEventHandler<HTMLDivElement> = () => {};
+    const divRef: RefObject<HTMLDivElement> = { current: null };
     const valid = <MyComponent ref={divRef} onClick={divClick} customProp="foo" />;
   });
 
   it('is defined to wrap a <div> by default, and rejects unrelated props', () => {
-    const btnRef: React.RefObject<HTMLButtonElement> = { current: null };
+    const btnRef: RefObject<HTMLButtonElement> = { current: null };
     // @ts-expect-error because the ref is to a <button> ref, but this is wrapping a <div>
     const invalidRef = <MyComponent ref={btnRef} customProp="foo" />;
 
-    const btnClick: React.MouseEventHandler<HTMLButtonElement> = () => {};
+    const btnClick: MouseEventHandler<HTMLButtonElement> = () => {};
     // @ts-expect-error because the handler is for a <button> event, but this is wrapping a <div>
     const invalidClick = <MyComponent onClick={btnClick} />;
   });
 
   it('can be changed to wrap a <canvas>, and accepts related props', () => {
-    const canvasClick: React.MouseEventHandler<HTMLCanvasElement> = () => {};
-    const canvasRef: React.RefObject<HTMLCanvasElement> = { current: null };
+    const canvasClick: MouseEventHandler<HTMLCanvasElement> = () => {};
+    const canvasRef: RefObject<HTMLCanvasElement> = { current: null };
     const valid = <MyComponent as="canvas" ref={canvasRef} onClick={canvasClick} customProp="foo" />;
   });
 
   it('can be changed to wrap a <canvas>, and rejects unrelated props', () => {
-    const btnRef: React.RefObject<HTMLButtonElement> = { current: null };
+    const btnRef: RefObject<HTMLButtonElement> = { current: null };
     // @ts-expect-error because the ref is to a <button> ref, but this is wrapping an <canvas>
     const invalidRef = <MyComponent as="canvas" ref={btnRef} customProp="foo" />;
 
-    const btnClick: React.MouseEventHandler<HTMLButtonElement> = () => {};
+    const btnClick: MouseEventHandler<HTMLButtonElement> = () => {};
     // @ts-expect-error because the handler is for a <button> event, but this is wrapping an <canvas>
     const invalidClick = <MyComponent as="canvas" onClick={btnClick} />;
   });
diff --git a/src/utils/types/bootstrap.ts b/src/utils/types/bootstrap.ts
index 2d05bbaf78..b820633692 100644
--- a/src/utils/types/bootstrap.ts
+++ b/src/utils/types/bootstrap.ts
@@ -1,7 +1,7 @@
 /**
  * Types related to bootstrap components
  */
-import React from 'react';
+import type { ElementType } from 'react';
 
 import type { BsPrefixProps, BsPrefixRefForwardingComponent } from 'react-bootstrap/esm/helpers';
 
@@ -14,7 +14,7 @@ import type { BsPrefixProps, BsPrefixRefForwardingComponent } from 'react-bootst
  *
  * This type assumes no `children` are allowed, but you can extend it to allow children.
  */
-export type BsPropsWithAs<As extends React.ElementType = React.ElementType> = BsPrefixProps<As>;
+export type BsPropsWithAs<As extends ElementType = ElementType> = BsPrefixProps<As>;
 
 /**
  * This is a helper that can be used to define the type of a Paragon component
@@ -39,5 +39,5 @@ export type BsPropsWithAs<As extends React.ElementType = React.ElementType> = Bs
  * ```
  * Note that you need to define the default (e.g. `'div'`) in three different places.
  */
-export type ComponentWithAsProp<DefaultElementType extends React.ElementType, Props>
+export type ComponentWithAsProp<DefaultElementType extends ElementType, Props>
   = BsPrefixRefForwardingComponent<DefaultElementType, Props>;

From 3eb19e1a979abb806252fe7b9af08b6a634bf884 Mon Sep 17 00:00:00 2001
From: jacobo-dominguez-wgu <jacobo.dominguez@wgu.edu>
Date: Mon, 6 Oct 2025 12:29:35 -0600
Subject: [PATCH 2/2] fix: restoring react imports needed for build docs
 process on few components

---
 src/TransitionReplace/index.jsx | 3 ++-
 src/withDeprecatedProps.tsx     | 8 +++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/TransitionReplace/index.jsx b/src/TransitionReplace/index.jsx
index 2bd2d1f4a5..a1f1ae8a25 100644
--- a/src/TransitionReplace/index.jsx
+++ b/src/TransitionReplace/index.jsx
@@ -1,4 +1,5 @@
-import { Children, Component } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import classNames from 'classnames';
diff --git a/src/withDeprecatedProps.tsx b/src/withDeprecatedProps.tsx
index a86975e02c..69231fc2f4 100644
--- a/src/withDeprecatedProps.tsx
+++ b/src/withDeprecatedProps.tsx
@@ -1,5 +1,7 @@
 /* eslint no-console: 0 */
-import React from 'react';
+import type { ComponentType } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, { Component } from 'react';
 
 export enum DeprTypes {
   MOVED = 'MOVED',
@@ -17,11 +19,11 @@ export interface DeprecatedProps extends Record<string, any> {
 }
 
 function withDeprecatedProps<T extends Record<string, any>>(
-  WrappedComponent: React.ComponentType<any>,
+  WrappedComponent: ComponentType<any>,
   componentName: string,
   deprecatedProps: Record<string, DeprecatedProps>,
 ) : any {
-  class WithDeprecatedProps extends React.Component<T> {
+  class WithDeprecatedProps extends Component<T> {
     // eslint-disable-next-line react/static-property-placement
     public static displayName = `withDeprecatedProps(${componentName})`;