@patternfly/react-core 6.2.0-prerelease.8 → 6.2.0

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUpload.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`MultipleFileUpload renders custom class names 1`] = `
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
@@ -26,6 +27,7 @@ exports[`MultipleFileUpload renders with expected class names when horizontal 1`
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
@@ -44,6 +46,7 @@ exports[`MultipleFileUpload renders with expected class names when not horizonta
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`MultipleFileUploadButton renders custom class names 1`] = `
     class="pf-v6-c-multiple-file-upload__upload test"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-2"
       data-ouia-component-type="PF6/Button"
@@ -29,7 +28,6 @@ exports[`MultipleFileUploadButton renders with aria-label applied to the button
     class="pf-v6-c-multiple-file-upload__upload"
   >
     <button
-      aria-disabled="false"
       aria-label="test"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-3"
@@ -53,7 +51,6 @@ exports[`MultipleFileUploadButton renders with expected class names 1`] = `
     class="pf-v6-c-multiple-file-upload__upload"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-1"
       data-ouia-component-type="PF6/Button"
@@ -76,7 +73,6 @@ exports[`MultipleFileUploadButton renders with label applied to the button 1`] =
     class="pf-v6-c-multiple-file-upload__upload"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-4"
       data-ouia-component-type="PF6/Button"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`MultipleFileUploadMain passes props to the info component as expected 1
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-4"
         data-ouia-component-type="PF6/Button"
@@ -60,7 +59,6 @@ exports[`MultipleFileUploadMain passes props to the title as expected 1`] = `
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-3"
         data-ouia-component-type="PF6/Button"
@@ -87,7 +85,6 @@ exports[`MultipleFileUploadMain renders custom class names 1`] = `
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-2"
         data-ouia-component-type="PF6/Button"
