@patternfly/react-core 6.5.0-prerelease.39 → 6.5.0-prerelease.40

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-19"
+    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-18"
+    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-29"
+    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-16"
+    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"
@@ -617,7 +701,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-20"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1d:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -734,7 +818,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-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-:rn:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -893,7 +977,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-21"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1f:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -979,7 +1063,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-22"
+      data-ouia-component-id="OUIA-Generated-Tabs-:r1h:"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1122,7 +1206,7 @@ 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-38"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2j:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="tabListLabelTabs"
@@ -1212,7 +1296,7 @@ exports[`should render tablist aria-labelledby when provided 1`] = `
   </h2>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-39"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2l:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="tabListLabelledByTabs"
@@ -1293,96 +1377,11 @@ exports[`should render tablist aria-labelledby when provided 1`] = `
 </DocumentFragment>
 `;
 
-
-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-40"
-    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 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-23"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1j:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1500,7 +1499,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-30"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r21:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1617,7 +1616,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-24"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1l:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1744,7 +1743,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-14"
+    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;"
@@ -1902,7 +1901,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-15"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r11:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

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';
 
@@ -91,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,
@@ -118,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>) => {
@@ -206,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>
     );
   }
 

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

@@ -8,7 +8,7 @@ exports[`TextInput default read only text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="default read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r9:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -27,7 +27,7 @@ exports[`TextInput disabled text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="disabled text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       disabled=""
@@ -46,7 +46,7 @@ exports[`TextInput invalid text input 1`] = `
     <input
       aria-invalid="true"
       aria-label="invalid text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:rd:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
@@ -97,7 +97,7 @@ exports[`TextInput plain read only text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="plain read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:rb:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -116,7 +116,7 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
     <input
       aria-invalid="false"
       aria-label="read only text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       readonly=""
@@ -135,7 +135,7 @@ exports[`TextInput simple text input 1`] = `
     <input
       aria-invalid="false"
       aria-label="simple text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"
@@ -153,7 +153,7 @@ exports[`TextInput validated text input error 1`] = `
     <input
       aria-invalid="true"
       aria-label="validated text input"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+      data-ouia-component-id="OUIA-Generated-TextInputBase-:rj:"
       data-ouia-component-type="PF6/TextInput"
       data-ouia-safe="true"
       type="text"