@patternfly/react-core 6.2.0-prerelease.33 → 6.2.0-prerelease.35

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,11 +15,11 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
   const riskOptions = ['Risk', 'Low', 'Medium', 'High'];

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,12 +15,12 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const toggleIsExpanded = () => {
     setIsExpanded(!isExpanded);

package/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Toolbar,
   ToolbarItem,
@@ -20,9 +20,9 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 
 export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState<boolean>(false);
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState<boolean>(false);
-  const [filters, setFilters] = React.useState({
+  const [statusIsExpanded, setStatusIsExpanded] = useState<boolean>(false);
+  const [riskIsExpanded, setRiskIsExpanded] = useState<boolean>(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });

package/src/components/Toolbar/examples/ToolbarGroups.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   MenuToggle,
@@ -20,12 +20,12 @@ export const ToolbarGroups: React.FunctionComponent = () => {
   const secondOptions = ['1', '2', '3'];
   const thirdOptions = ['I', 'II', 'III'];
 
-  const [firstIsExpanded, setFirstIsExpanded] = React.useState(false);
-  const [firstSelected, setFirstSelected] = React.useState('');
-  const [secondIsExpanded, setSecondIsExpanded] = React.useState(false);
-  const [secondSelected, setSecondSelected] = React.useState('');
-  const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
-  const [thirdSelected, setThirdSelected] = React.useState('');
+  const [firstIsExpanded, setFirstIsExpanded] = useState(false);
+  const [firstSelected, setFirstSelected] = useState('');
+  const [secondIsExpanded, setSecondIsExpanded] = useState(false);
+  const [secondSelected, setSecondSelected] = useState('');
+  const [thirdIsExpanded, setThirdIsExpanded] = useState(false);
+  const [thirdSelected, setThirdSelected] = useState('');
 
   const onToggle = (filterName: string) => {
     switch (filterName) {

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -32,14 +32,14 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const resourceOptions = ['All resources', 'Deployment', 'Pod'];
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
 
-  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
-  const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
-  const [resourceSelected, setResourceSelected] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [kebabIsOpen, setKebabIsOpen] = useState(false);
+  const [resourceIsExpanded, setResourceIsExpanded] = useState(false);
+  const [resourceSelected, setResourceSelected] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onKebabToggle = () => {
     setKebabIsOpen(!kebabIsOpen);

package/src/components/Toolbar/examples/ToolbarSticky.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
 
 export const ToolbarSticky: React.FunctionComponent = () => {
-  const [isSticky, setIsSticky] = React.useState(true);
-  const [showEvenOnly, setShowEvenOnly] = React.useState(true);
+  const [isSticky, setIsSticky] = useState(true);
+  const [showEvenOnly, setShowEvenOnly] = useState(true);
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
   const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Dropdown,
@@ -25,14 +25,14 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [isStatusExpanded, setIsStatusExpanded] = React.useState(false);
-  const [isRiskExpanded, setIsRiskExpanded] = React.useState(false);
-  const [filters, setFilters] = React.useState({
+  const [inputValue, setInputValue] = useState('');
+  const [isStatusExpanded, setIsStatusExpanded] = useState(false);
+  const [isRiskExpanded, setIsRiskExpanded] = useState(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });
-  const [isKebabOpen, setIsKebabOpen] = React.useState(false);
+  const [isKebabOpen, setIsKebabOpen] = useState(false);
 
   const onInputChange = (newValue: string) => {
     setInputValue(newValue);

package/src/components/Tooltip/examples/Tooltip.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-tooltip
 propComponents: ['Tooltip']
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import './TooltipExamples.css';

package/src/components/Tooltip/examples/TooltipIcon.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const TooltipIcon: React.FunctionComponent = () => {
-  const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+  const [showSuccessContent, setShowSuccessContent] = useState(false);
   const copyText: string = 'Copy to clipboard';
   const doneCopyText: string = 'Successfully copied to clipboard!';
 

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Button,
   Tooltip,
@@ -12,18 +13,18 @@ import {
 } from '@patternfly/react-core';
 
 export const TooltipOptions: React.FunctionComponent = () => {
-  const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']);
-  const [isVisible, setIsVisible] = React.useState(true);
-  const [contentLeftAligned, setContentLeftAligned] = React.useState(false);
-  const [enableFlip, setEnableFlip] = React.useState(true);
-  const [position, setPosition] = React.useState<TooltipPosition>(TooltipPosition.top);
-  const [positionSelectOpen, setPositionSelectOpen] = React.useState(false);
-  const [flipSelectOpen, setFlipSelectOpen] = React.useState(false);
-  const [flipBehavior, setFlipBehavior] = React.useState('flip');
-  const [entryDelayInput, setEntryDelayInput] = React.useState(0);
-  const [exitDelayInput, setExitDelayInput] = React.useState(0);
-  const [animationDuration, setAnimationDuration] = React.useState(300);
-  const tipBoxRef = React.useRef(null);
+  const [trigger, setTrigger] = useState(['mouseenter', 'focus']);
+  const [isVisible, setIsVisible] = useState(true);
+  const [contentLeftAligned, setContentLeftAligned] = useState(false);
+  const [enableFlip, setEnableFlip] = useState(true);
+  const [position, setPosition] = useState<TooltipPosition>(TooltipPosition.top);
+  const [positionSelectOpen, setPositionSelectOpen] = useState(false);
+  const [flipSelectOpen, setFlipSelectOpen] = useState(false);
+  const [flipBehavior, setFlipBehavior] = useState('flip');
+  const [entryDelayInput, setEntryDelayInput] = useState(0);
+  const [exitDelayInput, setExitDelayInput] = useState(0);
+  const [animationDuration, setAnimationDuration] = useState(300);
+  const tipBoxRef = useRef(null);
 
   const scrollToRef = (ref: React.RefObject<any>) => {
     if (ref && ref.current) {
@@ -32,7 +33,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     scrollToRef(tipBoxRef);
   }, []);
 

package/src/components/Tooltip/examples/TooltipReactRef.tsx

@@ -1,7 +1,8 @@
+import { useRef } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 
 export const TooltipReactRef: React.FunctionComponent = () => {
-  const tooltipRef = React.useRef<HTMLButtonElement>(null);
+  const tooltipRef = useRef<HTMLButtonElement>(null);
   return (
     <div style={{ margin: '100px' }}>
       <button aria-describedby="tooltip-ref1" ref={tooltipRef}>

package/src/components/TreeView/examples/TreeView.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
 
 ## Examples

package/src/components/TreeView/examples/TreeViewMultiselectable.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewMultiselectable: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>([]);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>([]);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewSelectableNodes: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     setActiveItems([treeViewItem]);

package/src/components/TreeView/examples/TreeViewSingleSelectable.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewSingleSelectable: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [allExpanded, setAllExpanded] = React.useState<boolean>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = useState<boolean>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TreeView,
   Button,
@@ -12,8 +13,8 @@ import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const TreeViewWithActionItems: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/TreeView/examples/TreeViewWithBadges.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewBadges: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx

@@ -1,9 +1,10 @@
+import { useEffect, useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewWithCheckboxes: React.FunctionComponent = () => {
-  const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
+  const [checkedItems, setCheckedItems] = useState<TreeViewDataItem[]>([]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line no-console
     console.log('Checked items: ', checkedItems);
   }, [checkedItems]);

package/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewCustomBadges: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 
 export const TreeViewWithIconPerItem: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/TreeView/examples/TreeViewWithIcons.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
 export const TreeViewWithIcons: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/TreeView/examples/TreeViewWithMemoization.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewWithMemoization: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [allExpanded, setAllExpanded] = React.useState(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = useState(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     const filtered: TreeViewDataItem[] = [];

package/src/components/TreeView/examples/TreeViewWithSearch.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -71,9 +72,9 @@ export const TreeViewWithSearch: React.FunctionComponent = () => {
     }
   ];
 
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [filteredItems, setFilteredItems] = React.useState(options);
-  const [isFiltered, setIsFiltered] = React.useState(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [filteredItems, setFilteredItems] = useState(options);
+  const [isFiltered, setIsFiltered] = useState(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/Truncate/Truncate.tsx

@@ -17,7 +17,7 @@ const truncateStyles = {
 
 const minWidthCharacters: number = 12;
 
-interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
+export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   /** Class to add to outer span */
   className?: string;
   /** Text to truncate */
@@ -42,6 +42,11 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @hide The element whose parent to reference when calculating whether truncation should occur. This must be an ancestor
+   * of the ClipboardCopy, and must have a valid width value. For internal use only, do not use as it is not part of the public API
+   * and is subject to change.
+   */
+  refToGetParent?: React.RefObject<any>;
 }
 
 const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
@@ -52,6 +57,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   tooltipPosition = 'top',
   trailingNumChars = 7,
   content,
+  refToGetParent,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
@@ -85,8 +91,11 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       setTextElement(textRef.current);
     }
 
-    if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
-      setParentElement(subParentRef.current.parentElement.parentElement);
+    if (
+      (refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement.parentElement)) &&
+      !parentElement
+    ) {
+      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement.parentElement);
     }
   }, [textRef, subParentRef, textElement, parentElement]);
 

package/src/components/Wizard/examples/Wizard.md

@@ -20,6 +20,7 @@ propComponents:
   ]
 ---
 
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
 import {
 FormGroup,
 TextInput,

package/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Form,
   FormGroup,
@@ -49,8 +50,8 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 };
 
 export const WizardEnabledOnFormValidation: React.FunctionComponent = () => {
-  const [ageValue, setAgeValue] = React.useState('Thirty');
-  const [isSubAFormValid, setIsSubAFormValid] = React.useState(false);
+  const [ageValue, setAgeValue] = useState('Thirty');
+  const [isSubAFormValid, setIsSubAFormValid] = useState(false);
 
   const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);
 

package/src/components/Wizard/examples/WizardGetCurrentStep.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   DescriptionList,
   DescriptionListGroup,
@@ -33,7 +34,7 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
 );
 
 export const GetCurrentStepWizard: React.FunctionComponent = () => {
-  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const [currentStep, setCurrentStep] = useState<WizardStepType>();
 
   const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
     setCurrentStep(currentStep);

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Drawer,
   DrawerContent,
@@ -15,9 +16,9 @@ import {
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const StepContentWithDrawer: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
   const { activeStep } = useWizardContext();
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();
 

package/src/components/Wizard/examples/WizardStepStatus.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext, useState } from 'react';
 import { Radio, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
@@ -11,11 +12,11 @@ interface SomeContextProviderProps {
   children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+const SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);
 
 const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-  const [successMessage, setSuccessMessage] = React.useState<string>();
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [successMessage, setSuccessMessage] = useState<string>();
 
   return (
     <SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}>
@@ -25,7 +26,7 @@ const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
 };
 
 const StepContentWithAction = () => {
-  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = React.useContext(SomeContext);
+  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = useContext(SomeContext);
 
   return (
     <>

package/src/components/Wizard/examples/WizardToggleStepVisibility.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext, useState } from 'react';
 import { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
@@ -9,10 +10,10 @@ interface SomeContextProviderProps {
   children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+const SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);
 
 const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = ({ children }) => {
-  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
+  const [isToggleStepChecked, setIsToggleStepChecked] = useState(false);
 
   return (
     <SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}>
@@ -22,7 +23,7 @@ const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = (
 };
 
 const StepContentWithAction: React.FunctionComponent = () => {
-  const { isToggleStepChecked, setIsToggleStepChecked } = React.useContext(SomeContext);
+  const { isToggleStepChecked, setIsToggleStepChecked } = useContext(SomeContext);
 
   return (
     <Checkbox

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from 'react';
 import {
   Button,
   ActionList,
@@ -28,15 +29,15 @@ interface ValidationProgressProps {
 }
 
 const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
-  const [percentValidated, setPercentValidated] = React.useState(0);
+  const [percentValidated, setPercentValidated] = useState(0);
 
-  const tick = React.useCallback(() => {
+  const tick = useCallback(() => {
     if (percentValidated < 100) {
       setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
     return () => {
@@ -153,10 +154,10 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 };
 
 export const WizardValidateOnButtonPress: React.FunctionComponent = () => {
-  const [ageValue, setAgeValue] = React.useState('Thirty');
-  const [isSubmitted, setIsSubmitted] = React.useState(false);
-  const [isFirstStepValid, setIsFirstStepValid] = React.useState(false);
-  const [hasErrorOnSubmit, setHasErrorOnSubmit] = React.useState(false);
+  const [ageValue, setAgeValue] = useState('Thirty');
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isFirstStepValid, setIsFirstStepValid] = useState(false);
+  const [hasErrorOnSubmit, setHasErrorOnSubmit] = useState(false);
 
   // eslint-disable-next-line no-console
   const onClose = () => console.log('Some close action occurs here.');

package/src/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   ActionList,
   ActionListGroup,
@@ -29,7 +30,7 @@ const CustomWizardFooter = () => {
 
 const CustomStepTwoFooter = () => {
   const { goToNextStep, goToPrevStep, close } = useWizardContext();
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onNext() {
     setIsLoading(true);
@@ -88,7 +89,7 @@ const ReviewStepContent: React.FunctionComponent<ReviewStepContentProps> = ({ is
 };
 
 export const WizardWithCustomFooter: React.FunctionComponent = () => {
-  const [isSubmitting, setIsSubmitting] = React.useState<boolean>();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>();
 
   async function onSubmit(): Promise<void> {
     setIsSubmitting(true);