@patternfly/react-core 6.2.0-prerelease.8 → 6.2.0

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { handleArrows } from '../../helpers';
@@ -11,7 +11,7 @@ export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HT
   /** Additional classes added to the wrapper. */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** Accessible label for the dual list selector controls wrapper. */
   'aria-label'?: string;
 }
@@ -23,7 +23,7 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
   'aria-label': ariaLabel = 'Controls for moving options between lists',
   ...props
 }: DualListSelectorControlsWrapperProps) => {
-  const ref = React.useRef(null);
+  const ref = useRef(null);
   const wrapperRef = innerRef || ref;
   // Adds keyboard navigation to the dynamically built dual list selector controls. Works when controls are dynamically built
   // as well as when they are passed in via children.
@@ -55,7 +55,7 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
     );
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleKeys);
     return () => {
       window.removeEventListener('keydown', handleKeys);
@@ -78,7 +78,7 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
 
 DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapperBase';
 
-export const DualListSelectorControlsWrapper = React.forwardRef(
+export const DualListSelectorControlsWrapper = forwardRef(
   (props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
     <DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} role="group" {...props} />
   )

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -1,7 +1,7 @@
+import { forwardRef, useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { DualListSelectorListItem } from './DualListSelectorListItem';
-import * as React from 'react';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
 /** Acts as the container for DualListSelectorListItem sub-components. */
@@ -10,7 +10,7 @@ export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElem
   /** Content rendered inside the dual list selector list. */
   children?: React.ReactNode;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLUListElement>;
+  innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 
 export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorListProps> = ({
@@ -19,7 +19,7 @@ export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorL
   ...props
 }: DualListSelectorListProps) => {
   const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } =
-    React.useContext(DualListSelectorListContext);
+    useContext(DualListSelectorListContext);
 
   const hasOptions = () =>
     options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
@@ -60,10 +60,8 @@ export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorL
 };
 DualListSelectorListBase.displayName = 'DualListSelectorListBase';
 
-export const DualListSelectorList = React.forwardRef(
-  (props: DualListSelectorListProps, ref: React.Ref<HTMLUListElement>) => (
-    <DualListSelectorListBase innerRef={ref as React.MutableRefObject<any>} {...props} />
-  )
-);
+export const DualListSelectorList = forwardRef((props: DualListSelectorListProps, ref: React.Ref<HTMLUListElement>) => (
+  <DualListSelectorListBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+));
 
 DualListSelectorList.displayName = 'DualListSelectorList';

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef, useContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { getUniqueId } from '../../helpers';
@@ -24,7 +24,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   /** @hide Internal field used to keep track of order of unfiltered options. */
   orderIndex?: number;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLLIElement>;
+  innerRef?: React.RefObject<HTMLLIElement | null>;
   /** Flag indicating this item is draggable for reordering. */
   isDraggable?: boolean;
   /** Accessible label for the draggable button on draggable list items. */
@@ -47,9 +47,9 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   draggableButtonAriaLabel = 'Reorder option',
   ...props
 }: DualListSelectorListItemProps) => {
-  const privateRef = React.useRef<HTMLLIElement>(null);
+  const privateRef = useRef<HTMLLIElement>(null);
   const ref = innerRef || privateRef;
-  const { setFocusedOption } = React.useContext(DualListSelectorListContext);
+  const { setFocusedOption } = useContext(DualListSelectorListContext);
 
   return (
     <li
@@ -99,7 +99,7 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
 };
 DualListSelectorListItemBase.displayName = 'DualListSelectorListItemBase';
 
-export const DualListSelectorListItem = React.forwardRef(
+export const DualListSelectorListItem = forwardRef(
   (props: DualListSelectorListItemProps, ref: React.Ref<HTMLLIElement>) => (
     <DualListSelectorListItemBase innerRef={ref as React.MutableRefObject<any>} {...props} />
   )

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { getUniqueId, handleArrows } from '../../helpers';
@@ -15,7 +15,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
@@ -38,10 +38,10 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   isDisabled = false,
   ...props
 }: DualListSelectorListWrapperProps) => {
-  const [focusedOption, setFocusedOption] = React.useState('');
-  const ref = React.useRef(null);
+  const [focusedOption, setFocusedOption] = useState('');
+  const ref = useRef(null);
   const menuRef = innerRef || ref;
-  const { isTree } = React.useContext(DualListSelectorContext);
+  const { isTree } = useContext(DualListSelectorContext);
 
   // Sets up keyboard focus handling for the dual list selector menu child of the pane.
   const handleKeys = (event: KeyboardEvent) => {
@@ -85,7 +85,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     );
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleKeys);
     return () => {
       window.removeEventListener('keydown', handleKeys);
@@ -115,7 +115,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
 };
 DualListSelectorListWrapperBase.displayName = 'DualListSelectorListWrapperBase';
 
-export const DualListSelectorListWrapper = React.forwardRef(
+export const DualListSelectorListWrapper = forwardRef(
   (props: DualListSelectorListWrapperProps, ref: React.Ref<HTMLDivElement>) => (
     <DualListSelectorListWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} />
   )

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { getUniqueId } from '../../helpers';

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { DualListSelectorTreeItem } from './DualListSelectorTreeItem';

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { memo, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
@@ -57,11 +57,11 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   useMemo,
   ...props
 }: DualListSelectorTreeItemProps) => {
-  const ref = React.useRef(null);
-  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded || false);
-  const { setFocusedOption } = React.useContext(DualListSelectorListContext);
+  const ref = useRef(null);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
+  const { setFocusedOption } = useContext(DualListSelectorListContext);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
 
@@ -138,7 +138,9 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                     e.preventDefault();
                   }
                 }}
