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

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

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-27"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-34"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -65,3 +65,10 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ```ts file="./ClipboardCopyInlineCompactInSentence.tsx"
 ```
+
+### Inline compact with truncation
+
+You can control the truncation for an `inline-compact` variant by passing the `truncation` property. The following example shows the different ways to use the property: passing a boolean will apply default truncation, while passing an object of `TruncateProps` offers more fine-tuned control over the truncation behavior.
+
+```ts file="./ClipboardCopyInlineCompactTruncation.tsx"
+```

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactTruncation.tsx

@@ -0,0 +1,15 @@
+import { ClipboardCopy } from '@patternfly/react-core';
+export const ClipboardCopyInlineCompactTruncation: React.FunctionComponent = () => (
+  <>
+    <ClipboardCopy truncation hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to
+      true. This is useful for quickly applying truncation without needing to worry about any other properties to set.
+    </ClipboardCopy>
+    <br />
+    <br />
+    <ClipboardCopy truncation={{ position: 'start' }} hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      This lengthy, copyable content will be truncated with customized settings when the truncation prop is passed an
+      object containing Truncate props. This is useful for finetuning truncation for your particular use-case.
+    </ClipboardCopy>
+  </>
+);

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -15,6 +15,7 @@ propComponents:
   ]
 ---
 
+import { useState } from 'react';
 import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/components/DescriptionList/examples/DescriptionListWithCard.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   DescriptionList,
@@ -9,8 +10,8 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithCard: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [isSelectable, setSelectable] = React.useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [isSelectable, setSelectable] = useState<boolean>(false);
 
   const toggleSelectable = (checked: boolean) => {
     setSelectable(checked ? true : false);

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   DescriptionList,
@@ -9,8 +10,8 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');
 
   const toggleDisplaySize = (checked: boolean) => {
     setDisplaySize(checked ? '2xl' : 'lg');

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   DescriptionList,
@@ -9,8 +10,8 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');
 
   const toggleDisplaySize = (checked: boolean) => {
     setDisplaySize(checked ? '2xl' : 'lg');

package/src/components/Dropdown/examples/Dropdown.md

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

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const DropdownBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const DropdownWithDescriptions: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Dropdown,
   DropdownGroup,
@@ -9,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 
 export const DropdownWithGroups: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/EmptyState/examples/EmptyState.md

@@ -4,6 +4,8 @@ section: components
 cssPrefix: pf-v6-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
+
+import { useState } from 'react';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';

package/src/components/EmptyState/examples/EmptyStateWithStatus.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   EmptyState,
   EmptyStateBody,
@@ -8,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 
 export const EmptyStateWithStatus: React.FunctionComponent = () => {
-  const [status, setStatus] = React.useState<EmptyStateStatus>(EmptyStateStatus.success);
+  const [status, setStatus] = useState<EmptyStateStatus>(EmptyStateStatus.success);
 
   const toggleStatus = () => {
     interface StatusToggleMap {

package/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionBasic: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { ExpandableSection, Badge } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
 
 export const ExpandableSectionDetached: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (isExpanded: boolean) => {
     setIsExpanded(isExpanded);

package/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);

package/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core';
 
 export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);

package/src/components/FileUpload/examples/FileUpload.md

@@ -6,6 +6,7 @@ section: components
 subsection: file-upload
 ---
 
+import { useState } from 'react';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState<File>();
-  const [filename, setFilename] = React.useState('');
+  const [value, setValue] = useState<File>();
+  const [filename, setFilename] = useState('');
 
   const handleFileInputChange = (_, file: File) => {
     setValue(file);

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Checkbox } from '@patternfly/react-core';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
@@ -13,17 +14,17 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     'hasPlaceholderText'
   ];
 
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState(false);
-  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = React.useState(true);
-  const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isDragActive, setIsDragActive] = React.useState(false);
-  const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false);
-  const [hasCustomFilePreview, setHasCustomFilePreview] = React.useState(false);
-  const [hasHelperText, setHasHelperText] = React.useState(false);
-  const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
-  const [checkedState, setCheckedState] = React.useState([
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState(false);
+  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = useState(true);
+  const [isClearButtonDisabled, setIsClearButtonDisabled] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [hideDefaultPreview, setHideDefaultPreview] = useState(false);
+  const [hasCustomFilePreview, setHasCustomFilePreview] = useState(false);
+  const [hasHelperText, setHasHelperText] = useState(false);
+  const [hasPlaceholderText, setHasPlaceholderText] = useState(false);
+  const [checkedState, setCheckedState] = useState([
     filename,
     isBrowseButtonDisabled,
     isClearButtonDisabled,

package/src/components/FileUpload/examples/FileUploadSimpleFile.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { FileUpload } from '@patternfly/react-core';
 
 export const SimpleFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);

package/src/components/FileUpload/examples/FileUploadSimpleText.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const SimpleTextFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);

package/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   FileUpload,
   DropzoneErrorCode,
@@ -10,11 +11,11 @@ import {
 } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isRejected, setIsRejected] = React.useState(false);
-  const [message, setMessage] = React.useState('Must be a CSV file no larger than 1 KB');
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRejected, setIsRejected] = useState(false);
+  const [message, setMessage] = useState('Must be a CSV file no larger than 1 KB');
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);

package/src/components/FileUpload/examples/FileUploadWithHelperText.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
 
 export const FileUploadWithHelperText: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [filename, setFilename] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [value, setValue] = useState('');
+  const [filename, setFilename] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);

package/src/components/FormSelect/examples/FormSelect.md

@@ -6,6 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true
 ---
+import { useState } from 'react';
 
 ## Examples
 

package/src/components/FormSelect/examples/FormSelectBasic.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const FormSelectBasic: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+  const [formSelectValue, setFormSelectValue] = useState('mrs');
 
   const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);

package/src/components/FormSelect/examples/FormSelectDisabled.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const FormSelectDisabled: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+  const [formSelectValue, setFormSelectValue] = useState('mrs');
 
   const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);

package/src/components/FormSelect/examples/FormSelectGrouped.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
 
 export const FormSelectGrouped: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('2');
+  const [formSelectValue, setFormSelectValue] = useState('2');
 
   const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);

package/src/components/FormSelect/examples/FormSelectValidated.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Form,
   FormGroup,
@@ -10,9 +11,9 @@ import {
 } from '@patternfly/react-core';
 
 export const FormSelectValidated: React.FunctionComponent = () => {
-  const [formValue, setFormValue] = React.useState('');
-  const [helperText, setHelperText] = React.useState('');
-  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+  const [formValue, setFormValue] = useState('');
+  const [helperText, setHelperText] = useState('');
+  const [validated, setValidated] = useState<ValidatedOptions>(ValidatedOptions.default);
 
   const simulateNetworkCall = (callback: () => void) => {
     setTimeout(callback, 2000);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 },
     {