@@ -114,7 +111,6 @@ exports[`MultipleFileUploadMain renders with expected class names 1`] = `
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-1"
         data-ouia-component-type="PF6/Button"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -13,7 +13,6 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-2"
@@ -90,7 +89,6 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-4"
@@ -181,7 +179,6 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-3"
@@ -260,7 +257,6 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-1"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -89,7 +89,6 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="buttonAriaLabel"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-8"
@@ -206,7 +205,6 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -325,7 +323,6 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-4"
@@ -444,7 +441,6 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-5"
@@ -580,7 +576,6 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-7"
@@ -699,7 +694,6 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -816,7 +810,6 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -935,7 +928,6 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-6"

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -7,6 +7,7 @@ propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 ---
 
+import { useEffect, useState } from 'react';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 Multiple file upload is able to:

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import {
   MultipleFileUpload,
   MultipleFileUploadMain,
@@ -19,12 +19,12 @@ interface readFile {
 }
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
-  const [isHorizontal, setIsHorizontal] = React.useState(false);
-  const [fileUploadShouldFail, setFileUploadShouldFail] = 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 [isHorizontal, setIsHorizontal] = useState(false);
+  const [fileUploadShouldFail, setFileUploadShouldFail] = useState(false);
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
+  const [readFileData, setReadFileData] = useState<readFile[]>([]);
+  const [showStatus, setShowStatus] = useState(false);
+  const [statusIcon, setStatusIcon] = useState('inProgress');
 
   // 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) {
@@ -32,7 +32,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/components/Nav/Nav.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createContext, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
@@ -57,12 +57,12 @@ export interface NavContextProps {
   isHorizontal?: boolean;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
-  navRef?: React.RefObject<HTMLElement>;
+  navRef?: React.RefObject<HTMLElement | null>;
 }
 export const navContextDefaults = {};
-export const NavContext = React.createContext<NavContextProps>(navContextDefaults);
+export const NavContext = createContext<NavContextProps>(navContextDefaults);
 
-class Nav extends React.Component<
+class Nav extends Component<
   NavProps,
   { isScrollable: boolean; ouiaStateId: string; flyoutRef: React.Ref<HTMLLIElement> | null }
 > {
@@ -79,7 +79,7 @@ class Nav extends React.Component<
     flyoutRef: null as React.Ref<HTMLLIElement>
   };
 
-  navRef = React.createRef<HTMLElement>();
+  navRef = createRef<HTMLElement>();
 
   // Callback from NavItem
   onSelect(

package/src/components/Nav/NavExpandable.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -15,7 +15,7 @@ export interface NavExpandableProps
   title: React.ReactNode;
   /** If defined, screen readers will read this text instead of the list title */
   srText?: string;
-  /** Boolean to programatically expand or collapse section */
+  /** Boolean to pragmatically expand or collapse section */
   isExpanded?: boolean;
   /** Anything that can be rendered inside of the expandable list */
   children?: React.ReactNode;
@@ -40,7 +40,7 @@ interface NavExpandableState {
   ouiaStateId: string;
 }
 
-class NavExpandable extends React.Component<NavExpandableProps, NavExpandableState> {
+class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
   static displayName = 'NavExpandable';
   static defaultProps: PickOptional<NavExpandableProps> = {
     srText: '',

package/src/components/Nav/NavGroup.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import { getUniqueId } from '../../helpers/util';

package/src/components/Nav/NavItem.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement, Fragment, isValidElement, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider';
@@ -31,7 +31,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   /** Component used to render NavItems if  React.isValidElement(children) is false */
   component?: React.ElementType<any> | React.ComponentType<any>;
   /** Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined. */
-  flyout?: React.ReactElement;
+  flyout?: React.ReactElement<any>;
   /** Callback when flyout is opened or closed */
   onShowFlyout?: () => void;
   /** z-index of the flyout nav item */
@@ -63,13 +63,13 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   icon,
   ...props
 }: NavItemProps) => {
-  const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
-  const { isSidebarOpen } = React.useContext(PageSidebarContext);
-  const [flyoutTarget, setFlyoutTarget] = React.useState(null);
-  const [isHovered, setIsHovered] = React.useState(false);
-  const ref = React.useRef<HTMLLIElement>();
+  const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
+  const { isSidebarOpen } = useContext(PageSidebarContext);
+  const [flyoutTarget, setFlyoutTarget] = useState(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const ref = useRef<HTMLLIElement>(undefined);
   const flyoutVisible = ref === flyoutRef;
-  const popperRef = React.useRef<HTMLDivElement>();
+  const popperRef = useRef<HTMLDivElement>(undefined);
   const hasFlyout = flyout !== undefined;
   const Component = hasFlyout ? 'button' : (component as any);
 
@@ -137,7 +137,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (hasFlyout) {
       window.addEventListener('click', onFlyoutClick);
     }
@@ -148,7 +148,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (flyoutTarget) {
       if (flyoutVisible) {
         const flyoutItems = Array.from(
@@ -200,8 +200,8 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     );
   };
 
-  const renderClonedChild = (context: any, child: React.ReactElement): React.ReactNode =>
-    React.cloneElement(child, {
+  const renderClonedChild = (context: any, child: React.ReactElement<any>): React.ReactNode =>
+    cloneElement(child, {
       onClick: (e: MouseEvent) => context.onSelect(e, groupId, itemId, to, preventDefault, onClick),
       'aria-current': isActive ? 'page' : null,
       ...(styleChildren && {
@@ -209,10 +209,10 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       }),
       tabIndex: child.props.tabIndex || tabIndex,
       children: hasFlyout ? (
-        <React.Fragment>
+        <Fragment>
           {child.props.children}
           {flyoutButton}
-        </React.Fragment>
+        </Fragment>
       ) : (
         child.props.children
       )
@@ -255,8 +255,8 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       >
         <NavContext.Consumer>
           {(context) =>
-            React.isValidElement(children)
-              ? renderClonedChild(context, children as React.ReactElement)
+            isValidElement(children)
+              ? renderClonedChild(context, children as React.ReactElement<any>)
               : renderDefaultLink(context)
           }
         </NavContext.Consumer>

package/src/components/Nav/NavItemSeparator.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Divider, DividerProps } from '../Divider';
 
 export const NavItemSeparator: React.FunctionComponent<DividerProps> = ({

package/src/components/Nav/NavList.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef, Fragment } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
@@ -21,7 +21,7 @@ export interface NavListProps
   forwardScrollAriaLabel?: string;
 }
 
-class NavList extends React.Component<NavListProps> {
+class NavList extends Component<NavListProps> {
   static displayName = 'NavList';
   static contextType = NavContext;
   context!: React.ContextType<typeof NavContext>;
@@ -36,7 +36,7 @@ class NavList extends React.Component<NavListProps> {
     scrollViewAtEnd: false
   };
 
-  navList = React.createRef<HTMLUListElement>();
+  navList = createRef<HTMLUListElement>();
   observer: any = () => {};
 
   handleScrollButtons = () => {
@@ -128,7 +128,7 @@ class NavList extends React.Component<NavListProps> {
         {({ isHorizontal }) => (
           <PageSidebarContext.Consumer>
             {({ isSidebarOpen }) => (
-              <React.Fragment>
+              <Fragment>
                 {isHorizontal && (!scrollViewAtStart || !scrollViewAtEnd) && (
                   <div className={css(styles.navScrollButton)}>
                     <Button
@@ -162,7 +162,7 @@ class NavList extends React.Component<NavListProps> {
                     />
                   </div>
                 )}
-              </React.Fragment>
+              </Fragment>
             )}
           </PageSidebarContext.Consumer>
         )}

package/src/components/Nav/__tests__/Generated/NavExpandable.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { NavExpandable } from '../../NavExpandable';
 // any missing imports can usually be resolved by adding them here

package/src/components/Nav/__tests__/Generated/NavGroup.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { NavGroup } from '../../NavGroup';
 // any missing imports can usually be resolved by adding them here

package/src/components/Nav/__tests__/Generated/NavItem.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { NavItem } from '../../NavItem';
 // any missing imports can usually be resolved by adding them here

package/src/components/Nav/__tests__/Generated/NavList.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render } from '@testing-library/react';
 import * as ReactCoreUtils from '../../../../helpers/util';
 

package/src/components/Nav/__tests__/Nav.test.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-
+import { StrictMode } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -47,7 +46,7 @@ describe('Nav', () => {
   test('Renders nav list in strict mode', () => {
     const consoleError = jest.spyOn(console, 'error');
     const { asFragment } = renderNav(
-      <React.StrictMode>
+      <StrictMode>
         <Nav className="test-nav-class">
           <NavList className="test-nav-list-class">
             {props.items.map((item) => (
@@ -57,7 +56,7 @@ describe('Nav', () => {
             ))}
           </NavList>
         </Nav>
-      </React.StrictMode>
+      </StrictMode>
     );
     expect(consoleError).not.toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();

package/src/components/Nav/examples/Nav.md

@@ -6,6 +6,7 @@ propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'N
 ouia: true
 ---
 
+import { useState } from 'react';
 import './nav.css';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';

package/src/components/Nav/examples/NavDefault.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavDefault: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);

package/src/components/Nav/examples/NavDrilldown.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
 import { Nav, MenuContent, MenuItem, MenuList, DrilldownMenu, Menu } from '@patternfly/react-core';
 
 interface MenuHeights {
   [menuId: string]: number;
 }
 
-const subMenuTwo: JSX.Element = (
+const subMenuTwo: React.JSX.Element = (
   <DrilldownMenu id="nav-drilldown-subMenu-2">
     <MenuItem itemId="nav-drilldown-subMenu-2-breadcrumb" direction="up">
       SubMenu 1 - Item 1
@@ -23,7 +21,7 @@ const subMenuTwo: JSX.Element = (
   </DrilldownMenu>
 );
 
-const subMenuOne: JSX.Element = (
+const subMenuOne: React.JSX.Element = (
   <DrilldownMenu id="nav-drilldown-subMenu-1">
     <MenuItem itemId="nav-drilldown-subMenu-1-breadcrumb" direction="up">
       Item 1
@@ -46,10 +44,10 @@ const subMenuOne: JSX.Element = (
 );
 
 export const NavigationDrilldown: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
-  const [activeMenu, setActiveMenu] = React.useState('nav-drilldown-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<MenuHeights>({});
+  const [activeMenu, setActiveMenu] = useState('nav-drilldown-rootMenu');
 
   const onDrillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,

package/src/components/Nav/examples/NavExpandable.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavExpandableExample: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
-  const [activeItem, setActiveItem] = React.useState('nav-expandable-group-1_item-1');
+  const [activeGroup, setActiveGroup] = useState('nav-expandable-group-1');
+  const [activeItem, setActiveItem] = useState('nav-expandable-group-1_item-1');
 
   const onSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/components/Nav/examples/NavExpandableThirdLevel.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavExpandableThirdLevel: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1');
-  const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1');
+  const [activeGroup, setActiveGroup] = useState('nav-expand3rd-group-1');
+  const [activeItem, setActiveItem] = useState('nav-expand3rd-group-1_item-1');
 
   const onSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/components/Nav/examples/NavFlyout.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavItem, NavList, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const NavFlyout: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState('nav-flyout-default-link-1');
+  const [activeItem, setActiveItem] = useState('nav-flyout-default-link-1');
 
   const onSelect = (event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as string);

package/src/components/Nav/examples/NavGrouped.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavItem, NavGroup } from '@patternfly/react-core';
 
 export const NavGrouped: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState('group-1_item-1');
+  const [activeItem, setActiveItem] = useState('group-1_item-1');
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as string);

package/src/components/Nav/examples/NavHorizontalNav.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavHorizontalNav: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);

package/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavHorizontalSubNav: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);

package/src/components/Nav/examples/NavIcons.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavItem, NavList } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
@@ -6,7 +6,7 @@ import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);

package/src/components/Nav/examples/NavMixed.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
 
 export const NavMixed: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState('');
-  const [activeItem, setActiveItem] = React.useState('ungrouped_item-1');
+  const [activeGroup, setActiveGroup] = useState('');
+  const [activeItem, setActiveItem] = useState('ungrouped_item-1');
 
   const onSelect = (
     _event: React.FormEvent<HTMLInputElement>,