clean up multi import core components

mfrances17 · mfrances17 · commit b81b50332357 · 2025-03-05T18:50:29.000-05:00
diff --git a/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx b/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import { createRef, RefObject } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { BackToTop } from '../BackToTop';
 import userEvent from '@testing-library/user-event';
@@ -76,7 +76,7 @@ test('Renders with passed aria-label', () => {
 });
 
 test('BackToTop can be accessed via passed innerRef', () => {
-  const testRef: RefObject<HTMLElement | null> = React.createRef();
+  const testRef: RefObject<HTMLElement | null> = createRef();
   render(<BackToTop innerRef={testRef} isAlwaysVisible />);
   global.scrollTo = jest.fn();
   testRef.current?.click();
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, type JSX } from 'react';
+import { useEffect, useMemo, useRef, useState, type JSX } from 'react';
 import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
@@ -148,7 +148,7 @@ export const CalendarMonth = ({
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
     .map((monthNum) => new Date(1990, monthNum))
     .map(monthFormat);
-  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
 
   const getInitialDate = () => {
     if (isValidDate(dateProp)) {
@@ -160,18 +160,18 @@ export const CalendarMonth = ({
     return today;
   };
   const initialDate = getInitialDate();
-  const [focusedDate, setFocusedDate] = React.useState(initialDate);
+  const [focusedDate, setFocusedDate] = useState(initialDate);
 
   // Must be numeric given current header design
   const yearFormat = (date: Date) => date.getFullYear();
   //
   const yearFormatted = yearFormat(focusedDate);
-  const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
+  const [yearInput, setYearInput] = useState(yearFormatted.toString());
 
-  const [hoveredDate, setHoveredDate] = React.useState<Date>(undefined);
-  const focusRef = React.useRef<HTMLButtonElement>(undefined);
-  const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
-  const [shouldFocus, setShouldFocus] = React.useState(false);
+  const [hoveredDate, setHoveredDate] = useState<Date>(undefined);
+  const focusRef = useRef<HTMLButtonElement>(undefined);
+  const [hiddenMonthId] = useState(getUniqueId('hidden-month-span'));
+  const [shouldFocus, setShouldFocus] = useState(false);
 
   const isValidated = (date: Date) => validators.every((validator) => validator(date));
   const focusedDateValidated = isValidated(focusedDate);
@@ -266,7 +266,7 @@ export const CalendarMonth = ({
   const nextMonth = addMonth(1);
   const focusedYear = focusedDate.getFullYear();
   const focusedMonth = focusedDate.getMonth();
-  const calendar = React.useMemo(
+  const calendar = useMemo(
     () => buildCalendar(focusedYear, focusedMonth, weekStart, validators),
     [focusedYear, focusedMonth, weekStart, validators]
   );
diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX } from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
diff --git a/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx b/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardBody } from '../CardBody';
 
diff --git a/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx b/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardFooter } from '../CardFooter';
 
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-expandable-section
 propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 
+import { useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 ## Examples
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx
@@ -1,9 +1,9 @@
-import React, { FormEvent } from 'react';
+import { FormEvent, useState } from 'react';
 import { ExpandableSection, Checkbox } from '@patternfly/react-core';
 
 export const ExpandableSectionIndented: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(true);
-  const [isDisplayLgChecked, setIsDisplayLgChecked] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isDisplayLgChecked, setIsDisplayLgChecked] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
diff --git a/packages/react-core/src/components/Form/FormContext.tsx b/packages/react-core/src/components/Form/FormContext.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import { createContext, Dispatch, SetStateAction, useContext, useState } from 'react';
 
 export interface FormContextProps {
   /** Record of values for all fieldIds */
@@ -35,7 +35,7 @@ export interface FormContextProps {
   setValidator(fieldId: string, validate: (value: string) => string | null): void;
 }
 
-const FormContext = React.createContext({} as FormContextProps);
+const FormContext = createContext({} as FormContextProps);
 
 export const FormContextConsumer = FormContext.Consumer;
 
@@ -47,10 +47,10 @@ export interface FormContextProviderProps {
 }
 
 export const FormContextProvider: React.FC<FormContextProviderProps> = ({ initialValues, children }) => {
-  const [values, setValues] = React.useState<Record<string, string>>(initialValues || {});
-  const [errors, setErrors] = React.useState<Record<string, string>>({});
-  const [validators, setValidators] = React.useState<Record<string, Function>>({});
-  const [touched, setTouched] = React.useState<Record<string, boolean>>({});
+  const [values, setValues] = useState<Record<string, string>>(initialValues || {});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [validators, setValidators] = useState<Record<string, Function>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
   const isValid = Object.keys(errors)?.length === 0;
 
   const getValue = (fieldId: string) =>
@@ -127,4 +127,4 @@ export const FormContextProvider: React.FC<FormContextProviderProps> = ({ initia
 };
 FormContextProvider.displayName = 'FormContextProvider';
 
-export const useFormContext = () => React.useContext(FormContext);
+export const useFormContext = () => useContext(FormContext);
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX, useState } from 'react';
 import {
   Badge,
   Breadcrumb,
@@ -26,12 +26,12 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('breadcrumbs-rootMenu');
-  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element | null>();
-  const [withMaxMenuHeight, setWithMaxMenuHeight] = React.useState(false);
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('breadcrumbs-rootMenu');
+  const [breadcrumb, setBreadcrumb] = useState<JSX.Element | null>();
+  const [withMaxMenuHeight, setWithMaxMenuHeight] = useState(false);
 
   const onToggle = (isOpen: boolean, key: string) => {
     switch (key) {
diff --git a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX, useState } from 'react';
 
 import { Nav, MenuContent, MenuItem, MenuList, DrilldownMenu, Menu } from '@patternfly/react-core';
 
@@ -46,10 +46,10 @@ const subMenuOne: JSX.Element = (
 );
 
 export const NavigationDrilldown: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
-  const [activeMenu, setActiveMenu] = React.useState('nav-drilldown-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<MenuHeights>({});
+  const [activeMenu, setActiveMenu] = useState('nav-drilldown-rootMenu');
 
   const onDrillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
diff --git a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { memo, useState, useEffect } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -254,7 +254,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   );
 };
 
-export const TreeViewListItem = React.memo(TreeViewListItemBase, (prevProps, nextProps) => {
+export const TreeViewListItem = memo(TreeViewListItemBase, (prevProps, nextProps) => {
   if (!nextProps.useMemo) {
     return false;
   }
diff --git a/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx
@@ -1,10 +1,10 @@
-import React, { type JSX } from 'react';
+import { type JSX, Fragment, useEffect, useRef, useState } from 'react';
 import { MenuToggle, Divider, Dropdown, DropdownGroup, DropdownList, DropdownItem } from '@patternfly/react-core';
 
 export const FavoritesDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [favorites, setFavorites] = React.useState<string[]>([]);
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [favorites, setFavorites] = useState<string[]>([]);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -72,7 +72,7 @@ export const FavoritesDemo: React.FunctionComponent = () => {
     return favorites;
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (favorites.length === 0) {
       const firstElement = menuRef?.current?.querySelector('li > button:not(:disabled)');
       firstElement && (firstElement as HTMLElement).focus();
@@ -106,12 +106,12 @@ export const FavoritesDemo: React.FunctionComponent = () => {
       onSelect={(_ev, value) => console.log('selected', value)}
     >
       {favorites.length > 0 && (
-        <React.Fragment>
+        <Fragment>
           <DropdownGroup key="favorites-group" label="Favorites">
             <DropdownList>{createFavorites(favorites)}</DropdownList>
           </DropdownGroup>
           <Divider key="favorites-divider" />
-        </React.Fragment>
+        </Fragment>
       )}
       {menuItems}
     </Dropdown>
diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   Avatar,
   Button,
diff --git a/packages/react-core/src/demos/DashboardWrapper.tsx b/packages/react-core/src/demos/DashboardWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Button,
   EmptyState,
@@ -48,12 +48,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
   const maxAlerts = 100;
   const alertTimeout = 8000;
 
-  const [isDrawerExpanded, setDrawerExpanded] = React.useState(false);
-  const [openDropdownKey, setOpenDropdownKey] = React.useState<React.Key | null>(null);
-  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
-  const [maxDisplayed, setMaxDisplayed] = React.useState(maxDisplayedAlerts);
-  const [alerts, setAlerts] = React.useState<React.ReactElement<AlertProps>[]>([]);
-  const [notifications, setNotifications] = React.useState<NotificationProps[]>([]);
+  const [isDrawerExpanded, setDrawerExpanded] = useState(false);
+  const [openDropdownKey, setOpenDropdownKey] = useState<React.Key | null>(null);
+  const [overflowMessage, setOverflowMessage] = useState<string>('');
+  const [maxDisplayed, setMaxDisplayed] = useState(maxDisplayedAlerts);
+  const [alerts, setAlerts] = useState<React.ReactElement<AlertProps>[]>([]);
+  const [notifications, setNotifications] = useState<NotificationProps[]>([]);
 
   useEffect(() => {
     setOverflowMessage(buildOverflowMessage());
@@ -358,7 +358,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           onChange={onMaxDisplayedAlertsChange}
           onPlus={onMaxDisplayedAlertsPlus}
           inputName="input"
-          inputAriaLabel="max diplayed alerts number input"
+          inputAriaLabel="max displayed alerts number input"
           minusBtnAriaLabel="minus"
           plusBtnAriaLabel="plus"
           style={{ margin: '12px 0' }}
diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX, useState } from 'react';
 
 import {
   Page,
@@ -65,10 +65,10 @@ const subMenuOne: JSX.Element = (
 );
 
 export const NavDrilldown: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
-  const [activeMenuId, setActiveMenuId] = React.useState('rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<MenuHeights>({});
+  const [activeMenuId, setActiveMenuId] = useState('rootMenu');
   const navLayer = getNavLayer(activeMenuId);
 
   const onDrillIn = (
diff --git a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx b/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx
@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import { type JSX, useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
@@ -12,11 +12,11 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     text: string;
   }
 
-  const [password, setPassword] = React.useState('');
-  const [ruleLength, setRuleLength] = React.useState<HelperTextItemVariant>('indeterminate');
-  const [ruleContent, setRuleContent] = React.useState<HelperTextItemVariant>('indeterminate');
-  const [ruleCharacters, setRuleCharacters] = React.useState<HelperTextItemVariant>('indeterminate');
-  const [passStrength, setPassStrength] = React.useState<PassStrength>({
+  const [password, setPassword] = useState('');
+  const [ruleLength, setRuleLength] = useState<HelperTextItemVariant>('indeterminate');
+  const [ruleContent, setRuleContent] = useState<HelperTextItemVariant>('indeterminate');
+  const [ruleCharacters, setRuleCharacters] = useState<HelperTextItemVariant>('indeterminate');
+  const [passStrength, setPassStrength] = useState<PassStrength>({
     variant: 'error',
     icon: <ExclamationCircleIcon />,
     text: 'Weak'
diff --git a/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx b/packages/react-core/src/layouts/Bullseye/__tests__/Bullseye.test.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { Bullseye } from '../Bullseye';
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { type JSX } from 'react';`
	`1`	`+import { type JSX } from 'react';`
`2`	`2`
`3`	`3`	`import { render, screen } from '@testing-library/react';`
`4`	`4`	`import '@testing-library/jest-dom';`