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

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import './MenuToggle.css'
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -61,12 +61,13 @@ import { MenuToggle } from '@patternfly/react-core';
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle, Badge } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
   <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
-</React.Fragment>
+</Fragment>
 ```
 
 ### With icons
@@ -76,10 +77,11 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle
     icon={<CogIcon />}
     variant="primary"
@@ -99,7 +101,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
   >
     Icon
   </MenuToggle>
-</React.Fragment>;
+</Fragment>;
 ```
 
 ### With avatar and text
@@ -109,14 +111,15 @@ You can also pass images into the `icon` property. The following example passes
 This can be used alongside a text label that provides more context for the image.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle, Avatar } from '@patternfly/react-core';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
-</React.Fragment>
+</Fragment>
 ```
 
 ### Variant styles
@@ -124,10 +127,11 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
   <MenuToggle variant="primary" isExpanded>
     Expanded
@@ -135,7 +139,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
   <MenuToggle variant="primary" isDisabled>
     Disabled
   </MenuToggle>
-</React.Fragment>
+</Fragment>
 
 ```
 
@@ -146,16 +150,17 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
   {' '}
   <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
   {' '}
   <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
-</React.Fragment>
+</Fragment>
 ```
 
 ### Plain toggle with text label
@@ -163,9 +168,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts
+import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
-<React.Fragment>
+<Fragment>
   <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
     Disabled
   </MenuToggle>{' '}
@@ -175,7 +181,7 @@ import { MenuToggle } from '@patternfly/react-core';
   <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
     Custom text (expanded)
   </MenuToggle>
-</React.Fragment>
+</Fragment>
 ```
 
 ### Split toggle with checkbox

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   MenuToggle,
   TextInputGroup,
@@ -8,7 +9,7 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const MenuToggleTypeahead: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState<string>('');
+  const [inputValue, setInputValue] = useState<string>('');
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);

package/src/components/Modal/examples/Modal.md

@@ -6,7 +6,7 @@ propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';

package/src/components/Modal/examples/ModalBasic.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalBasic: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalCustomFocus.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalCustomFocus: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalCustomHeader.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Modal,
@@ -15,7 +15,7 @@ import {
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalCustomTitleIcon.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 export const ModalCustomTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalCustomWidth.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalCustomWidth: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalNoHeaderFooter.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalVariant } from '@patternfly/react-core';
 
 export const ModalNoHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalSize.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from '@patternfly/react-core';
 
 export const ModalSize: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [selectedVariant, setSelectedVariant] = React.useState(ModalVariant.small);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedVariant, setSelectedVariant] = useState(ModalVariant.small);
 
   const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
   const formatSizeVariantName = (variant: string) => capitalize(variant);

package/src/components/Modal/examples/ModalTitleIcon.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalTopAligned.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 export const ModalTopAligned: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalWithDescription.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core';
 
 export const ModalWithDescription: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Dropdown,
@@ -14,8 +14,8 @@ import {
 } from '@patternfly/react-core';
 
 export const ModalWithDropdown: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalWithForm.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Button,
   Form,
@@ -14,13 +14,13 @@ import {
 } from '@patternfly/react-core';
 
 export const ModalWithForm: React.FunctionComponent = () => {
-  const [isModalOpen, setModalOpen] = React.useState(false);
-  const [nameValue, setNameValue] = React.useState('');
-  const [emailValue, setEmailValue] = React.useState('');
-  const [addressValue, setAddressValue] = React.useState('');
-  const nameLabelHelpRef = React.useRef(null);
-  const emailLabelHelpRef = React.useRef(null);
-  const addressLabelHelpRef = React.useRef(null);
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [nameValue, setNameValue] = useState('');
+  const [emailValue, setEmailValue] = useState('');
+  const [addressValue, setAddressValue] = useState('');
+  const nameLabelHelpRef = useRef(null);
+  const emailLabelHelpRef = useRef(null);
+  const addressLabelHelpRef = useRef(null);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalWithHelp.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const ModalWithHelp: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/components/Modal/examples/ModalWithOverflowingContent.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core';
 
 export const ModalWithOverflowingContent: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);

package/src/components/Modal/examples/ModalWithWizard.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 
 export const ModalWithWizard: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);

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,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   MultipleFileUpload,
   MultipleFileUploadMain,
@@ -18,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) {
@@ -31,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/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,7 +1,8 @@
+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 { type JSX, useState } 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

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

@@ -1,8 +1,9 @@
+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,8 +1,9 @@
+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,7 +1,8 @@
+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,7 +1,8 @@
+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,7 +1,8 @@
+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,7 +1,8 @@
+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,3 +1,4 @@
+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';
@@ -5,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,8 +1,9 @@
+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>,

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -1,6 +1,9 @@
+import { useEffect, useState } from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import styles from '@patternfly/react-styles/css/components/Button/button';
+import { css } from '@patternfly/react-styles';
 
 export enum NotificationBadgeVariant {
   read = 'read',
@@ -27,6 +30,13 @@ export interface NotificationBadgeProps extends Omit<ButtonProps, 'variant'> {
   isExpanded?: boolean;
   /** Determines the variant of the notification badge. */
   variant?: NotificationBadgeVariant | 'read' | 'unread' | 'attention';
+  /** Flag indicating whether the notification badge animation should be triggered. Each
+   * time this prop is true, the animation will be triggered a single time.
+   */
+  shouldNotify?: boolean;
+  /** Callback for when the animation of the notification badge icon ends.
+   */
+  onAnimationEnd?: (event: React.AnimationEvent<HTMLButtonElement>) => void;
 }
 
 export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps> = ({
@@ -37,28 +47,46 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
   icon = <BellIcon />,
   className,
   isExpanded = false,
+  shouldNotify = false,
+  onAnimationEnd,
   ...props
 }: NotificationBadgeProps) => {
+  const [isAnimating, setIsAnimating] = useState(shouldNotify);
   const hasCount = count > 0;
   const hasChildren = children !== undefined;
   const isAttention = variant === NotificationBadgeVariant.attention;
-
   const notificationIcon = isAttention ? attentionIcon : icon;
-  const notificationContent = hasChildren ? children : notificationIcon;
+  let notificationContent: React.ReactNode = null;
+
+  if (hasCount) {
+    notificationContent = count;
+  } else if (hasChildren) {
+    notificationContent = children;
+  }
+
+  const buttonClassName = isAnimating ? css(className, styles.modifiers.notify) : className;
+
+  useEffect(() => {
+    setIsAnimating(shouldNotify);
+  }, [shouldNotify]);
 
-  const [iconProp, notificationChild] = hasCount ? [notificationContent, count] : [undefined, notificationContent];
+  const handleAnimationEnd = (event: React.AnimationEvent<HTMLButtonElement>) => {
+    onAnimationEnd?.(event);
+    setIsAnimating(false);
+  };
 
   return (
     <Button
       variant={ButtonVariant.stateful}
-      className={className}
+      className={buttonClassName}
       aria-expanded={isExpanded}
       state={variant}
       isClicked={isExpanded}
-      icon={iconProp}
+      icon={notificationIcon}
+      onAnimationEnd={handleAnimationEnd}
       {...props}
     >
-      {notificationChild}
+      {notificationContent}
     </Button>
   );
 };