@patternfly/react-core 6.2.0-prerelease.32 → 6.2.0-prerelease.34

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -56,10 +57,10 @@ interface NavOnSelectProps {
 }
 
 export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { 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';
@@ -8,7 +8,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
   type HelperTextItemVariant = 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
   interface PassStrength {
     variant: HelperTextItemVariant;
-    icon: JSX.Element;
+    icon: React.JSX.Element;
     text: string;
   }
 

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Badge,
   Button,
@@ -53,20 +53,20 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 export const PrimaryDetailCardView: React.FunctionComponent = () => {
-  const [totalItemCount, setTotalItemCount] = React.useState(10);
-  const [cardData, setCardData] = React.useState(data);
-  const [isChecked, setIsChecked] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const [areAllSelected, setAreAllSelected] = React.useState<boolean>(false);
-  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
-  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = React.useState(false);
-  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [filters, setFilters] = React.useState<Record<string, string[]>>({ products: [] });
-  const [state, setState] = React.useState({});
-  const [activeCard, setActiveCard] = React.useState(-1);
+  const [totalItemCount, setTotalItemCount] = useState(10);
+  const [cardData, setCardData] = useState(data);
+  const [isChecked, setIsChecked] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [areAllSelected, setAreAllSelected] = useState<boolean>(false);
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = useState(false);
+  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = useState(false);
+  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [filters, setFilters] = useState<Record<string, string[]>>({ products: [] });
+  const [state, setState] = useState({});
+  const [activeCard, setActiveCard] = useState(-1);
 
   interface ProductType {
     id: number;

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 
 export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
 
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);

package/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   Content,
@@ -32,10 +32,10 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('dataListItem1');
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('dataListItem1');
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 
 export const PrimaryDetailFullPage: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
 
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 
 export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
 
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);

package/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   Content,
@@ -23,8 +23,8 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onSelectListItem = (_listItem, listItemProps) => {
     const id = listItemProps.children;

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import {
   PageSection,
@@ -47,11 +47,11 @@ const products: Product[] = [
 ];
 
 export const ModalTabs: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(true);
-  const [selectedProduct, setSelectedProduct] = React.useState<Product | undefined>(products[0]);
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(products[0]);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
 
-  const onCardClick = React.useCallback(
+  const onCardClick = useCallback(
     (product: Product) => () => {
       setSelectedProduct(product);
       setIsModalOpen(true);
@@ -59,13 +59,13 @@ export const ModalTabs: React.FunctionComponent = () => {
     []
   );
 
-  const closeModal = React.useCallback(() => {
+  const closeModal = useCallback(() => {
     setSelectedProduct(undefined);
     setIsModalOpen(false);
     setActiveTabKey(0);
   }, []);
 
-  const onTabSelect = React.useCallback(
+  const onTabSelect = useCallback(
     (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => setActiveTabKey(tabIndex),
     []
   );

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -19,8 +20,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
-  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const [activeNestedTabKey, setActiveNestedTabKey] = useState(10);
 
   // Toggle currently active tab
   const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -18,8 +19,8 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const NestedUnindentedTabs: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(1);
-  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+  const [activeTabKey, setActiveTabKey] = useState(1);
+  const [activeNestedTabKey, setActiveNestedTabKey] = useState(10);
 
   // Toggle currently active tab
   const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 /* eslint-disable no-console */
 import {
   Button,
@@ -67,13 +67,13 @@ interface Repository {
 
 export const TablesAndTabs = () => {
   // secondary tab properties
-  const [secondaryActiveTabKey, setSecondaryActiveTabKey] = React.useState<number>(10);
+  const [secondaryActiveTabKey, setSecondaryActiveTabKey] = useState<number>(10);
   const handleSecondaryTabClick = (tabIndex: number) => {
     setSecondaryActiveTabKey(tabIndex);
   };
 
   // drawer properties
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(true);
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
 
   // table properties
   // In real usage, this data would come from some external source like an API via props.
@@ -93,7 +93,7 @@ export const TablesAndTabs = () => {
     lastCommit: 'Last commit'
   };
 
-  const [selectedRepoName, setSelectedRepoName] = React.useState<string>(repositories[0].name);
+  const [selectedRepoName, setSelectedRepoName] = useState<string>(repositories[0].name);
   const isRepoSelected = (repo: Repository) => repo.name === selectedRepoName;
   const setRepoSelected = (_event: React.FormEvent<HTMLInputElement>, repo: Repository) => {
     setSelectedRepoName(repo.name);
@@ -127,7 +127,7 @@ export const TablesAndTabs = () => {
     }
   ];
 
-  const firstActionRef = React.useRef<HTMLButtonElement>(null);
+  const firstActionRef = useRef<HTMLButtonElement>(null);
 
   /** Handles when the user clicks on the custom action toggle, stops propagation to prevent the drawer from opening */
   const handleActionsToggleClick = (event: React.MouseEvent, ActionsToggleProps: CustomActionsToggleProps) => {

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -16,10 +17,10 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const AttributeValueFiltering: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [selectedKey, setSelectedKey] = React.useState('');
-  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
-  const [currentChips, setCurrentChips] = React.useState<string[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [selectedKey, setSelectedKey] = useState('');
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [currentChips, setCurrentChips] = useState<string[]>([]);
 
   interface attributeValueData {
     [attribute: string]: string[];
@@ -35,12 +36,12 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     Status: ['running', 'idle', 'stopped']
   };
   const keyNames = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];
-  const [menuItemsText, setMenuItemsText] = React.useState(keyNames);
-  const [menuItems, setMenuItems] = React.useState<React.ReactElement<any>[]>([]);
+  const [menuItemsText, setMenuItemsText] = useState(keyNames);
+  const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
-  const textInputGroupRef = React.useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(undefined);
+  const textInputGroupRef = useRef<HTMLDivElement>(undefined);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -66,7 +67,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     clearSelectedKey();
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     /** in the menu only show items that include the text in the input */
     const filteredMenuItems = menuItemsText
       .filter(

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -16,18 +17,18 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const AutoCompleteSearch: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
-  const [currentChips, setCurrentChips] = React.useState<string[]>([]);
-  const [hint, setHint] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [currentChips, setCurrentChips] = useState<string[]>([]);
+  const [hint, setHint] = useState('');
 
   /** auto-completing suggestion text items to be shown in the menu */
   const suggestionItems = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];
-  const [menuItems, setMenuItems] = React.useState<React.ReactElement<any>[]>([]);
+  const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
-  const textInputGroupRef = React.useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(undefined);
+  const textInputGroupRef = useRef<HTMLDivElement>(undefined);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -46,7 +47,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
     setInputValue('');
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     /** in the menu only show items that include the text in the input */
     const filteredMenuItems = suggestionItems
       .filter((item) => !inputValue || item.toLowerCase().includes(inputValue.toString().toLowerCase()))

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Badge,
   Button,
@@ -35,22 +35,22 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     'container-sample-3': { type: 'E' }
   };
 
-  const [containerExpanded, setContainerExpanded] = React.useState(false);
-  const [containerExpandedMobile, setContainerExpandedMobile] = React.useState(false);
-  const [containerSelected, setContainerSelected] = React.useState(Object.keys(firstOptions)[0]);
-  const [optionExpanded, setOptionExpanded] = React.useState(false);
-  const [optionExpandedMobile, setOptionExpandedMobile] = React.useState(false);
-  const [isPaused, setIsPaused] = React.useState(false);
-  const [firstSwitchChecked, setFirstSwitchChecked] = React.useState(true);
-  const [secondSwitchChecked, setSecondSwitchChecked] = React.useState(false);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [searchResultsCount, setSearchResultsCount] = React.useState(3);
-  const [currentSearchResult, setCurrentSearchResult] = React.useState(1);
-  const [externalExpanded, setExternalExpanded] = React.useState(false);
-  const [externalExpandedMobile, setExternalExpandedMobile] = React.useState(false);
-  const [downloadExpanded, setDownloadExpanded] = React.useState(false);
-  const [downloadExpandedMobile, setDownloadExpandedMobile] = React.useState(false);
-  const [mobileView, setMobileView] = React.useState(window.innerWidth >= 1450 ? false : true);
+  const [containerExpanded, setContainerExpanded] = useState(false);
+  const [containerExpandedMobile, setContainerExpandedMobile] = useState(false);
+  const [containerSelected, setContainerSelected] = useState(Object.keys(firstOptions)[0]);
+  const [optionExpanded, setOptionExpanded] = useState(false);
+  const [optionExpandedMobile, setOptionExpandedMobile] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [firstSwitchChecked, setFirstSwitchChecked] = useState(true);
+  const [secondSwitchChecked, setSecondSwitchChecked] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResultsCount, setSearchResultsCount] = useState(3);
+  const [currentSearchResult, setCurrentSearchResult] = useState(1);
+  const [externalExpanded, setExternalExpanded] = useState(false);
+  const [externalExpandedMobile, setExternalExpandedMobile] = useState(false);
+  const [downloadExpanded, setDownloadExpanded] = useState(false);
+  const [downloadExpandedMobile, setDownloadExpandedMobile] = useState(false);
+  const [mobileView, setMobileView] = useState(window.innerWidth >= 1450 ? false : true);
 
   const onContainerToggle = () => {
     setContainerExpanded((prevState) => !prevState);

package/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Button,
   Drawer,
@@ -15,8 +16,8 @@ import {
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const drawerRef = useRef<HTMLSpanElement | null>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {

package/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Button,
   Content,
@@ -16,8 +17,8 @@ import {
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const drawerRef = useRef<HTMLSpanElement | null>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Brand,
   Breadcrumb,
@@ -34,10 +34,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [activeItem, setActiveItem] = useState(0);
 
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Brand,
   Breadcrumb,
@@ -34,10 +34,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [activeItem, setActiveItem] = useState(0);
 
-  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+  const drawerRef = useRef<HTMLSpanElement | null>(null);
 
   const onExpand = () => {
     if (drawerRef.current) {

package/src/deprecated/components/Chip/examples/Chip.md

@@ -7,7 +7,7 @@ ouia: true
 deprecated: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 ## Examples
 

package/src/deprecated/components/Chip/examples/ChipDefault.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Badge } from '@patternfly/react-core';
 import { Chip } from '@patternfly/react-core/deprecated';
 
 export const ChipDefault: React.FunctionComponent = () => {
-  const [chips, setChips] = React.useState({
+  const [chips, setChips] = useState({
     chip: {
       name: 'Chip 1'
     },

package/src/deprecated/components/Chip/examples/ChipGroupInline.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupInline: React.FunctionComponent = () => {
-  const [chips, setChips] = React.useState([
+  const [chips, setChips] = useState([
     'Chip one',
     'Really long chip that goes on and on',
     'Chip three',

package/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
-  const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
-  const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
+  const [chipGroup1, setChipGroup1] = useState(['Chip one', 'Chip two', 'Chip three']);
+  const [chipGroup2, setChipGroup2] = useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
 
   const deleteItem = (id: string, group: string[]) => {
     const copyOfChips = [...group];

package/src/deprecated/components/Chip/examples/ChipGroupWithCategories.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupWithCategories: React.FunctionComponent = () => {
-  const [chips, setChips] = React.useState([
+  const [chips, setChips] = useState([
     'Chip one',
     'Really long chip that goes on and on',
     'Chip three',

package/src/deprecated/components/DragDrop/examples/DragDrop.md

@@ -5,6 +5,7 @@ propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
 title: Drag and drop
 deprecated: true
 ---
+import { useState } from 'react';
 
 You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.
 

package/src/deprecated/components/DragDrop/examples/DragDropBasic.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 interface ItemType {
@@ -26,7 +27,7 @@ const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
 };
 
 export const DragDropBasic: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState<ItemType[]>(getItems(10));
+  const [items, setItems] = useState<ItemType[]>(getItems(10));
 
   function onDrop(source: SourceType, dest: DestinationType) {
     if (dest) {

package/src/deprecated/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Flex } from '@patternfly/react-core';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
@@ -40,7 +41,7 @@ const move = (source: ItemType[], destination: ItemType[], sourceIndex: number,
 };
 
 export const DragDropMultipleLists: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState<MultipleListState>({
+  const [items, setItems] = useState<MultipleListState>({
     items1: getItems(10, 0),
     items2: getItems(5, 10)
   });

package/src/deprecated/components/Modal/examples/Modal.md

@@ -7,7 +7,7 @@ ouia: true
 deprecated: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';