npm - @patternfly/react-core - Versions diffs - 6.2.0-prerelease.32 → 6.2.0-prerelease.34 - Mend

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

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 (745) hide show

package/src/demos/Tabs.md CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/demos/examples/HelperText/HelperTextStatic.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 export const HelperTextStaticText: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);

package/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx CHANGED Viewed

@@ -1,14 +1,15 @@
+import { useEffect, useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 export const HelperTextStaticTextDynamicVariant: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [inputValidation, setInputValidation] = React.useState({
+  const [value, setValue] = useState('');
+  const [inputValidation, setInputValidation] = useState({
     ruleLength: 'indeterminate',
     ruleCharacterTypes: 'indeterminate'
   });
   const { ruleLength, ruleCharacterTypes } = inputValidation;
-  React.useEffect(() => {
+  useEffect(() => {
     let lengthVariant = ruleLength;
     let typeVariant = ruleCharacterTypes;

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -49,14 +50,14 @@ interface NavOnSelectProps {
 }
 export const MastheadWithHorizontalNav: 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(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(0);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -104,7 +105,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -66,17 +66,17 @@ interface NavOnSelectProps {
 }
 export const MastheadWithUtilitiesAndUserDropdownMenu: 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 [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
-  const [favorites, setFavorites] = React.useState<string[]>([]);
-  const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [refFullOptions, setRefFullOptions] = useState<Element[]>();
+  const [favorites, setFavorites] = useState<string[]>([]);
+  const [filteredIds, setFilteredIds] = useState<string[]>(['*']);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -138,7 +138,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsOpen(!isOpen);
   };
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
@@ -249,8 +249,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     const filteredCopy = items
       .map((group) => {
         if (group.type === MenuGroup) {
-          const filteredGroup = React.cloneElement(group, {
-            children: React.cloneElement(group.props.children, {
+          const filteredGroup = cloneElement(group, {
+            children: cloneElement(group.props.children, {
               children: group.props.children.props.children.filter((child) => {
                 if (filteredIds.includes(child.props.itemId)) {
                   return child;
@@ -266,7 +266,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             keepDivider = false;
           }
         } else if (group.type === MenuList) {
-          const filteredGroup = React.cloneElement(group, {
+          const filteredGroup = cloneElement(group, {
             children: group.props.children.filter((child) => {
               if (filteredIds.includes(child.props.itemId)) {
                 return child;

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { FileRejection } from 'react-dropzone';
 import {
   MultipleFileUpload,
@@ -20,12 +21,12 @@ interface readFile {
 }
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
-  const [isHorizontal, setIsHorizontal] = React.useState(false);
-  const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
-  const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
-  const [showStatus, setShowStatus] = React.useState(false);
-  const [statusIcon, setStatusIcon] = React.useState('inProgress');
-  const [modalText, setModalText] = React.useState('');
+  const [isHorizontal, setIsHorizontal] = useState(false);
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
+  const [readFileData, setReadFileData] = useState<readFile[]>([]);
+  const [showStatus, setShowStatus] = useState(false);
+  const [statusIcon, setStatusIcon] = useState('inProgress');
+  const [modalText, setModalText] = useState('');
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
   if (!showStatus && currentFiles.length > 0) {
@@ -33,7 +34,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   }
   // determine the icon that should be shown for the overall status list
-  React.useEffect(() => {
+  useEffect(() => {
     if (readFileData.length < currentFiles.length) {
       setStatusIcon('inProgress');
     } else if (readFileData.every((file) => file.loadResult === 'success')) {

package/src/demos/examples/Nav/NavDrilldown.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { useState } from 'react';
 import {
   Page,
@@ -30,7 +30,7 @@ function getNavLayer(menuId: string): number {
   return 1;
 }
-const subMenuTwo: JSX.Element = (
+const subMenuTwo: React.JSX.Element = (
   <DrilldownMenu id="subMenu-2">
     <MenuItem itemId="subMenu-2-breadcrumb" direction="up">
       SubMenu 1 - Item 1
@@ -47,7 +47,7 @@ const subMenuTwo: JSX.Element = (
   </DrilldownMenu>
 );
-const subMenuOne: JSX.Element = (
+const subMenuOne: React.JSX.Element = (
   <DrilldownMenu id="subMenu-1">
     <MenuItem itemId="subMenu-1-breadcrumb" direction="up">
       Item 1

package/src/demos/examples/Nav/NavExpandable.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 export const NavExpandableDemo: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState<string | number>('grp-1');
-  const [activeItem, setActiveItem] = React.useState<string | number>('grp-1_itm-1');
+  const [activeGroup, setActiveGroup] = useState<string | number>('grp-1');
+  const [activeItem, setActiveItem] = useState<string | number>('grp-1_itm-1');
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavFlyout.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -44,13 +45,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 export const NavFlyout: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isMobileView, setIsMobileView] = React.useState(false);
-  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
-  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isMobileView, setIsMobileView] = useState(false);
+  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true);
+  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false);
+  const [activeItem, setActiveItem] = useState<number | string>(0);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavGrouped.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Content,
   Nav,
@@ -12,7 +13,7 @@ import {
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 export const NavGrouped: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<number | string>('grp-1_itm-1');
+  const [activeItem, setActiveItem] = useState<number | string>('grp-1_itm-1');
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavHorizontal.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -42,10 +42,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 export const NavHorizontal: 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<string | number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -46,11 +46,11 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
 export const NavHorizontalWithSubnav: 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<string | number>(0);
-  const [activeSubNavItem, setActiveSubNavItem] = React.useState<string | number>(7);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
+  const [activeSubNavItem, setActiveSubNavItem] = useState<string | number>(7);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavManual.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -46,13 +46,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 export const NavManual: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isMobileView, setIsMobileView] = React.useState(false);
-  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
-  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isMobileView, setIsMobileView] = useState(false);
+  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true);
+  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavWithSubnav.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 export const NavWithSubnav: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-  const [activeSubNavItem, setActiveSubNavItem] = React.useState<string | number>(7);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
+  const [activeSubNavItem, setActiveSubNavItem] = useState<string | number>(7);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -53,12 +54,12 @@ 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 [isContextSelectorOpen, setIsContextSelectorOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

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);