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

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

@@ -1,6 +1,7 @@
 import { screen, render } from '@testing-library/react';
-import { ClipboardCopy } from '../ClipboardCopy';
+import { ClipboardCopy, ClipboardCopyVariant } from '../ClipboardCopy';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import truncateStyles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
@@ -27,6 +28,19 @@ jest.mock('../ClipboardCopyToggle', () => ({
   )
 }));
 
+jest.mock('../../Truncate', () => ({
+  Truncate: ({ className, trailingNumChars, content, position, tooltipPosition, ...props }) => (
+    <div data-testid="Truncate-mock" {...props}>
+      <p>{`Truncate content: ${content}`}</p>
+      <p>{`Truncate className: ${className}`}</p>
+      <p>{`Truncate position: ${position}`}</p>
+      <p>{`Truncate trailingNumChars: ${trailingNumChars}`}</p>
+      <p>{`Truncate tooltipPosition: ${tooltipPosition}`}</p>
+      {children}
+    </div>
+  )
+}));
+
 const children = 'Copyable text';
 const testId = 'clipboard-copy';
 
@@ -350,6 +364,178 @@ test('Can take array of strings as children', async () => {
   expect(onCopyMock).toHaveBeenCalledWith(expect.any(Object), children);
 });
 
+describe('ClipboardCopy with truncation', () => {
+  test(`Does not render ClipboardCopy component with class ${styles.modifiers.truncate} by default`, () => {
+    render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+    expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Does not render ClipboardCopy component with class ${styles.modifiers.truncate} for expansion variant`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.expansion} data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Does not render ClipboardCopy component with class ${styles.modifiers.truncate} for inlinecompact variant and truncation is false`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Renders ClipboardCopy component with class ${styles.modifiers.truncate} when truncation is true and variant is inline-compact`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Renders ClipboardCopy component with class ${styles.modifiers.truncate} when truncation is an object and variant is inlinecompact`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{}} data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.truncate);
+  });
+
+  test('Does not render with Truncate component by default', () => {
+    render(<ClipboardCopy>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is true and variant is not inline-compact', () => {
+    render(<ClipboardCopy truncation>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is true and variant is expansion', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.expansion} truncation>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is an object and variant is not inline-compact', () => {
+    render(<ClipboardCopy truncation={{}}>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is an object and variant is expansion', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.expansion} truncation={{}}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when variant="inline-compact" and truncation is false', () => {
+    render(<ClipboardCopy variant={ClipboardCopyVariant.inlineCompact}>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Renders with Truncate component when variant="inline-compact" and truncation is true', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId('Truncate-mock')).toBeInTheDocument();
+  });
+
+  test('Passes children to Truncate content prop when variant="inline-compact" and truncation is true', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate content: ${children}`)).toBeInTheDocument();
+  });
+
+  test('Renders with Truncate component when variant="inline-compact" and truncation is an object', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{}}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId('Truncate-mock')).toBeInTheDocument();
+  });
+
+  test('Passes children to Truncate content prop when variant="inline-compact" and truncation is an object', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{}}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate content: ${children}`)).toBeInTheDocument();
+  });
+
+  test('Passes className prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ className: 'clipboard-truncate' }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate className: clipboard-truncate`)).toBeInTheDocument();
+  });
+
+  test('Passes trailingNumChars prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ trailingNumChars: 5 }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate trailingNumChars: 5`)).toBeInTheDocument();
+  });
+
+  test('Passes position prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ position: 'start' }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate position: start`)).toBeInTheDocument();
+  });
+
+  test('Passes tooltipPosition prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ tooltipPosition: 'bottom' }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate tooltipPosition: bottom`)).toBeInTheDocument();
+  });
+});
+
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <ClipboardCopy id="snapshot" ouiaId="snapshot">

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