diff --git a/babel.config.js b/babel.config.js
index a5caef7249f..48db1c06484 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,4 @@
module.exports = {
- presets: ['@babel/preset-typescript', '@babel/preset-react'],
+ presets: ['@babel/preset-typescript', ['@babel/preset-react', { runtime: 'automatic' }]],
plugins: ['@babel/plugin-transform-modules-commonjs']
};
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 26f0176c175..dce1acb2dcb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -4,7 +4,7 @@ import patternflyReact from 'eslint-plugin-patternfly-react';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import reactCompiler from 'eslint-plugin-react-compiler';
import reactHooks from 'eslint-plugin-react-hooks';
-import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
+import react from 'eslint-plugin-react';
import testingLibrary from 'eslint-plugin-testing-library';
import globals from 'globals';
import tseslint from 'typescript-eslint';
@@ -23,7 +23,8 @@ export default [
},
js.configs.recommended,
...tseslint.configs.recommended,
- reactRecommended,
+ react.configs.flat.recommended,
+ react.configs.flat['jsx-runtime'],
eslintPluginPrettierRecommended,
{
plugins: {
@@ -98,6 +99,18 @@ export default [
'no-eval': 'error',
'no-new-wrappers': 'error',
'no-prototype-builtins': 'off',
+ 'no-restricted-imports': [
+ 'warn',
+ {
+ paths: [
+ {
+ name: 'react',
+ importNames: ['default'],
+ message: 'Please use named imports when importing from React.'
+ }
+ ]
+ }
+ ],
'no-shadow': 'off',
'no-throw-literal': 'error',
'no-trailing-spaces': 'off',
diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx
index c3e58f0b1db..bc9b310b418 100644
--- a/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx
+++ b/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx
@@ -1,7 +1,5 @@
/* eslint-disable camelcase */
import chart_container_cursor_line_Fill from '@patternfly/react-tokens/dist/esm/chart_container_cursor_line_Fill';
-
-import * as React from 'react';
import { ContainerType, createContainer as victoryCreateContainer } from 'victory-create-container';
import { ChartCursorTooltip } from '../ChartCursorTooltip/ChartCursorTooltip';
import { ChartLabel } from '../ChartLabel/ChartLabel';
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
index 42c0f343576..a166aceb2c3 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarBasic.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Avatar } from '@patternfly/react-core';
import avatarImg from '../../assets/avatarImg.svg';
diff --git a/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
index bc181e9a192..429589810e2 100644
--- a/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
+++ b/packages/react-core/src/components/Avatar/examples/AvatarBordered.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Avatar } from '@patternfly/react-core';
import avatarImg from '../../assets/avatarImg.svg';
diff --git a/packages/react-core/src/components/Button/__mocks__/Button.tsx b/packages/react-core/src/components/Button/__mocks__/Button.tsx
index 5e1a0848557..7c925f96e22 100644
--- a/packages/react-core/src/components/Button/__mocks__/Button.tsx
+++ b/packages/react-core/src/components/Button/__mocks__/Button.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { ButtonProps } from '../';
export const Button = ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => (
diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx
index 439a575177c..bee9ac5818c 100644
--- a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx
+++ b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
import { DrawerPanelDescription } from '../DrawerPanelDescription';
import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
diff --git a/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx b/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx
index 070adc10f9c..8685ccbab9d 100644
--- a/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx
+++ b/packages/react-core/src/components/HelperText/__mocks__/HelperText.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { HelperTextProps } from '../';
export const HelperText = ({ children, isLiveRegion }: HelperTextProps) => (
diff --git a/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx b/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx
index c431a78864c..3f7e5973f05 100644
--- a/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx
+++ b/packages/react-core/src/components/HelperText/__mocks__/HelperTextItem.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { HelperTextItemProps } from '../';
export const HelperTextItem = ({ children, variant }: HelperTextItemProps) => (
diff --git a/packages/react-core/src/components/Menu/__mocks__/Menu.tsx b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx
index 962851bffc9..e1cf16a6fb9 100644
--- a/packages/react-core/src/components/Menu/__mocks__/Menu.tsx
+++ b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { MenuProps } from '../Menu';
import cssMenuMinWidth from '@patternfly/react-tokens/dist/esm/c_menu_MinWidth';
diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx
index bd4229efbae..e31aebf49aa 100644
--- a/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx
+++ b/packages/react-core/src/components/Menu/__mocks__/MenuContent.tsx
@@ -1,3 +1 @@
-import React from 'react';
-
export const MenuContent = ({ children }) =>
{children}
;
diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx
index 98f34af2bca..824d3fa9f5a 100644
--- a/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx
+++ b/packages/react-core/src/components/Menu/__mocks__/MenuGroup.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { MenuGroupProps } from '../MenuGroup';
export const MenuGroup = ({ className, children, label, labelHeadingLevel }: MenuGroupProps) => (
diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx
index bb9c74c8b2d..d535824711c 100644
--- a/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx
+++ b/packages/react-core/src/components/Menu/__mocks__/MenuItem.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { MenuItemProps } from '../MenuItem';
export const MenuItem = ({ className, children, description, itemId }: MenuItemProps) => (
diff --git a/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx b/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx
index 03d5d604621..8a90fe7804d 100644
--- a/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx
+++ b/packages/react-core/src/components/Menu/__mocks__/MenuList.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { MenuListProps } from '../MenuList';
export const MenuList = ({ className, children }: MenuListProps) => (
diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx
index b527af5caa7..91f3821de1c 100644
--- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx
+++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
export const PopoverProgressStep = () => (
diff --git a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
index 977bd8809d2..ecb59526b9d 100644
--- a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
+++ b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
@@ -1,5 +1,5 @@
import { createFocusTrap, FocusTrap as FocusTrapInstance, Options as FocusTrapOptions } from 'focus-trap';
-import React, { ComponentPropsWithRef, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { ComponentPropsWithRef, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { useUnmountEffect } from '../useUnmountEffect';
export interface FocusTrapProps extends ComponentPropsWithRef<'div'> {
diff --git a/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx b/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx
index 7449f0c2660..2ca4673fa6d 100644
--- a/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx
+++ b/packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { PopperProps } from '../Popper';
export const Popper = ({
diff --git a/packages/react-core/tsconfig.json b/packages/react-core/tsconfig.json
index 0a6395a44d0..00d99bda048 100644
--- a/packages/react-core/tsconfig.json
+++ b/packages/react-core/tsconfig.json
@@ -1,7 +1,6 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
- "jsx": "react",
"rootDir": "./src",
"outDir": "./dist/esm",
"tsBuildInfoFile": "dist/esm.tsbuildinfo",
diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js
index 1a03ff9df71..6d9e6ca6106 100644
--- a/packages/react-docs/patternfly-docs/pages/icons.js
+++ b/packages/react-docs/patternfly-docs/pages/icons.js
@@ -1,4 +1,3 @@
-import React from 'react';
import { Tooltip, Grid, GridItem, PageSection, Content } from '@patternfly/react-core';
import spacerMd from '@patternfly/react-tokens/dist/esm/t_global_spacer_md';
import labelFontSize from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
diff --git a/packages/react-docs/patternfly-docs/pages/index.js b/packages/react-docs/patternfly-docs/pages/index.js
index 426faebea86..22930f70338 100644
--- a/packages/react-docs/patternfly-docs/pages/index.js
+++ b/packages/react-docs/patternfly-docs/pages/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
import { Title, PageSection } from '@patternfly/react-core';
// https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
diff --git a/packages/react-icons/scripts/writeIcons.mjs b/packages/react-icons/scripts/writeIcons.mjs
index 16c72ff1e7e..418752a266d 100644
--- a/packages/react-icons/scripts/writeIcons.mjs
+++ b/packages/react-icons/scripts/writeIcons.mjs
@@ -51,7 +51,7 @@ export default ${jsName};
};
const writeDTSExport = (fname, jsName, icon) => {
- const text = `import * as React from 'react';
+ const text = `import { ComponentClass } from 'react';
import { SVGIconProps } from '../createIcon';
export declare const ${jsName}Config: {
name: '${jsName}',
@@ -61,7 +61,7 @@ export declare const ${jsName}Config: {
yOffset: ${icon.yOffset || 0},
xOffset: ${icon.xOffset || 0},
};
-export declare const ${jsName}: React.ComponentClass;
+export declare const ${jsName}: ComponentClass;
export default ${jsName};
`.trim();
const filename = `${fname}.d.ts`;
diff --git a/packages/react-integration/tsconfig.json b/packages/react-integration/tsconfig.json
index cc6d47d0699..09a9f65dbc2 100644
--- a/packages/react-integration/tsconfig.json
+++ b/packages/react-integration/tsconfig.json
@@ -4,7 +4,6 @@
"noImplicitAny": true,
"module": "es6",
"target": "es5",
- "jsx": "react",
"lib": ["dom", "es6"],
"allowJs": true,
"types": ["cypress"]
diff --git a/packages/react-table/src/components/Table/utils/decorators/draggable.tsx b/packages/react-table/src/components/Table/utils/decorators/draggable.tsx
index 8f11ebe83e3..774c1e93e18 100644
--- a/packages/react-table/src/components/Table/utils/decorators/draggable.tsx
+++ b/packages/react-table/src/components/Table/utils/decorators/draggable.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes';
import { DraggableCell } from '../../DraggableCell';
diff --git a/packages/react-table/src/components/Table/utils/decorators/editable.tsx b/packages/react-table/src/components/Table/utils/decorators/editable.tsx
index da3bbacb1d0..b2505e19274 100644
--- a/packages/react-table/src/components/Table/utils/decorators/editable.tsx
+++ b/packages/react-table/src/components/Table/utils/decorators/editable.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
import { IExtra, IFormatterValueType, ITransform, IRowCell, OnRowEdit, RowErrors, RowEditType } from '../../TableTypes';
import { EditColumn } from '../../EditColumn';
import tableStyles from '@patternfly/react-styles/css/components/Table/table';
diff --git a/packages/react-table/src/test-helpers/MockedTableChanges.js b/packages/react-table/src/test-helpers/MockedTableChanges.js
index d21d2738299..4f7cca707ad 100644
--- a/packages/react-table/src/test-helpers/MockedTableChanges.js
+++ b/packages/react-table/src/test-helpers/MockedTableChanges.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
import PropTypes from 'prop-types';
import { TableContext } from '../components/Table/Table';
import { TableHeader } from '../components/Table';
diff --git a/packages/react-table/tsconfig.json b/packages/react-table/tsconfig.json
index 8a0c909ae50..bc658c80006 100644
--- a/packages/react-table/tsconfig.json
+++ b/packages/react-table/tsconfig.json
@@ -1,7 +1,6 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
- "jsx": "react",
"rootDir": "./src",
"outDir": "./dist/esm",
"tsBuildInfoFile": "dist/esm.tsbuildinfo",
diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json
index 70704706ba6..fe6c7d19c4e 100644
--- a/packages/tsconfig.base.json
+++ b/packages/tsconfig.base.json
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"assumeChangesOnlyAffectDirectDependencies": true,
- "jsx": "react",
+ "jsx": "react-jsx",
"lib": [
"es2015",
"dom"