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

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

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

Files changed (714) hide show

package/src/components/Hint/examples/Hint.md CHANGED Viewed

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-hint
 propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 ## Examples

package/src/components/Hint/examples/HintActionsWithNoOffset.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Hint, HintTitle, HintBody, Button, Checkbox } from '@patternfly/react-core';
 export const HintActionsWithNoOffset: React.FunctionComponent = () => {
-  const [hasNoActionsOffset, setHasNoActionsOffset] = React.useState<boolean>(false);
+  const [hasNoActionsOffset, setHasNoActionsOffset] = useState<boolean>(false);
   const toggleOffset = (checked: boolean) => {
     setHasNoActionsOffset(checked);

package/src/components/Hint/examples/HintBasicWithTitle.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Hint,
   HintTitle,
@@ -14,7 +15,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 export const HintBasicWithTitle: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Hint,
   HintBody,
@@ -14,7 +14,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/Icon/examples/Icon.md CHANGED Viewed

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-icon
 propComponents: ['Icon']
 ---
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';

package/src/components/Icon/examples/IconCustomProgress.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Icon, Spinner, Checkbox } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 export const IconProgress: React.FunctionComponent = () => {
-  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  const [isInProgress, setIsInProgress] = useState<boolean>(false);
   return (
     <Fragment>
       <div style={{ marginBottom: '12px' }}>

package/src/components/Icon/examples/IconProgress.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Icon, Checkbox } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 export const IconProgress: React.FunctionComponent = () => {
-  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  const [isInProgress, setIsInProgress] = useState<boolean>(false);
   return (
     <Fragment>
       <div style={{ marginBottom: '12px' }}>

package/src/components/InputGroup/examples/InputGroup.md CHANGED Viewed

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-input-group
 propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 ---
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';

package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   InputGroup,
@@ -12,7 +12,7 @@ import {
 } from '@patternfly/react-core';
 export const InputGroupWithDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useRef } from 'react';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
 export const InputGroupWithPopover: React.FunctionComponent = () => {
-  const inputGroupRef1 = React.useRef(null);
-  const inputGroupRef2 = React.useRef(null);
+  const inputGroupRef1 = useRef(null);
+  const inputGroupRef2 = useRef(null);
   return (
     <Fragment>
       <InputGroup ref={inputGroupRef1}>

package/src/components/Label/examples/Label.md CHANGED Viewed

@@ -5,7 +5,7 @@ cssPrefix: ['pf-v6-c-label', 'pf-v6-c-label-group']
 propComponents: ['Label', 'LabelGroup']
 ---
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import './Label.css';

package/src/components/Label/examples/LabelEditable.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Label } from '@patternfly/react-core';
 export const LabelEditable: React.FunctionComponent = () => {
-  const [labelText, setLabelText] = React.useState('Editable label');
-  const [compactLabelText, setCompactLabelText] = React.useState('Compact editable label');
+  const [labelText, setLabelText] = useState('Editable label');
+  const [compactLabelText, setCompactLabelText] = useState('Compact editable label');
   const onEditCancel = (_event: KeyboardEvent, prevText: string) => {
     setLabelText(prevText);

package/src/components/Label/examples/LabelGroupCategoryRemovable.tsx CHANGED Viewed

@@ -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 LabelGroupCategoryRemovable: React.FunctionComponent = () => {
-  const [labels, setLabels] = React.useState([
+  const [labels, setLabels] = useState([
     ['Label 1', 'grey'],
     ['Label 2', 'blue'],
     ['Label 3', 'green'],

package/src/components/Label/examples/LabelGroupEditableAdd.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { LabelGroup, Label } from '@patternfly/react-core';
 export const LabelGroupEditableAdd: React.FunctionComponent = () => {
-  const [idIndex, setIdIndex] = React.useState<number>(3);
-  const [labels, setLabels] = React.useState<any>([
+  const [idIndex, setIdIndex] = useState<number>(3);
+  const [labels, setLabels] = useState<any>([
     { name: 'Label 1', id: 0 },
     { name: 'Label 2', id: 1 },
     {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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