@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

package/src/components/Panel/__tests__/PanelFooter.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelFooter } from '../PanelFooter';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__footer', () => {
+test(`Renders with the class ${styles.panelFooter}`, () => {
   render(<PanelFooter>Test</PanelFooter>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelFooter);
 });
 
-test('Renders with only the class pf-v5-c-panel__footer by default', () => {
+test(`Renders with only the class ${styles.panelFooter} by default`, () => {
   render(<PanelFooter>Test</PanelFooter>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelFooter, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Panel/__tests__/PanelHeader.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelHeader } from '../PanelHeader';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__header', () => {
+test(`Renders with the class ${styles.panelHeader}`, () => {
   render(<PanelHeader>Test</PanelHeader>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelHeader);
 });
 
-test('Renders with only the class pf-v5-c-panel__header by default', () => {
+test(`Renders with only the class ${styles.panelHeader} by default`, () => {
   render(<PanelHeader>Test</PanelHeader>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelHeader, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Panel/__tests__/PanelMain.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelMain } from '../PanelMain';
+import cssPanelMainMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +18,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__main', () => {
+test(`Renders with the class ${styles.panelMain}`, () => {
   render(<PanelMain>Test</PanelMain>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMain);
 });
 
-test('Renders with only the class pf-v5-c-panel__main by default', () => {
+test(`Renders with only the class ${styles.panelMain} by default`, () => {
   render(<PanelMain>Test</PanelMain>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMain, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -34,7 +36,7 @@ test('Renders with custom class name when className prop is passed', () => {
 test('Renders with custom max height name when maxHeight prop is passed', () => {
   render(<PanelMain maxHeight="100px">Test</PanelMain>);
   const styles = getComputedStyle(screen.getByText('Test'));
-  expect(styles.getPropertyValue('--pf-v5-c-panel__main--MaxHeight')).toBe('100px');
+  expect(styles.getPropertyValue(cssPanelMainMaxHeight.name)).toBe('100px');
 });
 
 test('Renders with the inherited element props spread to the component', () => {

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelMainBody } from '../PanelMainBody';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__main-body', () => {
+test(`Renders with the class ${styles.panelMainBody}`, () => {
   render(<PanelMainBody>Test</PanelMainBody>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMainBody);
 });
 
-test('Renders with only the class pf-v5-c-panel__main-body by default', () => {
+test(`Renders with only the class ${styles.panelMainBody} by default`, () => {
   render(<PanelMainBody>Test</PanelMainBody>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMainBody, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

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

@@ -70,7 +70,7 @@ test('popover can close from content (uncontrolled)', () => {
       aria-label="Popover with button in the body that can close it"
       isVisible
       headerContent={<div>Popover header</div>}
-      bodyContent={hide => (
+      bodyContent={(hide) => (
         <div>
           <div>
             All the content props (headerContent, bodyContent, footerContent) can take a function which the Popover

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

@@ -49,7 +49,7 @@ test('value scaled between minValue and maxValue', () => {
 });
 
 describe('Progress size', () => {
-  Object.keys(ProgressSize).forEach(oneSize => {
+  Object.keys(ProgressSize).forEach((oneSize) => {
     test(oneSize, () => {
       const { asFragment } = render(<Progress id={`${oneSize}-progress`} value={33} size={oneSize as ProgressSize} />);
       expect(asFragment()).toMatchSnapshot();
@@ -58,7 +58,7 @@ describe('Progress size', () => {
 });
 
 describe('Progress variant', () => {
-  Object.keys(ProgressVariant).forEach(oneVariant => {
+  Object.keys(ProgressVariant).forEach((oneVariant) => {
     test(oneVariant, () => {
       const { asFragment } = render(
         <Progress id={`${oneVariant}-progress`} value={33} variant={oneVariant as ProgressVariant} />
@@ -69,7 +69,7 @@ describe('Progress variant', () => {
 });
 
 describe('Progress measure location', () => {
-  Object.keys(ProgressMeasureLocation).forEach(oneLocation => {
+  Object.keys(ProgressMeasureLocation).forEach((oneLocation) => {
     test(oneLocation, () => {
       const { asFragment } = render(
         <Progress id={`${oneLocation}-progress`} value={33} measureLocation={oneLocation as ProgressMeasureLocation} />
@@ -99,10 +99,10 @@ test('progress component generates console warning when no accessible name is pr
 });
 
 test('Does not render helper text by default', () => {
-  render(<Progress/>);
+  render(<Progress />);
 
   expect(screen.queryByText('Test helper text')).not.toBeInTheDocument();
-})
+});
 
 test('Renders passed helper text', () => {
   render(<Progress helperText="Test helper text" />);

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressHelperText } from '../ProgressHelperText';
+import styles from '@patternfly/react-styles/css/components/Progress/progress';
 
 test('Renders without children', () => {
   render(
@@ -17,10 +18,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-progress__helper-text on the div containing the helper text component', () => {
+test(`Renders with class ${styles.progressHelperText} on the div containing the helper text component`, () => {
   render(<ProgressHelperText>Test</ProgressHelperText>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress__helper-text');
+  expect(screen.getByText('Test')).toHaveClass(styles.progressHelperText);
 });
 
 test('Renders with inherited element props spread to the component', () => {

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressStep, ProgressStepVariant } from '../ProgressStep';
 import { capitalize } from '../../../helpers';
+import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Success icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/resources-full-icon', () => () => 'Info icon mock');
@@ -23,9 +24,9 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-progress-stepper__step on the containing li element', () => {
+test(`Renders with class ${styles.progressStepperStep} on the containing li element`, () => {
   render(<ProgressStep>Test</ProgressStep>);
-  expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step');
+  expect(screen.getByRole('listitem')).toHaveClass(styles.progressStepperStep);
 });
 
 test('Renders with custom class name on the containing li element when className prop is provided', () => {
@@ -36,7 +37,7 @@ test('Renders with custom class name on the containing li element when className
 ['default', undefined].forEach((variant) => {
   test(`Renders with no additional classes when variant=${variant} on containing li element`, () => {
     render(<ProgressStep variant={`${variant as ProgressStepVariant}`}>Test</ProgressStep>);
-    expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step', { exact: true });
+    expect(screen.getByRole('listitem')).toHaveClass(styles.progressStepperStep, { exact: true });
   });
 });
 
@@ -77,9 +78,9 @@ test('Renders the element passed via the icon prop', () => {
   expect(screen.getByText('Custom Icon')).toBeVisible();
 });
 
-test('Renders the icon element inside span element with class pf-v5-c-progress-stepper__step-icon', () => {
+test(`Renders the icon element inside span element with class ${styles.progressStepperStepIcon}`, () => {
   render(<ProgressStep icon="Custom Icon">Test</ProgressStep>);
-  expect(screen.getByText('Custom Icon')).toHaveClass('pf-v5-c-progress-stepper__step-icon');
+  expect(screen.getByText('Custom Icon')).toHaveClass(styles.progressStepperStepIcon);
 });
 
 test('Does not render with class pf-m-current by default on containing li element', () => {
@@ -112,14 +113,14 @@ test('Renders the element passed via the description prop', () => {
   expect(screen.getByRole('button', { name: 'Description' })).toBeVisible();
 });
 
-test('Renders the description element inside div element with class pf-v5-c-progress-stepper__step-description', () => {
+test(`Renders the description element inside div element with class ${styles.progressStepperStepDescription}`, () => {
   render(<ProgressStep description="Description">Test</ProgressStep>);
-  expect(screen.getByText('Description')).toHaveClass('pf-v5-c-progress-stepper__step-description');
+  expect(screen.getByText('Description')).toHaveClass(styles.progressStepperStepDescription);
 });
 
-test('Renders children inside class pf-v5-c-progress-stepper__step-title', () => {
+test(`Renders children inside class ${styles.progressStepperStepTitle}`, () => {
   render(<ProgressStep>Test</ProgressStep>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress-stepper__step-title');
+  expect(screen.getByText('Test')).toHaveClass(styles.progressStepperStepTitle);
 });
 
 test('Renders Component element as div by default', () => {
@@ -149,7 +150,7 @@ test('Does not renders with aria-labelledBy by default on Component element', ()
 
 test('Renders with an accessible name that matches children', () => {
   render(
-    <ProgressStep popoverRender={(stepRef) => <div>Popover content</div>} id="test-id" titleId="title-id">
+    <ProgressStep popoverRender={(_stepRef) => <div>Popover content</div>} id="test-id" titleId="title-id">
       Test
     </ProgressStep>
   );

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressStepper } from '../ProgressStepper';
+import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByRole('list')).toBeVisible();
 });
 
-test('Renders with only class name pf-v5-c-progress-stepper by default', () => {
+test(`Renders with only class name ${styles.progressStepper} by default`, () => {
   render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper', { exact: true });
+  expect(screen.getByRole('list')).toHaveClass(styles.progressStepper, { exact: true });
 });
 
-test('Renders with class name pf-v5-c-progress-stepper', () => {
+test(`Renders with class name ${styles.progressStepper}`, () => {
   render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper');
+  expect(screen.getByRole('list')).toHaveClass(styles.progressStepper);
 });
 
 test('Renders with custom class name when className prop is provided', () => {

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
+import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute properrty.
@@ -58,6 +59,9 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** An accessible label for the search input. */
   'aria-label'?: string;
+  /** Flag to indicate utilities should be displayed. By default if this prop is undefined or false, utilities will only be displayed when the search input has a value. */
+
+  areUtilitiesDisplayed?: boolean;
   /** Array of attribute values used for dynamically generated advanced search. */
   attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the search input. */
@@ -151,6 +155,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   appendTo,
   zIndex = 9999,
   name,
+  areUtilitiesDisplayed,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -294,11 +299,11 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onChange={onChangeHandler}
         name={name}
       />
-      {renderUtilities && (
+      {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>
           {resultsCount && <Badge isRead>{resultsCount}</Badge>}
           {!!onNextClick && !!onPreviousClick && (
-            <div className="pf-v5-c-text-input-group__group">
+            <div className={textInputGroupStyles.textInputGroupGroup}>
               <Button
                 variant={ButtonVariant.plain}
                 aria-label={previousNavigationButtonAriaLabel}

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

@@ -6,7 +6,11 @@ import userEvent from '@testing-library/user-event';
 import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
+import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+
+jest.mock('../../../helpers/OUIA/ouia');
 
 const props = {
   onChange: jest.fn(),
@@ -30,7 +34,7 @@ describe('SearchInput', () => {
 
   test('result count', () => {
     render(<SearchInput {...props} resultsCount={3} aria-label="simple text input" data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').querySelector('.pf-v5-c-badge')).toBeInTheDocument();
+    expect(screen.getByTestId('test-id').querySelector(`.${badgeStyles.badge}`)).toBeInTheDocument();
   });
 
   test('renders search input in strict mode', async () => {
@@ -64,8 +68,8 @@ describe('SearchInput', () => {
     render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
     const input = screen.getByTestId('test-id');
-    expect(input.querySelector('.pf-v5-c-text-input-group__group')).toBeInTheDocument();
-    expect(input.querySelector('.pf-v5-c-badge')).toBeInTheDocument();
+    expect(input.querySelector(`.${textInputGroupStyles.textInputGroupGroup}`)).toBeInTheDocument();
+    expect(input.querySelector(`.${badgeStyles.badge}`)).toBeInTheDocument();
 
     await user.click(screen.getByRole('button', { name: 'Previous' }));
     expect(props.onPreviousClick).toHaveBeenCalled();
@@ -78,9 +82,9 @@ describe('SearchInput', () => {
   });
 
   test('hide clear button', () => {
-    const { onClear, ...testProps } = props;
-
-    render(<SearchInput {...testProps} resultsCount="3" aria-label="simple text input without on clear" />);
+    render(
+      <SearchInput {...props} onClear={undefined} resultsCount="3" aria-label="simple text input without on clear" />
+    );
     expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
   });
 
@@ -144,9 +148,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo="inline', async () => {
     const user = userEvent.setup();
 
-    const { container } = render(
-      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />
-    );
+    render(<SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />);
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
 
@@ -156,7 +158,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo external DOM element', async () => {
     const user = userEvent.setup();
 
-    const { container } = render(
+    render(
       <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
     );
 
@@ -248,3 +250,8 @@ test('toggleAriaLabel is applied to the expandable toggle', () => {
 
   expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
 });
+
+test('Utilities are rendered when areUtilitiesDisplayed is set', () => {
+  render(<SearchInput {...props} areUtilitiesDisplayed resetButtonLabel="test-util-display" />);
+  expect(screen.getByLabelText('test-util-display')).toBeVisible();
+});

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

@@ -52,9 +52,6 @@ exports[`SearchInput advanced search 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-17"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -82,9 +79,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-10"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -109,9 +103,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-11"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -202,9 +193,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-18"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -232,9 +220,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-expanded="true"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control pf-m-expanded"
-          data-ouia-component-id="OUIA-Generated-Button-control-12"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -259,9 +244,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-13"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -334,9 +316,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="username_0"
                       type="text"
                       value="player"
@@ -370,9 +349,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="firstname_1"
                       type="text"
                       value="john"
@@ -406,9 +382,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="pf-random-id-2"
                       type="text"
                       value=""
@@ -425,9 +398,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   <button
                     aria-disabled="false"
                     class="pf-v5-c-button pf-m-link pf-m-inline"
-                    data-ouia-component-id="OUIA-Generated-Button-link-1"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
                     type="button"
                   >
                     Link
@@ -463,9 +433,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-primary"
-                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="submit"
                     >
                       Search
@@ -473,9 +440,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-link"
-                      data-ouia-component-id="OUIA-Generated-Button-link-2"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="reset"
                     >
                       Reset
@@ -544,9 +508,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-11"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -574,9 +535,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-5"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -601,9 +559,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-7"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -700,9 +655,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-4"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -723,9 +675,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-5"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -747,9 +696,6 @@ exports[`SearchInput search input with hint 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-6"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -776,9 +722,6 @@ exports[`SearchInput search input with hint 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-2"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span
@@ -860,9 +803,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -883,9 +823,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -907,9 +844,6 @@ exports[`SearchInput simple search input 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-3"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -936,9 +870,6 @@ exports[`SearchInput simple search input 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span

package/src/components/Select/Select.tsx

@@ -25,6 +25,8 @@ export interface SelectPopperProps {
    * appendTo={document.getElementById('target')}
    */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface SelectToggleProps {