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

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -47,7 +47,6 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -58,14 +57,14 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
 
 export const NotificationDrawerGrouped: React.FunctionComponent = () => {
-  const drawerRef = React.useRef<HTMLElement | null>(null);
+  const drawerRef = useRef<HTMLElement | null>(null);
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = React.useState(false);
-  const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = React.useState(true);
-  const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = useState(false);
+  const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = useState(true);
+  const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = useState(false);
 
   interface UnreadMap {
     [groupName: string]: {
@@ -73,8 +72,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     } | null;
   }
 
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isUnreadMap, setIsUnreadMap] = React.useState<UnreadMap | null>({
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isUnreadMap, setIsUnreadMap] = useState<UnreadMap | null>({
     'group-1': {
       'notification-5': true,
       'notification-6': true
@@ -86,13 +85,13 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     'group-3': null
   });
 
-  const [shouldShowNotifications, setShouldShowNotifications] = React.useState(true);
+  const [shouldShowNotifications, setShouldShowNotifications] = useState(true);
 
   interface ActionsMenu {
     [toggleId: string]: boolean;
   }
 
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = React.useState<ActionsMenu | {}>({});
+  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<ActionsMenu | {}>({});
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
@@ -234,9 +233,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                 onClick={(event: any) => onCloseNotificationDrawer(event)}
                 aria-label="Notifications"
                 isExpanded={isDrawerExpanded}
-              >
-                <BellIcon />
-              </NotificationBadge>
+              />
             </ToolbarItem>
             <ToolbarGroup
               variant="action-group-plain"

package/src/demos/Page.md

@@ -3,6 +3,7 @@ id: Page
 section: components
 ---
 
+import { useState } from 'react';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';

package/src/demos/PasswordGenerator.md

@@ -3,6 +3,7 @@ id: Password generator
 section: patterns
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
@@ -12,6 +13,7 @@ import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'
 ### Provide a generated password
 
 ```ts
+import { useEffect, useRef, useState } from 'react';
 import {
   InputGroup,
   InputGroupItem,
@@ -38,14 +40,14 @@ const PasswordGenerator: React.FunctionComponent = () => {
     }
     return retVal;
   };
-  const [password, setPassword] = React.useState<string>('');
-  const [generatedPassword, setGeneratedPassword] = React.useState<string>(generatePassword());
-  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState<boolean>(false);
-  const [passwordHidden, setPasswordHidden] = React.useState<boolean>(true);
-  const searchInputRef = React.useRef(null);
-  const autocompleteRef = React.useRef(null);
+  const [password, setPassword] = useState<string>('');
+  const [generatedPassword, setGeneratedPassword] = useState<string>(generatePassword());
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState<boolean>(false);
+  const [passwordHidden, setPasswordHidden] = useState<boolean>(true);
+  const searchInputRef = useRef(null);
+  const autocompleteRef = .useRef(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {

package/src/demos/PasswordStrength.md

@@ -3,6 +3,7 @@ id: Password strength
 section: patterns
 ---
 
+import { useState } from 'react';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';

package/src/demos/PrimaryDetail.md

@@ -3,6 +3,7 @@ id: Primary-detail
 section: patterns
 ---
 
+import { Fragment, useState } from 'react';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';

package/src/demos/ProgressDemo.md

@@ -2,7 +2,7 @@
 id: Progress
 section: components
 ---
-
+import { useState } from 'react';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ## Demos
@@ -10,11 +10,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 ### Basic
 
 ```js
+import { useState } from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = React.useState(0);
+  const [currentValue, setCurrentValue] = useState(0);
 
   const onProgressUpdate = (nextValue) => {
     setCurrentValue(nextValue);
@@ -48,10 +49,11 @@ ProgressStepperDemo = () => {
 Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `Decrease progress` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check.
 
 ```js
+import { useState } from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 
 ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = React.useState(0);
+  const [currentValue, setCurrentValue] = useState(0);
 
   const onProgressUpdate = (nextValue) => {
     if (nextValue > currentValue) {

package/src/demos/ProgressStepperDemo.md

@@ -3,6 +3,7 @@ id: Progress stepper
 section: components
 ---
 
+import { useState } from 'react';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ## Demos
@@ -10,11 +11,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 ### Basic
 
 ```js
+import { useState } from 'react';
 import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
-  const [currentStep, setCurrentStep] = React.useState(0);
+  const [currentStep, setCurrentStep] = useState(0);
 
   const steps = [
     { title: 'First step', id: 'step1' },

package/src/demos/RTL/RTL.md

@@ -3,6 +3,7 @@ id: Right-to-left
 section: patterns
 ---
 
+import { Fragment, useEffect, useState } from 'react';
 import translationsEn from "./examples/translations.en.json";
 import translationsHe from "./examples/translations.he.json";
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -1,3 +1,4 @@
+import { Fragment, useEffect, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -56,9 +57,9 @@ import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-ico
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 export const PaginatedTableAction = () => {
-  const [translation, setTranslation] = React.useState(translationsEn);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+  const [translation, setTranslation] = useState(translationsEn);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
 
   const columns = [
     translation.table.columns.servers,
@@ -106,9 +107,9 @@ export const PaginatedTableAction = () => {
   };
 
   const rows = createRows();
-  const [managedRows, setManagedRows] = React.useState(rows);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [isDirRTL, setIsDirRTL] = React.useState(false);
+  const [managedRows, setManagedRows] = useState(rows);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
+  const [isDirRTL, setIsDirRTL] = useState(false);
 
   const capitalize = (input) => input[0].toUpperCase() + input.substring(1);
 
@@ -117,13 +118,13 @@ export const PaginatedTableAction = () => {
     setTranslation((prevTranslation) => (prevTranslation === translationsEn ? translationsHe : translationsEn));
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const newRows = createRows();
     setManagedRows(newRows);
     setPaginatedRows(newRows.slice((page - 1) * perPage, page * perPage));
   }, [translation]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const html = document.querySelector('html');
     html.dir = isDirRTL ? 'rtl' : 'ltr';
   }, [isDirRTL]);
@@ -226,7 +227,7 @@ export const PaginatedTableAction = () => {
   };
 
   const toolbarItems = (
-    <React.Fragment>
+    <Fragment>
       <Toolbar id="rtl-paginated-table">
         <ToolbarContent>
           <ToolbarItem>
@@ -246,7 +247,7 @@ export const PaginatedTableAction = () => {
           <ToolbarItem variant="pagination">{renderPagination(PaginationVariant.top)}</ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-    </React.Fragment>
+    </Fragment>
   );
 
   const pageNav = (
@@ -277,9 +278,9 @@ export const PaginatedTableAction = () => {
     </PageSidebar>
   );
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
 
   const kebabDropdownItems = (
     <>
@@ -431,7 +432,7 @@ export const PaginatedTableAction = () => {
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
@@ -498,6 +499,6 @@ export const PaginatedTableAction = () => {
           </Card>
         </PageSection>
       </Page>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/SearchInput/SearchInput.md

@@ -2,7 +2,7 @@
 id: Search input
 section: components
 ---
-
+import { useEffect, useRef, useState } from 'react';
 import {
 Button,
 Card,
@@ -32,19 +32,20 @@ This demo handles building the advanced search form using the composable Menu, a
 It also demonstrates wiring up the appropriate keyboard interactions, focus management, and general event handling.
 
 ```js
+import { useEffect, useRef, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuList, Popper, SearchInput } from '@patternfly/react-core';
 
 import { words } from './words.js';
 
 SearchAutocomplete = () => {
-  const [value, setValue] = React.useState('');
-  const [hint, setHint] = React.useState('');
-  const [autocompleteOptions, setAutocompleteOptions] = React.useState([]);
+  const [value, setValue] = useState('');
+  const [hint, setHint] = useState('');
+  const [autocompleteOptions, setAutocompleteOptions] = useState([]);
 
-  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false);
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
 
-  const searchInputRef = React.useRef(null);
-  const autocompleteRef = React.useRef(null);
+  const searchInputRef = useRef(null);
+  const autocompleteRef = useRef(null);
 
   const onClear = () => {
     setValue('');
@@ -154,7 +155,7 @@ SearchAutocomplete = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
@@ -206,6 +207,7 @@ keyboard interactions, focus management, and general event handling.
 Note: This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.
 
 ```js
+import { useEffect, useRef, useState } from 'react';
 import {
   ActionGroup,
   Button,
@@ -230,20 +232,20 @@ import {
 } from '@patternfly/react-core';
 
 AdvancedComposableSearchInput = () => {
-  const [value, setValue] = React.useState('');
-  const [hasWords, setHasWords] = React.useState('');
-  const [dateWithin, setDateWithin] = React.useState('1 day');
-  const [date, setDate] = React.useState();
+  const [value, setValue] = useState('');
+  const [hasWords, setHasWords] = useState('');
+  const [dateWithin, setDateWithin] = useState('1 day');
+  const [date, setDate] = useState();
 
-  const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = React.useState(false);
-  const [isDateWithinOpen, setIsDateWithinOpen] = React.useState(false);
+  const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(false);
+  const [isDateWithinOpen, setIsDateWithinOpen] = useState(false);
 
-  const isInitialMount = React.useRef(true);
-  const firstAttrRef = React.useRef(null);
-  const searchInputRef = React.useRef(null);
-  const advancedSearchPaneRef = React.useRef(null);
-  const dateWithinToggleRef = React.useRef(undefined);
-  const dateWithinMenuRef = React.useRef(undefined);
+  const isInitialMount = useRef(true);
+  const firstAttrRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const advancedSearchPaneRef = useRef(null);
+  const dateWithinToggleRef = useRef(undefined);
+  const dateWithinMenuRef = useRef(undefined);
 
   const onClear = () => {
     setValue('');
@@ -264,7 +266,7 @@ AdvancedComposableSearchInput = () => {
   // After initial page load, whenever the advanced search menu is opened, the browser focus should be placed on the
   // first advanced search form input. Whenever the advanced search menu is closed, the browser focus should
   // be returned to the search input.
-  React.useEffect(() => {
+  useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -320,7 +322,7 @@ AdvancedComposableSearchInput = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {

package/src/demos/Tabs.md

@@ -3,6 +3,7 @@ id: Tabs
 section: components
 ---
 
+import { Fragment, useCallback, useRef, useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -21,6 +22,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ### Open tabs
 
 ```js isFullscreen
+import { useState } from 'react';
 import {
   PageSection,
   PageBreadcrumb,
@@ -47,7 +49,7 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 TabsOpenDemo = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const [activeTabKey, setActiveTabKey] = useState(0);
 
   // Toggle currently active tab
   const handleTabClick = (event, tabIndex) => {
@@ -210,6 +212,7 @@ TabsOpenDemo = () => {
 ### Open tabs with secondary tabs
 
 ```js isFullscreen
+import { useState } from 'react';
 import {
   PageSection,
   PageBreadcrumb,
@@ -236,8 +239,8 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 TabsOpenWithSecondaryTabsDemo = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
-  const [activeTabKeySecondary, setActiveTabKeySecondary] = React.useState(10);
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10);
 
   // Toggle currently active tab
   const handleTabClick = (event, tabIndex) => {

package/src/demos/TextInputGroupDemo.md

@@ -3,6 +3,7 @@ id: Text input group
 section: components
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 

package/src/demos/Toolbar.md

@@ -3,6 +3,7 @@ id: Toolbar
 section: components
 ---
 
+import { Fragment, useState } from 'react';
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';

package/src/demos/Wizard/WizardDemo.md

@@ -4,6 +4,8 @@ section: components
 source: react-demos
 ---
 
+import { Fragment, useRef, useState } from 'react';
+
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

package/src/demos/examples/Card/CardAggregateStatus.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { Fragment, type JSX } from 'react';
+import { Fragment } from 'react';
 import {
   Card,
   CardBody,
@@ -28,7 +28,7 @@ interface CardData {
   [attribute: string]: {
     title: string;
     content: {
-      icon: JSX.Element;
+      icon: React.JSX.Element;
       count?: number;
       status?: string;
       subtitle?: string;

package/src/demos/examples/Card/CardEventsView.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 /* eslint-disable camelcase */
 import {
   Card,
@@ -29,7 +29,7 @@ import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardEventsView: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const selectItems = (
     <SelectList>

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -24,8 +25,8 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardHorizontalGrid: React.FunctionComponent = () => {
-  const [isCardExpanded, setIsCardExpanded] = React.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isCardExpanded, setIsCardExpanded] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const onCardExpand = () => {
     setIsCardExpanded(!isCardExpanded);

package/src/demos/examples/Card/CardLogView.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 /* eslint-disable camelcase */
 import {
   Card,
@@ -24,7 +24,7 @@ import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardLogView: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const selectItems = (
     <SelectList>

package/src/demos/examples/Card/CardNested.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -17,10 +18,10 @@ import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 export const CardNested: React.FunctionComponent = () => {
-  const [isCardExpanded1, onCardExpand1] = React.useState(true);
-  const [isCardExpanded2, onCardExpand2] = React.useState(false);
-  const [isCardExpanded3, onCardExpand3] = React.useState(false);
-  const [isToggleOnRight, onCheckClick] = React.useState(false);
+  const [isCardExpanded1, onCardExpand1] = useState(true);
+  const [isCardExpanded2, onCardExpand2] = useState(false);
+  const [isCardExpanded3, onCardExpand3] = useState(false);
+  const [isToggleOnRight, onCheckClick] = useState(false);
 
   return (
     <>

package/src/demos/examples/Card/CardStatus.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 /* eslint-disable camelcase */
 import {
   Alert,
@@ -29,12 +30,12 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/excla
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
-  const [drawerExpanded, setDrawerExpanded] = React.useState(false);
+  const [drawerExpanded, setDrawerExpanded] = useState(false);
   const handleDrawerToggleClick = () => {
     setDrawerExpanded(!drawerExpanded);
   };
 
-  const [rowsExpanded, setRowsExpanded] = React.useState([false, false, false]);
+  const [rowsExpanded, setRowsExpanded] = useState([false, false, false]);
   const handleToggleExpand = (_: any, rowIndex: number) => {
     const newRowsExpanded = [...rowsExpanded];
     newRowsExpanded[rowIndex] = !rowsExpanded[rowIndex];

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardBody,
@@ -62,7 +63,7 @@ const descriptionListData = [
 ];
 
 export const CardStatusTabbed: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const [activeTabKey, setActiveTabKey] = useState(0);
   const handleTabClick = (_e: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveTabKey(Number(tabIndex));
   };

package/src/demos/examples/Card/CardWithAccordion.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardTitle,
@@ -19,7 +20,7 @@ import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 export const CardWithAccordion: React.FunctionComponent = () => {
-  const [openCPU, setOpenCPU] = React.useState('cpu1');
+  const [openCPU, setOpenCPU] = useState('cpu1');
 
   return (
     <Card>

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   CalendarMonth,
   InputGroup,
@@ -15,10 +16,10 @@ import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outl
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
 export const DateTimePicker: React.FunctionComponent = () => {
-  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
-  const [isTimeOpen, setIsTimeOpen] = React.useState(false);
-  const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
-  const [valueTime, setValueTime] = React.useState('HH:MM');
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [isTimeOpen, setIsTimeOpen] = useState(false);
+  const [valueDate, setValueDate] = useState('MM-DD-YYYY');
+  const [valueTime, setValueTime] = useState('HH:MM');
   const times = Array.from(new Array(10), (_, i) => i + 8);
   const defaultTime = '0:00';
   const dateFormat = (date: Date) =>

package/src/demos/examples/HelperText/HelperTextDynamic.tsx

@@ -1,14 +1,15 @@
+import { useEffect, useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const HelperTextDynamic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [inputValidation, setInputValidation] = React.useState('default');
+  const [value, setValue] = useState('');
+  const [inputValidation, setInputValidation] = useState('default');
 
   const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (value === '') {
       setInputValidation('default');
     } else if (value === 'johndoe') {