@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

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

@@ -1,11 +1,95 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should not render tablist aria-label or aria-labelledby when neither is provided 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2n:"
+    data-ouia-component-type="PF6/Tabs"
+    data-ouia-safe="true"
+    id="noTabListLabelTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
+  >
+    <ul
+      class="pf-v6-c-tabs__list"
+      role="tablist"
+    >
+      <li
+        class="pf-v6-c-tabs__item pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-0-tab1"
+          aria-selected="true"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-0-tab1"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 1"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-v6-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-1-tab2"
+          aria-selected="false"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-1-tab2"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 2"
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>
+</DocumentFragment>
+`;
+
 exports[`should render accessible tabs 1`] = `
 <DocumentFragment>
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1b:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -122,7 +206,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r19:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -281,7 +365,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-24"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1v:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -398,7 +482,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r13:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -413,7 +497,7 @@ exports[`should render expandable vertical tabs 1`] = `
         <button
           aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-5"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r14:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="generated-id-button"
@@ -431,11 +515,11 @@ exports[`should render expandable vertical tabs 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 256 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                 />
               </svg>
             </span>
@@ -605,7 +689,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-15"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1d:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -722,7 +806,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    data-ouia-component-id="OUIA-Generated-Tabs-:rn:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -881,7 +965,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1f:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -967,7 +1051,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-17"
+      data-ouia-component-id="OUIA-Generated-Tabs-:r1h:"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1106,11 +1190,186 @@ exports[`should render subtabs 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should render tablist aria-label when provided 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2j:"
+    data-ouia-component-type="PF6/Tabs"
+    data-ouia-safe="true"
+    id="tabListLabelTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
+  >
+    <ul
+      aria-label="Primary tab list"
+      class="pf-v6-c-tabs__list"
+      role="tablist"
+    >
+      <li
+        class="pf-v6-c-tabs__item pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-0-tab1"
+          aria-selected="true"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-0-tab1"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 1"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-v6-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-1-tab2"
+          aria-selected="false"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-1-tab2"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 2"
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>
+</DocumentFragment>
+`;
+
+exports[`should render tablist aria-labelledby when provided 1`] = `
+<DocumentFragment>
+  <h2
+    id="tablistHeading"
+  >
+    My tabs heading
+  </h2>
+  <div
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2l:"
+    data-ouia-component-type="PF6/Tabs"
+    data-ouia-safe="true"
+    id="tabListLabelledByTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
+  >
+    <ul
+      aria-labelledby="tablistHeading"
+      class="pf-v6-c-tabs__list"
+      role="tablist"
+    >
+      <li
+        class="pf-v6-c-tabs__item pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-0-tab1"
+          aria-selected="true"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-0-tab1"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 1"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-v6-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-1-tab2"
+          aria-selected="false"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-1-tab2"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 2"
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>
+</DocumentFragment>
+`;
+
 exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-18"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1j:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1228,7 +1487,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-25"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r21:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1345,7 +1604,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-19"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1l:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1472,7 +1731,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-:rv:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1889,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-10"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r11:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

package/src/components/Tabs/examples/Tabs.md

@@ -25,7 +25,7 @@ import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 ## Examples
 
@@ -159,6 +159,8 @@ Use subtabs within other components, like modals. Subtabs have less visually pro
 
 To apply subtab styling to tabs, use the `isSubtab` property.
 
+For accessibility, give the primary tablist an accessible name (for example, `tabListAriaLabel="Primary"`) and give any subtab tablist an accessible name that matches the currently selected primary tab (for example, `tabListAriaLabel="Users"`).
+
 ```ts file="./TabsSubtabs.tsx"
 
 ```
@@ -189,6 +191,14 @@ Subtabs can also link to nav elements.
 
 ```
 
+### Tabs used for site navigation
+
+Site navigation tabs
+
+```ts file="./TabsSiteNav.tsx"
+
+```
+
 ### With separate content
 
 If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content.

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

@@ -1,7 +1,7 @@
 import { createRef, useEffect, useRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, Popover, TabAction } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TabsHelpAndClose: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = useState<number>(0);
@@ -73,7 +73,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
                   onClick={(e) => onClose(e, index)}
                   isDisabled={tabs.length === 1}
                 >
-                  <TimesIcon />
+                  <RhMicronsCloseIcon />
                 </TabAction>
                 {helpPopover(`Help popover for ${tab}`, ref)}
               </>

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

@@ -27,6 +27,7 @@ export const TabsNavSubtab: React.FunctionComponent = () => {
       onSelect={handleTabClickFirst}
       component={TabsComponent.nav}
       aria-label="Tabs in the sub tabs with nav element example"
+      tabListAriaLabel="Primary"
     >
       <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
         <Tabs
@@ -35,6 +36,7 @@ export const TabsNavSubtab: React.FunctionComponent = () => {
           onSelect={handleTabClickSecond}
           aria-label="Local secondary"
           component={TabsComponent.nav}
+          tabListAriaLabel="Users"
         >
           <Tab eventKey={20} title={<TabTitleText>Item 1</TabTitleText>} href="#">
             Item 1 item section

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

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsSiteNav: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      isNav={true}
+      aria-label="Site navigation with nav styling example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users" aria-label="Nav element content users">
+        Users
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#database">
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#disabled">
+        Disabled
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#aria-disabled">
+        ARIA Disabled
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#network">
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

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

@@ -33,6 +33,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
         onSelect={handleTabClickFirst}
         isBox={isBox}
         aria-label="Tabs in the tabs with subtabs example"
+        tabListAriaLabel="Primary"
         role="region"
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tabs with subtabs content users">
@@ -41,6 +42,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
             role="region"
             activeKey={activeTabKey2}
             isSubtab
+            tabListAriaLabel="Users"
             onSelect={handleTabClickSecond}
           >
             <Tab eventKey={20} title={<TabTitleText>Subtab item 1</TabTitleText>}>

package/src/components/TextInput/TextInput.tsx

@@ -3,7 +3,8 @@ import styles from '@patternfly/react-styles/css/components/FormControl/form-con
 import { css } from '@patternfly/react-styles';
 import { ValidatedOptions } from '../../helpers/constants';
 import { trimLeft } from '../../helpers/util';
-import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 import { FormControlIcon } from '../FormControl/FormControlIcon';
 
@@ -34,8 +35,7 @@ export interface TextInputExpandedObj {
 }
 
 export interface TextInputProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>, OUIAProps {
   /** Additional classes added to the text input. */
   className?: string;
   /** Flag to show if the text input is disabled. */
@@ -92,11 +92,7 @@ export interface TextInputProps
   ouiaSafe?: boolean;
 }
 
-interface TextInputState {
-  ouiaStateId: string;
-}
-
-export class TextInputBase extends Component<TextInputProps, TextInputState> {
+export class TextInputBase extends Component<TextInputProps> {
   static displayName = 'TextInputBase';
   static defaultProps: TextInputProps = {
     'aria-label': null,
@@ -119,9 +115,6 @@ export class TextInputBase extends Component<TextInputProps, TextInputState> {
       // eslint-disable-next-line no-console
       console.error('Text input:', 'Text input requires either an id or aria-label to be specified');
     }
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(TextInputBase.displayName)
-    };
   }
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -207,41 +200,45 @@ export class TextInputBase extends Component<TextInputProps, TextInputState> {
       : {};
 
     return (
-      <span
-        className={css(
-          styles.formControl,
-          readOnlyVariant && styles.modifiers.readonly,
-          readOnlyVariant === 'plain' && styles.modifiers.plain,
-          isDisabled && styles.modifiers.disabled,
-          (isExpanded || expandedProps?.isExpanded) && styles.modifiers.expanded,
-          customIcon && styles.modifiers.icon,
-          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
-          className
-        )}
-      >
-        <input
-          {...props}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          onChange={this.handleChange}
-          type={type}
-          value={this.sanitizeInputValue(value)}
-          aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
-          {...ariaExpandedProps}
-          required={isRequired}
-          disabled={isDisabled}
-          readOnly={!!readOnlyVariant || readOnly}
-          ref={innerRef || this.inputRef}
-          placeholder={placeholder}
-          {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        />
-        {(customIcon || hasStatusIcon) && (
-          <span className={css(styles.formControlUtilities)}>
-            {customIcon && <FormControlIcon customIcon={customIcon} />}
-            {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
+      <SSRSafeIds prefix="pf-" ouiaComponentType={TextInputBase.displayName}>
+        {(_, generatedOuiaId) => (
+          <span
+            className={css(
+              styles.formControl,
+              readOnlyVariant && styles.modifiers.readonly,
+              readOnlyVariant === 'plain' && styles.modifiers.plain,
+              isDisabled && styles.modifiers.disabled,
+              (isExpanded || expandedProps?.isExpanded) && styles.modifiers.expanded,
+              customIcon && styles.modifiers.icon,
+              hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
+              className
+            )}
+          >
+            <input
+              {...props}
+              onFocus={this.onFocus}
+              onBlur={this.onBlur}
+              onChange={this.handleChange}
+              type={type}
+              value={this.sanitizeInputValue(value)}
+              aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
+              {...ariaExpandedProps}
+              required={isRequired}
+              disabled={isDisabled}
+              readOnly={!!readOnlyVariant || readOnly}
+              ref={innerRef || this.inputRef}
+              placeholder={placeholder}
+              {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+            />
+            {(customIcon || hasStatusIcon) && (
+              <span className={css(styles.formControlUtilities)}>
+                {customIcon && <FormControlIcon customIcon={customIcon} />}
+                {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
+              </span>
+            )}
           </span>
         )}
-      </span>
+      </SSRSafeIds>
     );
   }