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

package/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx

@@ -1,13 +1,14 @@
+import { useEffect, useRef, useState } from 'react';
 import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
-  const toggleRef = React.useRef<HTMLDivElement>(undefined);
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
-  const containerRef = React.useRef<HTMLDivElement>(undefined);
+  const toggleRef = useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(undefined);
+  const containerRef = useRef<HTMLDivElement>(undefined);
 
-  const [idIndex, setIdIndex] = React.useState<number>(3);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [labels, setLabels] = React.useState<any>([
+  const [idIndex, setIdIndex] = useState<number>(3);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [labels, setLabels] = useState<any>([
     { name: 'Label 1', id: 0 },
     { name: 'Label 2', id: 1 },
     {
@@ -67,7 +68,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   LabelGroup,
   Label,
@@ -17,27 +18,27 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
-  const [isModalOpen, setModalOpen] = React.useState<boolean>(false);
-  const [idIndex, setIdIndex] = React.useState<number>(7);
-  const [labelText, setLabelText] = React.useState<string>('');
-  const [color, setColor] = React.useState<string>();
-  const [icon, setIcon] = React.useState<any>();
-  const [labelType, setLabelType] = React.useState<string>('filled');
-  const [isClosable, setIsCloseable] = React.useState<boolean>(false);
-  const [isEditable, setIsEditable] = React.useState<boolean>(false);
-  const labelInputRef = React.useRef(null);
+  const [isModalOpen, setModalOpen] = useState<boolean>(false);
+  const [idIndex, setIdIndex] = useState<number>(7);
+  const [labelText, setLabelText] = useState<string>('');
+  const [color, setColor] = useState<string>();
+  const [icon, setIcon] = useState<any>();
+  const [labelType, setLabelType] = useState<string>('filled');
+  const [isClosable, setIsCloseable] = useState<boolean>(false);
+  const [isEditable, setIsEditable] = useState<boolean>(false);
+  const labelInputRef = useRef(null);
 
-  const [isColorOpen, setIsColorOpen] = React.useState<boolean>(false);
-  const colorMenuRef = React.useRef<HTMLDivElement>(null);
-  const colorContainerRef = React.useRef<HTMLDivElement>(null);
-  const colorToggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isColorOpen, setIsColorOpen] = useState<boolean>(false);
+  const colorMenuRef = useRef<HTMLDivElement>(null);
+  const colorContainerRef = useRef<HTMLDivElement>(null);
+  const colorToggleRef = useRef<HTMLButtonElement>(null);
 
-  const [isIconOpen, setIsIconOpen] = React.useState<boolean>(false);
-  const iconMenuRef = React.useRef<HTMLDivElement>(null);
-  const iconContainerRef = React.useRef<HTMLDivElement>(null);
-  const iconToggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isIconOpen, setIsIconOpen] = useState<boolean>(false);
+  const iconMenuRef = useRef<HTMLDivElement>(null);
+  const iconContainerRef = useRef<HTMLDivElement>(null);
+  const iconToggleRef = useRef<HTMLButtonElement>(null);
 
-  const [labels, setLabels] = React.useState<any>([
+  const [labels, setLabels] = useState<any>([
     { name: 'Label 1', id: 4 },
     { name: 'Label 2', id: 5 },
     {
@@ -106,7 +107,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     setModalOpen(!isModalOpen);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isModalOpen && labelInputRef && labelInputRef.current) {
       (labelInputRef.current as HTMLInputElement).focus();
     }
@@ -136,7 +137,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {

package/src/components/Label/examples/LabelGroupEditableLabels.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { LabelGroup, Label } from '@patternfly/react-core';
 
 export const LabelGroupEditableLabels: React.FunctionComponent = () => {
-  const [label1, setLabel1] = React.useState('Editable label');
-  const [label2, setLabel2] = React.useState('Editable label 2');
-  const [label3, setLabel3] = React.useState('Editable label 3');
+  const [label1, setLabel1] = useState('Editable label');
+  const [label2, setLabel2] = useState('Editable label 2');
+  const [label3, setLabel3] = useState('Editable label 3');
 
   return (
     <LabelGroup numLabels={5} isEditable>

package/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
-  const [labels, setLabels] = React.useState([
+  const [labels, setLabels] = useState([
     ['Label 1', 'grey'],
     ['Label 2', 'blue'],
     ['Label 3', 'green'],

package/src/components/LoginPage/examples/LoginPage.md

@@ -18,7 +18,7 @@ propComponents:
   ]
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
@@ -18,12 +18,12 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const SimpleLoginPage: React.FunctionComponent = () => {
-  const [showHelperText, setShowHelperText] = React.useState(false);
-  const [username, setUsername] = React.useState('');
-  const [isValidUsername, setIsValidUsername] = React.useState(true);
-  const [password, setPassword] = React.useState('');
-  const [isValidPassword, setIsValidPassword] = React.useState(true);
-  const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [username, setUsername] = useState('');
+  const [isValidUsername, setIsValidUsername] = useState(true);
+  const [password, setPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
 
   const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
@@ -23,14 +23,14 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const LoginPageLanguageSelect: React.FunctionComponent = () => {
-  const [showHelperText, setShowHelperText] = React.useState(false);
-  const [username, setUsername] = React.useState('');
-  const [isValidUsername, setIsValidUsername] = React.useState(true);
-  const [password, setPassword] = React.useState('');
-  const [isValidPassword, setIsValidPassword] = React.useState(true);
-  const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
-  const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
-  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English');
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [username, setUsername] = useState('');
+  const [isValidUsername, setIsValidUsername] = useState(true);
+  const [password, setPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
+  const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = useState(false);
+  const [selectedHeaderUtils, setSelectedHeaderUtils] = useState('English');
 
   /** i18n object is used to simulate i18n integration of native language translation */
   const i18n = {

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
@@ -18,12 +18,12 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-
 import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const LoginPageHideShowPassword: React.FunctionComponent = () => {
-  const [showHelperText, setShowHelperText] = React.useState(false);
-  const [username, setUsername] = React.useState('');
-  const [isValidUsername, setIsValidUsername] = React.useState(true);
-  const [password, setPassword] = React.useState('');
-  const [isValidPassword, setIsValidPassword] = React.useState(true);
-  const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [username, setUsername] = useState('');
+  const [isValidUsername, setIsValidUsername] = useState(true);
+  const [password, setPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+  const [isRememberMeChecked, setIsRememberMeChecked] = useState(false);
 
   const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);

package/src/components/Menu/examples/Menu.md

@@ -20,7 +20,7 @@ propComponents:
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, createRef, useEffect, useRef, useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';

package/src/components/Menu/examples/MenuBasic.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Checkbox } from '@patternfly/react-core';
 
 export const MenuBasic: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [isPlain, setIsPlain] = React.useState(false);
+  const [activeItem, setActiveItem] = useState(0);
+  const [isPlain, setIsPlain] = useState(false);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuDangerMenuItem.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Divider, Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core';
 
 export const MenuDangerMenuItem: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;

package/src/components/Menu/examples/MenuFilterDrilldown.tsx

@@ -1,3 +1,4 @@
+import { createRef, useState } from 'react';
 import {
   Menu,
   MenuContent,
@@ -11,10 +12,10 @@ import {
 } from '@patternfly/react-core';
 
 export const MenuWithDrilldown: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('filter_drilldown-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('filter_drilldown-rootMenu');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
@@ -44,8 +45,8 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
     }
   };
 
-  const searchRef = React.createRef<HTMLInputElement>();
-  const [startInput, setStartInput] = React.useState('');
+  const searchRef = createRef<HTMLInputElement>();
+  const [startInput, setStartInput] = useState('');
 
   const handleStartTextInputChange = (value: string) => {
     setStartInput(value);

package/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Menu,
   MenuList,
@@ -10,8 +11,8 @@ import {
 } from '@patternfly/react-core';
 
 export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [input, setInput] = React.useState('');
+  const [activeItem, setActiveItem] = useState(0);
+  const [input, setInput] = useState('');
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuOptionMultiSelect.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 
 export const MenuOptionMultiSelect: React.FunctionComponent = () => {
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;

package/src/components/Menu/examples/MenuOptionSingleSelect.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 
 export const MenuOptionSingleSelect: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [selectedItem, setSelectedItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
+  const [selectedItem, setSelectedItem] = useState(0);
 
   const onSelect = (_event, itemId) => {
     setActiveItem(itemId);

package/src/components/Menu/examples/MenuScrollable.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuScrollable: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event, itemId) => {
     // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event, itemId) => {
     // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuWithActions.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
@@ -5,7 +6,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const MenuWithActions: React.FunctionComponent = () => {
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([0, 2, 3]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([0, 2, 3]);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;

package/src/components/Menu/examples/MenuWithCheckbox.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithCheckbox: React.FunctionComponent = () => {
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   /* eslint no-unused-vars: ["error", {"args": "after-used"}] */
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {

package/src/components/Menu/examples/MenuWithDescription.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const MenuWithDescription: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuWithDrilldown.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -5,10 +6,10 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithDrilldown: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('drilldown-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('drilldown-rootMenu');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { useState } from 'react';
 import {
   Badge,
   Breadcrumb,
@@ -30,7 +30,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
   const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
   const [menuHeights, setMenuHeights] = useState<any>({});
   const [activeMenu, setActiveMenu] = useState<string>('breadcrumbs-rootMenu');
-  const [breadcrumb, setBreadcrumb] = useState<JSX.Element | null>();
+  const [breadcrumb, setBreadcrumb] = useState<React.JSX.Element | null>();
   const [withMaxMenuHeight, setWithMaxMenuHeight] = useState(false);
 
   const onToggle = (isOpen: boolean, key: string) => {
@@ -60,7 +60,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     _event: React.KeyboardEvent<Element> | MouseEvent | React.MouseEvent<any, MouseEvent>,
     toMenuId: string,
     fromPathId: string,
-    breadcrumb: JSX.Element | null
+    breadcrumb: React.JSX.Element | null
   ) => {
     setMenuDrilledIn((prevMenuDrilledIn) => {
       const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);

package/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -5,13 +6,13 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuDrilldownInitialState: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([
     'initial-state-rootMenu',
     'initial-state-drilldownMenuStart'
   ]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>(['group:start_rollout', 'group:app_grouping']);
-  const [menuHeights, setMenuHeights] = React.useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
-  const [activeMenu, setActiveMenu] = React.useState<string>('initial-state-drilldownMenuStartGrouping');
+  const [drilldownPath, setDrilldownPath] = useState<string[]>(['group:start_rollout', 'group:app_grouping']);
+  const [menuHeights, setMenuHeights] = useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
+  const [activeMenu, setActiveMenu] = useState<string>('initial-state-drilldownMenuStartGrouping');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,

package/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -5,10 +6,10 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('functions-rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('functions-rootMenu');
 
   const drillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,

package/src/components/Menu/examples/MenuWithFavorites.tsx

@@ -1,12 +1,12 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const MenuWithFavorites: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [favorites, setFavorites] = React.useState<string[]>([]);
+  const [activeItem, setActiveItem] = useState(0);
+  const [favorites, setFavorites] = useState<string[]>([]);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuWithFooter.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuList, MenuItem, MenuContent, MenuFooter, Button } from '@patternfly/react-core';
 
 export const MenuWithFooter: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;

package/src/components/Menu/examples/MenuWithIcons.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithIcons: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuWithLinks.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithLinks: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuWithSeparators.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Divider, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithSeparators: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;

package/src/components/Menu/examples/MenuWithTitledGroups.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, Divider } from '@patternfly/react-core';
 
 export const MenuWithTitledGroups: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number; // eslint-disable-next-line no-console

package/src/components/Menu/examples/MenuWithViewMore.tsx

@@ -1,11 +1,12 @@
+import { useEffect, useRef, useState } from 'react';
 import { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core';
 
 export const MenuWithViewMore: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [numOptions, setNumOptions] = React.useState(3);
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [numOptions, setNumOptions] = useState(3);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [menuOptions, setMenuOptions] = React.useState([
+  const [menuOptions, setMenuOptions] = useState([
     <MenuItem key={0} itemId={'view-more-0'}>
       Action
     </MenuItem>,
@@ -40,12 +41,12 @@ export const MenuWithViewMore: React.FunctionComponent = () => {
       Final option
     </MenuItem>
   ]);
-  const [visibleOptions, setVisibleOptions] = React.useState(menuOptions.slice(0, numOptions));
+  const [visibleOptions, setVisibleOptions] = useState(menuOptions.slice(0, numOptions));
 
-  const activeItemRef = React.useRef<HTMLElement>(null);
-  const viewMoreRef = React.useRef<HTMLElement>(null);
+  const activeItemRef = useRef<HTMLElement>(null);
+  const viewMoreRef = useRef<HTMLElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     activeItemRef.current?.focus();
   }, [visibleOptions]);