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

package/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 export const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/TextArea/examples/TextArea.md

@@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['TextArea']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 
 ## Examples
 

package/src/components/TextArea/examples/TextAreaAutoResizing.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaAutoResizing: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaBasic.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return <TextArea value={value} onChange={(_event, value) => setValue(value)} aria-label="text area example" />;
 };

package/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaInvalid.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaInvalid: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaReadOnly.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Checkbox, TextArea } from '@patternfly/react-core';
 
 export const TextAreaReadOnly: React.FunctionComponent = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+  const [isPlainChecked, setIsPlainChecked] = useState(false);
 
   return (
     <Fragment>

package/src/components/TextArea/examples/TextAreaResizableNone.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaResizeNone: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -1,10 +1,11 @@
+import { useRef, useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
 
 export const TextAreaValidated: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
-  const [helperText, setHelperText] = React.useState('Share your thoughts.');
-  const timerRef = React.useRef<number | null>(null);
+  const [value, setValue] = useState('');
+  const [validated, setValidated] = useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = useState('Share your thoughts.');
+  const timerRef = useRef<number | null>(null);
   const simulateNetworkCall = (callback: Function) => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);

package/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const VerticalResizeTextArea: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextInput/examples/TextInput.md

@@ -6,6 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
+import { useRef, useState } from 'react';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 

package/src/components/TextInput/examples/TextInputBasic.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const TextInputBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInput
       value={value}

package/src/components/TextInput/examples/TextInputCustomIcon.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 
 export const TextInputCustomIcon: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
+  const [calendar, setCalendar] = useState('');
+  const [clock, setClock] = useState('');
 
   return (
     <>

package/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 
 export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
+  const [calendar, setCalendar] = useState('');
 
   return (
     <>

package/src/components/TextInput/examples/TextInputInvalid.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const TextInputInvalid: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInput
       value={value}

package/src/components/TextInput/examples/TextInputReadOnly.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Checkbox, TextInput } from '@patternfly/react-core';
 
 export const TextInputReadOnly: React.FunctionComponent = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+  const [isPlainChecked, setIsPlainChecked] = useState(false);
   return (
     <>
       <div style={{ marginBottom: '12px' }}>

package/src/components/TextInput/examples/TextInputSelectUsingRef.tsx

@@ -1,8 +1,9 @@
+import { useRef, useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const TextInputSelectUsingRef: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('select all on click');
-  const ref = React.useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState('select all on click');
+  const ref = useRef<HTMLInputElement>(null);
   return (
     <TextInput
       ref={ref}

package/src/components/TextInput/examples/TextInputStartTruncated.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const StartTruncatedTextInput: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(
+  const [value, setValue] = useState(
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
   );
   return (

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
 ---
 
+import { useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 

package/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 
 export const TextInputGroupBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInputGroup>
       <TextInputGroupMain value={value} onChange={(_event, value) => setValue(value)} />

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -10,8 +11,8 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupFilters: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [currentChips, setCurrentChips] = React.useState([
+  const [inputValue, setInputValue] = useState('');
+  const [currentChips, setCurrentChips] = useState([
     'chip one',
     'chip two',
     'chip three',

package/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {

package/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -11,11 +12,9 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupWithStatus: React.FunctionComponent = () => {
-  const [successValue, setSuccessValue] = React.useState('Success validation');
-  const [warningValue, setWarningValue] = React.useState('Warning validation with custom non-status icon at start');
-  const [errorValue, setErrorValue] = React.useState(
-    'Error validation with custom non-status icon at start and utilities'
-  );
+  const [successValue, setSuccessValue] = useState('Success validation');
+  const [warningValue, setWarningValue] = useState('Warning validation with custom non-status icon at start');
+  const [errorValue, setErrorValue] = useState('Error validation with custom non-status icon at start and utilities');
 
   /** show the input clearing button only when the input is not empty */
   const showClearButton = !!errorValue;

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -6,6 +6,7 @@ propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';
 
+import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupCompact: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-compact-1': false,
     'toggle-group-compact-2': false
   });

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -1,11 +1,12 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-multiple-1': false,
     'toggle-group-multiple-2': false
   });
-  const [disableAll, setDisableAll] = React.useState(false);
+  const [disableAll, setDisableAll] = useState(false);
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState('');
+  const [isSelected, setIsSelected] = useState('');
   const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(id);

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-icons-1': false,
     'toggle-group-icons-2': false,
     'toggle-group-icons-3': true

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'text-icons-1': false,
     'text-icons-2': false,
     'text-icons-3': true

package/src/components/Toolbar/Toolbar.tsx

@@ -57,6 +57,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   ouiaSafe?: boolean;
   /** Background color variant of the toolbar */
   colorVariant?: ToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary';
+  /** Flag indicating the toolbar padding is removed */
+  hasNoPadding?: boolean;
 }
 
 export interface ToolbarState {
@@ -78,6 +80,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   labelGroupContentRef = createRef<HTMLDivElement>();
   staticFilterInfo = {};
+  hasNoPadding = false;
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
@@ -128,6 +131,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
 
   renderToolbar = (randomId: string) => {
     const {
+      hasNoPadding,
       clearAllFilters,
       clearFiltersButtonText,
       collapseListedFiltersBreakpoint,
@@ -159,6 +163,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
           <div
             className={css(
               styles.toolbar,
+              hasNoPadding && styles.modifiers.noPadding,
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,

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

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
 import { Toolbar } from '../Toolbar';
@@ -42,6 +43,34 @@ describe('Toolbar', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it(`should render toolbar without ${styles.modifiers.noPadding} by default`, () => {
+    render(
+      <Toolbar data-testid="toolbar">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+  });
+
+  it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
+    render(
+      <Toolbar data-testid="toolbar-no-padding" hasNoPadding>
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar-no-padding')).toHaveClass(styles.modifiers.noPadding);
+  });
+
   it('should render with custom label content', () => {
     const items = (
       <Fragment>

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

@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-2"
+    data-ouia-component-id="OUIA-Generated-Toolbar-4"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"

package/src/components/Toolbar/examples/Toolbar.md

@@ -5,7 +5,7 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To
 section: components
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,11 +15,11 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
   const riskOptions = ['Risk', 'Low', 'Medium', 'High'];

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,12 +15,12 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const toggleIsExpanded = () => {
     setIsExpanded(!isExpanded);

package/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Toolbar,
   ToolbarItem,
@@ -20,9 +20,9 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 
 export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState<boolean>(false);
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState<boolean>(false);
-  const [filters, setFilters] = React.useState({
+  const [statusIsExpanded, setStatusIsExpanded] = useState<boolean>(false);
+  const [riskIsExpanded, setRiskIsExpanded] = useState<boolean>(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });

package/src/components/Toolbar/examples/ToolbarGroups.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   MenuToggle,
@@ -20,12 +20,12 @@ export const ToolbarGroups: React.FunctionComponent = () => {
   const secondOptions = ['1', '2', '3'];
   const thirdOptions = ['I', 'II', 'III'];
 
-  const [firstIsExpanded, setFirstIsExpanded] = React.useState(false);
-  const [firstSelected, setFirstSelected] = React.useState('');
-  const [secondIsExpanded, setSecondIsExpanded] = React.useState(false);
-  const [secondSelected, setSecondSelected] = React.useState('');
-  const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
-  const [thirdSelected, setThirdSelected] = React.useState('');
+  const [firstIsExpanded, setFirstIsExpanded] = useState(false);
+  const [firstSelected, setFirstSelected] = useState('');
+  const [secondIsExpanded, setSecondIsExpanded] = useState(false);
+  const [secondSelected, setSecondSelected] = useState('');
+  const [thirdIsExpanded, setThirdIsExpanded] = useState(false);
+  const [thirdSelected, setThirdSelected] = useState('');
 
   const onToggle = (filterName: string) => {
     switch (filterName) {

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -32,14 +32,14 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const resourceOptions = ['All resources', 'Deployment', 'Pod'];
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
 
-  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
-  const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
-  const [resourceSelected, setResourceSelected] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [kebabIsOpen, setKebabIsOpen] = useState(false);
+  const [resourceIsExpanded, setResourceIsExpanded] = useState(false);
+  const [resourceSelected, setResourceSelected] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onKebabToggle = () => {
     setKebabIsOpen(!kebabIsOpen);

package/src/components/Toolbar/examples/ToolbarSticky.tsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
 
 export const ToolbarSticky: React.FunctionComponent = () => {
-  const [isSticky, setIsSticky] = React.useState(true);
-  const [showEvenOnly, setShowEvenOnly] = React.useState(true);
+  const [isSticky, setIsSticky] = useState(true);
+  const [showEvenOnly, setShowEvenOnly] = useState(true);
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
   const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Dropdown,
@@ -25,14 +25,14 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [isStatusExpanded, setIsStatusExpanded] = React.useState(false);
-  const [isRiskExpanded, setIsRiskExpanded] = React.useState(false);
-  const [filters, setFilters] = React.useState({
+  const [inputValue, setInputValue] = useState('');
+  const [isStatusExpanded, setIsStatusExpanded] = useState(false);
+  const [isRiskExpanded, setIsRiskExpanded] = useState(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });
-  const [isKebabOpen, setIsKebabOpen] = React.useState(false);
+  const [isKebabOpen, setIsKebabOpen] = useState(false);
 
   const onInputChange = (newValue: string) => {
     setInputValue(newValue);

package/src/components/Tooltip/examples/Tooltip.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-tooltip
 propComponents: ['Tooltip']
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import './TooltipExamples.css';