@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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

@@ -11,7 +11,7 @@ exports[`Disclosure ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-6"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rh:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -29,12 +29,24 @@ exports[`Disclosure ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
               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"
-              />
+              <svg
+                class="pf-v6-icon-default"
+                viewBox="0 0 256 512"
+              >
+                <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"
+                />
+              </svg>
+              <svg
+                class="pf-v6-icon-rh-ui"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -64,7 +76,7 @@ exports[`ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -82,12 +94,24 @@ exports[`ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
               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"
-              />
+              <svg
+                class="pf-v6-icon-default"
+                viewBox="0 0 256 512"
+              >
+                <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"
+                />
+              </svg>
+              <svg
+                class="pf-v6-icon-rh-ui"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -118,7 +142,7 @@ exports[`Renders ExpandableSection expanded 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-2"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -136,12 +160,24 @@ exports[`Renders ExpandableSection expanded 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
               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"
-              />
+              <svg
+                class="pf-v6-icon-default"
+                viewBox="0 0 256 512"
+              >
+                <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"
+                />
+              </svg>
+              <svg
+                class="pf-v6-icon-rh-ui"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -171,7 +207,7 @@ exports[`Renders ExpandableSection indented 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-7"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -189,12 +225,24 @@ exports[`Renders ExpandableSection indented 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
               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"
-              />
+              <svg
+                class="pf-v6-icon-default"
+                viewBox="0 0 256 512"
+              >
+                <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"
+                />
+              </svg>
+              <svg
+                class="pf-v6-icon-rh-ui"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                />
+              </svg>
             </svg>
           </span>
         </span>
@@ -223,7 +271,7 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-5"
+        data-ouia-component-id="OUIA-Generated-Button-link-:re:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -241,12 +289,24 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
               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"
-              />
+              <svg
+                class="pf-v6-icon-default"
+                viewBox="0 0 256 512"
+              >
+                <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"
+                />
+              </svg>
+              <svg
+                class="pf-v6-icon-rh-ui"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                />
+              </svg>
             </svg>
           </span>
         </span>

package/src/components/FileUpload/FileUpload.tsx

@@ -4,11 +4,10 @@ import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { DropEvent } from '../../helpers/typeUtils';
 import { fromEvent } from 'file-selector';
 
-export interface FileUploadProps
-  extends Omit<
-    FileUploadFieldProps,
-    'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
-  > {
+export interface FileUploadProps extends Omit<
+  FileUploadFieldProps,
+  'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
+> {
   /** Flag to allow editing of a text file's contents after it is selected from disk. */
   allowEditingUploadedText?: boolean;
   /** Aria-label for the text area. */

package/src/components/FileUpload/FileUploadField.tsx

@@ -172,29 +172,31 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
           </InputGroupItem>
         </InputGroup>
       </div>
-      <div className={styles.fileUploadFileDetails}>
-        {!hideDefaultPreview && type === fileReaderType.text && (
-          <TextArea
-            readOnly={isReadOnly || (!!filename && !allowEditingUploadedText)}
-            disabled={isDisabled}
-            isRequired={isRequired}
-            resizeOrientation={TextAreResizeOrientation.vertical}
-            validated={validated}
-            id={id}
-            aria-label={ariaLabel}
-            value={value as string}
-            onChange={onTextAreaChange}
-            onClick={onTextAreaClick}
-            onBlur={onTextAreaBlur}
-            placeholder={textAreaPlaceholder}
-          />
-        )}
-        {isLoading && (
-          <div className={styles.fileUploadFileDetailsSpinner}>
-            <Spinner size={spinnerSize.lg} aria-valuetext={spinnerAriaValueText} />
-          </div>
-        )}
-      </div>
+      {(isLoading || (!hideDefaultPreview && type === fileReaderType.text)) && (
+        <div className={styles.fileUploadFileDetails}>
+          {!hideDefaultPreview && type === fileReaderType.text && (
+            <TextArea
+              readOnly={isReadOnly || (!!filename && !allowEditingUploadedText)}
+              disabled={isDisabled}
+              isRequired={isRequired}
+              resizeOrientation={TextAreResizeOrientation.vertical}
+              validated={validated}
+              id={id}
+              aria-label={ariaLabel}
+              value={value as string}
+              onChange={onTextAreaChange}
+              onClick={onTextAreaClick}
+              onBlur={onTextAreaBlur}
+              placeholder={textAreaPlaceholder}
+            />
+          )}
+          {isLoading && (
+            <div className={styles.fileUploadFileDetailsSpinner}>
+              <Spinner size={spinnerSize.lg} aria-valuetext={spinnerAriaValueText} />
+            </div>
+          )}
+        </div>
+      )}
       {children}
     </div>
   );

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

@@ -21,7 +21,7 @@ exports[`simple fileupload 1`] = `
             <input
               aria-invalid="false"
               aria-label="Drag a file here or browse to upload"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="simple-text-file-filename"
@@ -38,7 +38,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -55,7 +55,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`simple fileuploadfield 1`] = `
             <input
               aria-invalid="false"
               aria-label="Do something custom with this!"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="custom-file-upload-filename"
@@ -37,7 +37,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -54,7 +54,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"

package/src/components/Form/FormGroup.tsx

@@ -2,7 +2,7 @@ import { Fragment, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Anything that can be rendered as FormGroup content. */
@@ -47,6 +47,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   role,
   ...props
 }: FormGroupProps) => {
+  const randomId = useSSRSafeId();
   const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
@@ -56,8 +57,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
         <span className={css(styles.formLabelText)}>{label}</span>
         {isRequired && (
           <span className={css(styles.formLabelRequired)} aria-hidden="true">
-            {' '}
-            {ASTERISK}
+            &nbsp;{ASTERISK}
           </span>
         )}
       </LabelComponent>
@@ -67,44 +67,36 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   );
 
   return (
-    <GenerateId>
-      {(randomId) => (
+    <div
+      className={css(styles.formGroup, className)}
+      {...(role && { role })}
+      {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
+      {...props}
+    >
+      {label && (
         <div
-          className={css(styles.formGroup, className)}
-          {...(role && { role })}
-          {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
-          {...props}
+          className={css(
+            styles.formGroupLabel,
+            labelInfo && styles.modifiers.info,
+            hasNoPaddingTop && styles.modifiers.noPaddingTop
+          )}
+          {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
         >
-          {label && (
-            <div
-              className={css(
-                styles.formGroupLabel,
-                labelInfo && styles.modifiers.info,
-                hasNoPaddingTop && styles.modifiers.noPaddingTop
-              )}
-              {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
-            >
-              {labelInfo && (
-                <Fragment>
-                  <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
-                  <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
-                </Fragment>
-              )}
-              {!labelInfo && labelContent}
-            </div>
+          {labelInfo && (
+            <Fragment>
+              <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
+              <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
+            </Fragment>
           )}
-          <div
-            className={css(
-              styles.formGroupControl,
-              isInline && styles.modifiers.inline,
-              isStack && styles.modifiers.stack
-            )}
-          >
-            {children}
-          </div>
+          {!labelInfo && labelContent}
         </div>
       )}
-    </GenerateId>
+      <div
+        className={css(styles.formGroupControl, isInline && styles.modifiers.inline, isStack && styles.modifiers.stack)}
+      >
+        {children}
+      </div>
+    </div>
   );
 };
 FormGroup.displayName = 'FormGroup';

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
-import { GenerateId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
@@ -37,6 +37,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   hasAnimations: hasAnimationsProp,
   ...props
 }: InternalFormFieldGroupProps) => {
+  const toggleId = useSSRSafeId('form-field-group-toggle');
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const headerTitleText = header ? header.props.titleText : null;
   if (isExpandable && !toggleAriaLabel && !headerTitleText) {
@@ -59,17 +60,13 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
       {...props}
     >
       {isExpandable && (
-        <GenerateId prefix="form-field-group-toggle">
-          {(id) => (
-            <FormFieldGroupToggle
-              onToggle={onToggle}
-              isExpanded={isExpanded}
-              aria-label={toggleAriaLabel}
-              toggleId={id}
-              {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id} ${id}` })}
-            />
-          )}
-        </GenerateId>
+        <FormFieldGroupToggle
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          aria-label={toggleAriaLabel}
+          toggleId={toggleId}
+          {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id} ${toggleId}` })}
+        />
       )}
       {header && header}
       {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -16,12 +16,12 @@ exports[`Check expandable form field group example against snapshot 1`] = `
         <button
           aria-expanded="true"
           aria-label="toggle"
-          aria-labelledby="title-text-id2 generated-id"
+          aria-labelledby="title-text-id2 form-field-group-toggle:r2:"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="generated-id"
+          id="form-field-group-toggle:r2:"
           type="button"
         >
           <span
@@ -36,12 +36,24 @@ exports[`Check expandable form field group example against snapshot 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 256 512"
                 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"
-                />
+                <svg
+                  class="pf-v6-icon-default"
+                  viewBox="0 0 256 512"
+                >
+                  <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"
+                  />
+                </svg>
+                <svg
+                  class="pf-v6-icon-rh-ui"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                  />
+                </svg>
               </svg>
             </span>
           </span>
@@ -75,7 +87,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          data-ouia-component-id="OUIA-Generated-Button-primary-:r4:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -123,7 +135,7 @@ exports[`Check form field group example against snapshot 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-1"
+          data-ouia-component-id="OUIA-Generated-Button-primary-:r1:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"

package/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap

@@ -122,7 +122,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
           aria-hidden="true"
           class="pf-v6-c-form__label-required"
         >
-           *
+           *
         </span>
       </label>
         

package/src/components/FormSelect/FormSelect.tsx

@@ -4,12 +4,12 @@ import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { ValidatedOptions } from '../../helpers/constants';
 import { FormControlIcon } from '../FormControl/FormControlIcon';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface FormSelectProps
-  extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>, OUIAProps {
   /** content rendered inside the FormSelect */
   children: React.ReactNode;
   /** additional classes added to the FormSelect control */
@@ -39,7 +39,7 @@ export interface FormSelectProps
   ouiaSafe?: boolean;
 }
 
-class FormSelect extends Component<FormSelectProps, { ouiaStateId: string }> {
+class FormSelect extends Component<FormSelectProps> {
   static displayName = 'FormSelect';
   constructor(props: FormSelectProps) {
     super(props);
@@ -47,9 +47,6 @@ class FormSelect extends Component<FormSelectProps, { ouiaStateId: string }> {
       // eslint-disable-next-line no-console
       console.error('FormSelect requires either an id or aria-label to be specified');
     }
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(FormSelect.displayName, props.validated)
-    };
   }
 
   static defaultProps: PickOptional<FormSelectProps> = {
@@ -76,33 +73,37 @@ class FormSelect extends Component<FormSelectProps, { ouiaStateId: string }> {
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <span
-        className={css(
-          styles.formControl,
-          isDisabled && styles.modifiers.disabled,
-          isSelectedPlaceholder && styles.modifiers.placeholder,
-          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
-          className
-        )}
-      >
-        <select
-          {...props}
-          aria-invalid={validated === ValidatedOptions.error}
-          {...getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-          onChange={this.handleChange}
-          disabled={isDisabled}
-          required={isRequired}
-          value={value}
-        >
-          {children}
-        </select>
-        <span className={css(styles.formControlUtilities)}>
-          {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
-          <span className={css(styles.formControlToggleIcon)}>
-            <CaretDownIcon />
+      <SSRSafeIds prefix="pf-" ouiaComponentType={FormSelect.displayName}>
+        {(_, generatedOuiaId) => (
+          <span
+            className={css(
+              styles.formControl,
+              isDisabled && styles.modifiers.disabled,
+              isSelectedPlaceholder && styles.modifiers.placeholder,
+              hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
+              className
+            )}
+          >
+            <select
+              {...props}
+              aria-invalid={validated === ValidatedOptions.error}
+              {...getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+              onChange={this.handleChange}
+              disabled={isDisabled}
+              required={isRequired}
+              value={value}
+            >
+              {children}
+            </select>
+            <span className={css(styles.formControlUtilities)}>
+              {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
+              <span className={css(styles.formControlToggleIcon)}>
+                <CaretDownIcon />
+              </span>
+            </span>
           </span>
-        </span>
-      </span>
+        )}
+      </SSRSafeIds>
     );
   }
 }