npm - @patternfly/react-core - Versions diffs - 6.2.0-prerelease.33 → 6.2.0-prerelease.35 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (714) hide show

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -53,10 +54,10 @@ interface NavOnSelectProps {
 }
 export const PageStickySectionBreadcrumb: 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/Page/PageStickySectionGroupAlternate.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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) {