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

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

@@ -1,5 +1,6 @@
 import { NotificationBadge } from '../NotificationBadge';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Button/button';
 
 Object.values([true, false]).forEach((attentionVariant) => {
   test(`${attentionVariant} NotificationBadge needs attention`, () => {
@@ -32,11 +33,25 @@ test('Renders with aria-expanded="true" when isExpanded is passed in.', () => {
 test('Does not render with .pf-m-clicked when isExpanded is not passed in.', () => {
   render(<NotificationBadge />);
 
-  expect(screen.getByRole('button')).not.toHaveClass('pf-m-clicked');
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.clicked);
 });
 
 test('Renders with .pf-m-clicked when isExpanded is passed in.', () => {
   render(<NotificationBadge isExpanded />);
 
-  expect(screen.getByRole('button')).toHaveClass('pf-m-clicked');
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.clicked);
+});
+
+test('Renders with .pf-m-notify when hasAnimation is passed in.', () => {
+  render(<NotificationBadge shouldNotify />);
+
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.notify);
+});
+
+test('Removes the .pf-m-notify class when animation has ended.', async () => {
+  render(<NotificationBadge shouldNotify />);
+  fireEvent.animationEnd(screen.getByRole('button'));
+  await screen.findByRole('button');
+
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.notify);
 });

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

@@ -46,6 +46,23 @@ exports[`false NotificationBadge needs attention 1`] = `
     data-ouia-safe="true"
     type="button"
   >
+    <span
+      class="pf-v6-c-button__icon pf-m-start"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v6-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 896 1024"
+        width="1em"
+      >
+        <path
+          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z M475,192 L421,192 C400.565464,192 384,208.565464 384,229 L384,539 C384,559.434536 400.565464,576 421,576 L475,576 C495.434536,576 512,559.434536 512,539 L512,229 C512,208.565464 495.434536,192 475,192 Z M448,640 C412.653776,640 384,668.653776 384,704 C384,739.346224 412.653776,768 448,768 C483.346224,768 512,739.346224 512,704 C512,668.653776 483.346224,640 448,640 Z"
+        />
+      </svg>
+    </span>
     <span
       class="pf-v6-c-button__text"
     >
@@ -65,6 +82,23 @@ exports[`true NotificationBadge needs attention 1`] = `
     data-ouia-safe="true"
     type="button"
   >
+    <span
+      class="pf-v6-c-button__icon pf-m-start"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v6-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 896 1024"
+        width="1em"
+      >
+        <path
+          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z M475,192 L421,192 C400.565464,192 384,208.565464 384,229 L384,539 C384,559.434536 400.565464,576 421,576 L475,576 C495.434536,576 512,559.434536 512,539 L512,229 C512,208.565464 495.434536,192 475,192 Z M448,640 C412.653776,640 384,668.653776 384,704 C384,739.346224 412.653776,768 448,768 C483.346224,768 512,739.346224 512,704 C512,668.653776 483.346224,640 448,640 Z"
+        />
+      </svg>
+    </span>
     <span
       class="pf-v6-c-button__text"
     >

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-notification-badge
 propComponents: ['NotificationBadge']
 ---
 
+import { useEffect, useState } from 'react';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
@@ -17,7 +18,7 @@ The `isExpanded` property is also passed in to:
 
 - set the `aria-expanded` attribute on the notification badge,
 - apply visual styling on the notification badge, and
-- to indiciate that a notification drawer is expanded, for use-cases as seen in our [notification drawer react demos](/components/notification-drawer/react-demos).
+- to indicate that a notification drawer is expanded, for use-cases as seen in our [notification drawer react demos](/components/notification-drawer/react-demos).
 
 ```ts file='./NotificationBadgeBasic.tsx'
 ```
@@ -28,3 +29,10 @@ You can display a number within the notification badge by passing in the `count`
 
 ```ts file='./NotificationBadgeWithCount.tsx'
 ```
+
+### With animation
+
+To animate the icon within the notification badge, use the `shouldNotify` property. In this example, the notification badge icon will only animate if the notification count is greater than 0.
+
+```ts file='./NotificationBadgeWithAnimation.tsx'
+```

package/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
 
 export const NotificationBadgeBasic: React.FunctionComponent = () => {
-  const [readExpanded, setReadExpanded] = React.useState(false);
-  const [unreadExpanded, setUnreadExpanded] = React.useState(false);
-  const [attentionExpanded, setAttentionExpanded] = React.useState(false);
+  const [readExpanded, setReadExpanded] = useState(false);
+  const [unreadExpanded, setUnreadExpanded] = useState(false);
+  const [attentionExpanded, setAttentionExpanded] = useState(false);
 
   const onReadClick = () => {
     setReadExpanded(!readExpanded);

package/src/components/NotificationBadge/examples/NotificationBadgeWithAnimation.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { NotificationBadge, NotificationBadgeVariant, Button, Stack, StackItem } from '@patternfly/react-core';
+
+export const NotificationBadgeWithAnimation: React.FunctionComponent = () => {
+  const [count, setCount] = useState(0);
+  const [notify, setNotify] = useState(false);
+
+  useEffect(() => {
+    if (count > 0) {
+      setNotify(true);
+    }
+  }, [count]);
+
+  const onAnimationEnd = () => {
+    setNotify(false);
+  };
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <NotificationBadge
+          variant={NotificationBadgeVariant.read}
+          aria-label="Notification badge with read variant and no count"
+          count={count}
+          shouldNotify={notify}
+          onAnimationEnd={onAnimationEnd}
+        />
+        <NotificationBadge
+          variant={NotificationBadgeVariant.unread}
+          aria-label="Notification badge animation with unread variant and count"
+          count={count}
+          shouldNotify={notify}
+          onAnimationEnd={onAnimationEnd}
+        />
+        <NotificationBadge
+          variant={NotificationBadgeVariant.attention}
+          aria-label="Notification badge animation with attention variant and count"
+          count={count}
+          shouldNotify={notify}
+          onAnimationEnd={onAnimationEnd}
+        />
+      </StackItem>
+      <StackItem>
+        <Button onClick={() => setCount((prevCount) => prevCount + 1)}>Add Notification</Button>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
 
 export const NotificationBadgeWithCount: React.FunctionComponent = () => {
-  const [readExpanded, setReadExpanded] = React.useState(false);
-  const [unreadExpanded, setUnreadExpanded] = React.useState(false);
-  const [attentionExpanded, setAttentionExpanded] = React.useState(false);
+  const [readExpanded, setReadExpanded] = useState(false);
+  const [unreadExpanded, setUnreadExpanded] = useState(false);
+  const [attentionExpanded, setAttentionExpanded] = useState(false);
 
   const onReadClick = () => {
     setReadExpanded(!readExpanded);

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -16,6 +16,7 @@ propComponents:
   ]
 ---
 
+import { useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   NotificationDrawer,
   NotificationDrawerBody,
@@ -15,7 +16,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
-  const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
+  const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false));
 
   const onToggle = (index: number) => () => {
     const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)];

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   EmptyState,
@@ -24,10 +25,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
-  const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
-  const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
-  const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
-  const [isOpenMap, setIsOpenMap] = React.useState({});
+  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);
+  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);
+  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);
+  const [isOpenMap, setIsOpenMap] = useState({});
 
   const onToggle = (id: string) => {
     setIsOpenMap((prevState) => ({ ...prevState, [id]: !prevState[id] }));

package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   EmptyState,
@@ -18,9 +19,9 @@ import {
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerLightweight: React.FunctionComponent = () => {
-  const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
-  const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
-  const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
+  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);
+  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);
+  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);
 
   const toggleFirstDrawer = (_event: any, value: boolean) => {
     setFirstGroupExpanded(value);

package/src/components/NumberInput/examples/NumberInput.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-number-input
 propComponents: ['NumberInput']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useReducer, useState } from 'react';
 
 ## Examples
 

package/src/components/NumberInput/examples/NumberInputCustomStep.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStep: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(90);
+  const [value, setValue] = useState<number | ''>(90);
   const step = 3;
 
   const stepper = (stepValue: number) => {

package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(90);
+  const [value, setValue] = useState<number | ''>(90);
   const minValue = 90;
   const maxValue = 100;
   const step = 3;

package/src/components/NumberInput/examples/NumberInputDefault.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDefault: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(90);
+  const [value, setValue] = useState<number | ''>(90);
 
   const onMinus = () => {
     const newValue = (value || 0) - 1;

package/src/components/NumberInput/examples/NumberInputDisabled.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDisabled: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(100);
+  const [value, setValue] = useState<number | ''>(100);
   const minValue = 0;
   const maxValue = 100;
 

package/src/components/NumberInput/examples/NumberInputUnit.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnit: React.FunctionComponent = () => {
-  const [value1, setValue1] = React.useState<number | ''>(90);
-  const [value2, setValue2] = React.useState<number | ''>(Number((1.0).toFixed(2)));
+  const [value1, setValue1] = useState<number | ''>(90);
+  const [value2, setValue2] = useState<number | ''>(Number((1.0).toFixed(2)));
 
   const onMinus1 = () => setValue1((value1 || 0) - 1);
   const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {

package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnitThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<number | ''>(0);
+  const [value, setValue] = useState<number | ''>(0);
   const minValue = 0;
   const maxValue = 10;
 

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputVaryingSizes: React.FunctionComponent = () => {
-  const [input1Value, setInput1Value] = React.useState<number | ''>(1);
-  const [input2Value, setInput2Value] = React.useState<number | ''>(1234567890);
-  const [input3Value, setInput3Value] = React.useState<number | ''>(5);
-  const [input4Value, setInput4Value] = React.useState<number | ''>(12345);
+  const [input1Value, setInput1Value] = useState<number | ''>(1);
+  const [input2Value, setInput2Value] = useState<number | ''>(1234567890);
+  const [input3Value, setInput3Value] = useState<number | ''>(5);
+  const [input4Value, setInput4Value] = useState<number | ''>(12345);
 
   const onChange = (
     event: React.FormEvent<HTMLInputElement>,

package/src/components/NumberInput/examples/NumberInputWithStatus.tsx

@@ -1,11 +1,12 @@
+import { useReducer, useState } from 'react';
 import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const NumberInputWithStatus: React.FunctionComponent = () => {
   const max = 10;
   const min = 0;
 
-  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.success);
-  const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
+  const [validated, setValidated] = useState<ValidatedOptions>(ValidatedOptions.success);
+  const [value, setValue] = useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
 
   const onPlus = () => {
     const newVal = (value || 0) + 1;

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -13,6 +13,7 @@ propComponents:
   ]
 ---
 
+import { useRef, useState } from 'react';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -14,9 +15,9 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [containerWidth, setContainerWidth] = React.useState(100);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(100);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -17,7 +18,7 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 
 export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -17,7 +18,7 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 
 export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx

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

package/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   OverflowMenu,
   OverflowMenuControl,
@@ -12,7 +13,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/components/Page/Page.tsx

@@ -1,4 +1,4 @@
-import { Component, createRef, type JSX } from 'react';
+import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
@@ -299,7 +299,7 @@ class Page extends Component<PageProps, PageState> {
       </PageGroup>
     ) : null;
 
-    const Component: keyof JSX.IntrinsicElements = mainComponent;
+    const Component: keyof React.JSX.IntrinsicElements = mainComponent;
 
     const main = (
       <div className={css(styles.pageMainContainer, isContentFilled && styles.modifiers.fill)}>

package/src/components/Page/PageSection.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, type JSX } from 'react';
+import { useContext, useEffect } from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
@@ -66,7 +66,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
    */
   'aria-label'?: string;
   /** Sets the base component to render. Defaults to section */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
 }
 
 const variantType = {

package/src/components/Page/examples/Page.md

@@ -6,6 +6,7 @@ propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
 
+import { useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -21,7 +22,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/components/Page/examples/PageGroupSection.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -24,7 +25,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageGroupSection: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMultipleSidebarBody: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageVerticalNav: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Page,
   Masthead,
@@ -17,7 +18,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageWithOrWithoutFill: React.FunctionComponent = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/components/Pagination/examples/Pagination.md

@@ -6,7 +6,7 @@ propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggl
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 ## Examples
 

package/src/components/Pagination/examples/PaginationBottom.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
 
 export const PaginationBottom: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);

package/src/components/Pagination/examples/PaginationCompact.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 
 export const PaginationCompact: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);