-                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+                ref={(elem) => {
+                  elem && (elem.indeterminate = isChecked === null);
+                }}
                 checked={isChecked || false}
                 tabIndex={-1}
                 {...checkProps}
@@ -148,7 +150,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
             <span className={css(styles.dualListSelectorItemText)}>{text}</span>
             {hasBadge && children && (
               <span className={css(styles.dualListSelectorItemCount)}>
-                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement).props.data).length}</Badge>
+                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement<any>).props.data).length}</Badge>
               </span>
             )}
           </span>
@@ -159,7 +161,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   );
 };
 
-export const DualListSelectorTreeItem = React.memo(DualListSelectorTreeItemBase, (prevProps, nextProps) => {
+export const DualListSelectorTreeItem = memo(DualListSelectorTreeItemBase, (prevProps, nextProps) => {
   if (!nextProps.useMemo) {
     return false;
   }

package/src/components/DualListSelector/__tests__/DualListSelector.test.tsx

@@ -1,8 +1,6 @@
 import { render } from '@testing-library/react';
 import { DualListSelectorPane } from '../DualListSelectorPane';
 import { SearchInput } from '../../SearchInput';
-import React from 'react';
-
 describe('DualListSelector', () => {
   test('basic', () => {
     const { asFragment } = render(<DualListSelectorPane id="basicTest" />);

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -15,6 +15,7 @@ propComponents:
   ]
 ---
 
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';

package/src/components/DualListSelector/examples/DualListSelectorBasic.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   DualListSelector,
   DualListSelectorPane,
@@ -19,13 +19,13 @@ interface Option {
 }
 
 export const DualListSelectorBasic: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+  const [availableOptions, setAvailableOptions] = useState<Option[]>([
     { text: 'Option 1', selected: false, isVisible: true },
     { text: 'Option 2', selected: false, isVisible: true },
     { text: 'Option 3', selected: false, isVisible: true },
     { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);
 
   // callback for moving selected options between lists
   const moveSelected = (fromAvailable: boolean) => {

package/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   Button,
   DualListSelector,
@@ -27,16 +27,16 @@ interface Option {
 }
 
 export const DualListSelectorSearch: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+  const [availableOptions, setAvailableOptions] = useState<Option[]>([
     { text: 'Option 1', selected: false, isVisible: true },
     { text: 'Option 2', selected: false, isVisible: true },
     { text: 'Option 3', selected: false, isVisible: true },
     { text: 'Option 4', selected: false, isVisible: true }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
-  const [availableFilter, setAvailableFilter] = React.useState('');
-  const [chosenFilter, setChosenFilter] = React.useState('');
+  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);
+  const [availableFilter, setAvailableFilter] = useState('');
+  const [chosenFilter, setChosenFilter] = useState('');
 
   // callback for moving selected options between lists
   const moveSelected = (fromAvailable: boolean) => {

package/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   DualListSelector,
   DualListSelectorPane,
@@ -19,13 +19,13 @@ interface Option {
 }
 
 export const DualListSelectorBasic: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+  const [availableOptions, setAvailableOptions] = useState<Option[]>([
     { text: 'Option 1', selected: false, isVisible: true },
     { text: 'Option 2', selected: false, isVisible: true },
     { text: 'Option 3', selected: false, isVisible: true },
     { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);
 
   // callback for moving selected options between lists
   const moveSelected = (fromAvailable: boolean) => {

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -36,19 +36,19 @@ interface Option {
 }
 
 export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+  const [availableOptions, setAvailableOptions] = useState<Option[]>([
     { text: 'Option 1', selected: false, isVisible: true },
     { text: 'Option 2', selected: false, isVisible: true },
     { text: 'Option 3', selected: false, isVisible: true },
     { text: 'Option 4', selected: false, isVisible: true }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
-  const [isAvailableKebabOpen, setIsAvailableKebabOpen] = React.useState(false);
-  const [isChosenKebabOpen, setIsChosenKebabOpen] = React.useState(false);
-  const [availableFilter, setAvailableFilter] = React.useState('');
-  const [chosenFilter, setChosenFilter] = React.useState('');
-  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);
+  const [isAvailableKebabOpen, setIsAvailableKebabOpen] = useState(false);
+  const [isChosenKebabOpen, setIsChosenKebabOpen] = useState(false);
+  const [availableFilter, setAvailableFilter] = useState('');
+  const [chosenFilter, setChosenFilter] = useState('');
+  const [isDisabled, setIsDisabled] = useState(false);
 
   // callback for moving selected options between lists
   const moveSelected = (fromAvailable: boolean) => {
@@ -233,7 +233,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <DualListSelector>
         <DualListSelectorPane
           title="Available options"
@@ -331,6 +331,6 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
         isChecked={isDisabled}
         onChange={() => setIsDisabled(!isDisabled)}
       />
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo, useState } from 'react';
 import {
   DualListSelector,
   DualListSelectorPane,
@@ -32,10 +32,10 @@ interface ExampleProps {
 }
 
 export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProps> = ({ data }: ExampleProps) => {
-  const [checkedLeafIds, setCheckedLeafIds] = React.useState<string[]>([]);
-  const [chosenLeafIds, setChosenLeafIds] = React.useState<string[]>(['beans', 'beef', 'chicken', 'tofu']);
-  const [chosenFilter, setChosenFilter] = React.useState<string>('');
-  const [availableFilter, setAvailableFilter] = React.useState<string>('');
+  const [checkedLeafIds, setCheckedLeafIds] = useState<string[]>([]);
+  const [chosenLeafIds, setChosenLeafIds] = useState<string[]>(['beans', 'beef', 'chicken', 'tofu']);
+  const [chosenFilter, setChosenFilter] = useState<string>('');
+  const [availableFilter, setAvailableFilter] = useState<string>('');
 
   // helper function to build memoized lists
   const buildTextById = (node: FoodNode): { [key: string]: string } => {
@@ -80,7 +80,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   };
 
   // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.
-  const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeTexts } = React.useMemo(() => {
+  const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeTexts } = useMemo(() => {
     let leavesById = {};
     let allLeaves: string[] = [];
     let nodeTexts = {};

package/src/components/EmptyState/EmptyState.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 import { EmptyStateHeader } from './EmptyStateHeader';

package/src/components/EmptyState/EmptyStateActions.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 

package/src/components/EmptyState/EmptyStateBody.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 

package/src/components/EmptyState/EmptyStateFooter.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 import { EmptyStateIcon } from './EmptyStateIcon';

package/src/components/EmptyState/EmptyStateIcon.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 import { Spinner } from '../Spinner';

package/src/components/EmptyState/__tests__/EmptyState.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 
 import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon';

package/src/components/EmptyState/__tests__/Generated/EmptyStateActions.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { EmptyStateActions } from '../../EmptyStateActions';
 // any missing imports can usually be resolved by adding them here

package/src/components/EmptyState/__tests__/Generated/EmptyStateBody.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { EmptyStateBody } from '../../EmptyStateBody';
 // any missing imports can usually be resolved by adding them here

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 import { EmptyStateIcon } from '../../EmptyStateIcon';

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -94,7 +94,6 @@ exports[`EmptyState Main 1`] = `
           class="pf-v6-c-empty-state__actions"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
             data-ouia-component-type="PF6/Button"
@@ -112,7 +111,6 @@ exports[`EmptyState Main 1`] = `
           class="pf-v6-c-empty-state__actions"
         >
           <button
-            aria-disabled="false"
             aria-label="learn more action"
             class="pf-v6-c-button pf-m-link"
             data-ouia-component-id="OUIA-Generated-Button-link-1"

package/src/components/EmptyState/examples/EmptyState.md

@@ -4,6 +4,8 @@ section: components
 cssPrefix: pf-v6-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
+
+import { useState } from 'react';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';

package/src/components/EmptyState/examples/EmptyStateBasic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, EmptyState, EmptyStateBody, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 

package/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Button,
   EmptyState,

package/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Button,
   EmptyState,

package/src/components/EmptyState/examples/EmptyStateLarge.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Button,
   EmptyState,

package/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 

package/src/components/EmptyState/examples/EmptyStateSmall.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Button,
   EmptyState,

package/src/components/EmptyState/examples/EmptyStateSpinner.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { EmptyState, Spinner } from '@patternfly/react-core';
 
 export const EmptyStateSpinner: React.FunctionComponent = () => (

package/src/components/EmptyState/examples/EmptyStateWithStatus.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   EmptyState,
   EmptyStateBody,
@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 
 export const EmptyStateWithStatus: React.FunctionComponent = () => {
-  const [status, setStatus] = React.useState<EmptyStateStatus>(EmptyStateStatus.success);
+  const [status, setStatus] = useState<EmptyStateStatus>(EmptyStateStatus.success);
 
   const toggleStatus = () => {
     interface StatusToggleMap {

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
@@ -21,7 +21,7 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   /** Additional classes added to the expandable section. */
   className?: string;
   /** Id of the content of the expandable section. When passing in the isDetached property, this
-   * property's value should match the contenId property of the expandable section toggle sub-component.
+   * property's value should match the contentId property of the expandable section toggle sub-component.
    */
   contentId?: string;
   /** Id of the toggle of the expandable section, which provides an accessible name to the
@@ -80,7 +80,7 @@ const setLineClamp = (lines: number, element: HTMLDivElement) => {
   element.style.setProperty(lineClamp.name, lines.toString());
 };
 
-class ExpandableSection extends React.Component<ExpandableSectionProps, ExpandableSectionState> {
+class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
   constructor(props: ExpandableSectionProps) {
     super(props);
@@ -92,7 +92,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     };
   }
 
-  expandableContentRef = React.createRef<HTMLDivElement>();
+  expandableContentRef = createRef<HTMLDivElement>();
   observer: any = () => {};
 
   static defaultProps: PickOptional<ExpandableSectionProps> = {

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';

package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-
+import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -45,14 +44,14 @@ test('Renders Uncontrolled ExpandableSection', () => {
 
 test('Detached ExpandableSection renders successfully', () => {
   const { asFragment } = render(
-    <React.Fragment>
+    <Fragment>
       <ExpandableSection isExpanded isDetached {...props}>
         test
       </ExpandableSection>
       <ExpandableSectionToggle isExpanded direction="up" {...props}>
         Toggle text
       </ExpandableSectionToggle>
-    </React.Fragment>
+    </Fragment>
   );
   expect(asFragment()).toMatchSnapshot();
 });