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

package/src/components/Popover/Popover.tsx

@@ -13,7 +13,7 @@ import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidt
 import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
 import { FocusTrap } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export enum PopoverPosition {
   auto = 'auto',
@@ -276,7 +276,8 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
 }: PopoverProps) => {
   // could make this a prop in the future (true | false | 'toggle')
   // const hideOnClick = true;
-  const uniqueId = id || getUniqueId();
+  const generatedId = useSSRSafeId();
+  const uniqueId = id || generatedId;
   const triggerManually = isVisible !== null;
   const [visible, setVisible] = useState(false);
   const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
     <button
       aria-label="string"
       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-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       style="pointer-events: auto;"
@@ -23,12 +23,24 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
           width="1em"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>

package/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { ProgressContainer, ProgressMeasureLocation } from './ProgressContainer';
 import { AriaProps } from './ProgressBar';
-import { getUniqueId } from '../../helpers/util';
+import { GenerateId } from '../../helpers';
 
 export enum ProgressSize {
   sm = 'sm',
@@ -73,14 +73,11 @@ class Progress extends Component<ProgressProps> {
     'aria-describedby': null as string
   };
 
-  id = this.props.id || getUniqueId();
-
   render() {
     const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      id,
+      id: idProp,
       size,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
+
       className,
       value,
       title,
@@ -100,28 +97,6 @@ class Progress extends Component<ProgressProps> {
       ...props
     } = this.props;
 
-    const progressBarAriaProps: AriaProps = {
-      'aria-valuemin': min,
-      'aria-valuenow': value,
-      'aria-valuemax': max
-    };
-
-    if (title || ariaLabelledBy) {
-      progressBarAriaProps['aria-labelledby'] = title ? `${this.id}-description` : ariaLabelledBy;
-    }
-
-    if (ariaLabel) {
-      progressBarAriaProps['aria-label'] = ariaLabel;
-    }
-
-    if (ariaDescribedBy) {
-      progressBarAriaProps['aria-describedby'] = ariaDescribedBy;
-    }
-
-    if (valueText) {
-      progressBarAriaProps['aria-valuetext'] = valueText;
-    }
-
     if (!title && !ariaLabelledBy && !ariaLabel) {
       /* eslint-disable no-console */
       console.warn(
@@ -129,34 +104,67 @@ class Progress extends Component<ProgressProps> {
       );
     }
 
-    const scaledValue = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100))) || 0;
     return (
-      <div
-        {...props}
-        className={css(
-          styles.progress,
-          styles.modifiers[variant],
-          ['inside', 'outside'].includes(measureLocation) && styles.modifiers[measureLocation as 'inside' | 'outside'],
-          measureLocation === 'inside' ? styles.modifiers[ProgressSize.lg] : styles.modifiers[size as 'sm' | 'lg'],
-          !title && styles.modifiers.singleline,
-          className
-        )}
-        id={this.id}
-      >
-        <ProgressContainer
-          parentId={this.id}
-          value={scaledValue}
-          title={title}
-          label={label}
-          variant={variant}
-          measureLocation={measureLocation}
-          progressBarAriaProps={progressBarAriaProps}
-          isTitleTruncated={isTitleTruncated}
-          tooltipPosition={tooltipPosition}
-          helperText={helperText}
-          hideStatusIcon={hideStatusIcon}
-        />
-      </div>
+      <GenerateId prefix="pf-progress-">
+        {(generatedId) => {
+          const id = idProp || generatedId;
+
+          const progressBarAriaProps: AriaProps = {
+            'aria-valuemin': min,
+            'aria-valuenow': value,
+            'aria-valuemax': max
+          };
+
+          if (title || ariaLabelledBy) {
+            progressBarAriaProps['aria-labelledby'] = title ? `${id}-description` : ariaLabelledBy;
+          }
+
+          if (ariaLabel) {
+            progressBarAriaProps['aria-label'] = ariaLabel;
+          }
+
+          if (ariaDescribedBy) {
+            progressBarAriaProps['aria-describedby'] = ariaDescribedBy;
+          }
+
+          if (valueText) {
+            progressBarAriaProps['aria-valuetext'] = valueText;
+          }
+
+          const scaledValue = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100))) || 0;
+          return (
+            <div
+              {...props}
+              className={css(
+                styles.progress,
+                styles.modifiers[variant],
+                ['inside', 'outside'].includes(measureLocation) &&
+                  styles.modifiers[measureLocation as 'inside' | 'outside'],
+                measureLocation === 'inside'
+                  ? styles.modifiers[ProgressSize.lg]
+                  : styles.modifiers[size as 'sm' | 'lg'],
+                !title && styles.modifiers.singleline,
+                className
+              )}
+              id={id}
+            >
+              <ProgressContainer
+                parentId={id}
+                value={scaledValue}
+                title={title}
+                label={label}
+                variant={variant}
+                measureLocation={measureLocation}
+                progressBarAriaProps={progressBarAriaProps}
+                isTitleTruncated={isTitleTruncated}
+                tooltipPosition={tooltipPosition}
+                helperText={helperText}
+                hideStatusIcon={hideStatusIcon}
+              />
+            </div>
+          );
+        }}
+      </GenerateId>
     );
   }
 }

package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap

@@ -27,12 +27,24 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M14.75 16V9a1.25 1.25 0 0 1 2.5 0v7a1.25 1.25 0 0 1-2.5 0ZM31 16c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Zm-13 4.261a1.75 1.75 0 1 0 .001 3.501A1.75 1.75 0 0 0 16 20.261Z"
+          />
+        </svg>
       </svg>
     </span>
   </div>

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

@@ -294,12 +294,24 @@ exports[`Progress variant danger 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M14.75 16V9a1.25 1.25 0 0 1 2.5 0v7a1.25 1.25 0 0 1-2.5 0ZM31 16c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Zm-13 4.261a1.75 1.75 0 1 0 .001 3.501A1.75 1.75 0 0 0 16 20.261Z"
+            />
+          </svg>
         </svg>
       </span>
     </div>
@@ -347,12 +359,24 @@ exports[`Progress variant success 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm7.707-17.707a.999.999 0 0 1 0 1.414l-8.646 8.646c-.292.292-.676.438-1.061.438s-.768-.146-1.061-.438l-4.646-4.646a.999.999 0 1 1 1.414-1.414L14 19.586l8.293-8.293a.999.999 0 0 1 1.414 0Z"
+            />
+          </svg>
         </svg>
       </span>
     </div>
@@ -400,12 +424,24 @@ exports[`Progress variant warning 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 576 512"
           width="1em"
         >
-          <path
-            d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 576 512"
+          >
+            <path
+              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M31.461 27.771 17.3 2.301a1.499 1.499 0 0 0-2.623 0L.517 27.771c-.261.469-.255 1.025.018 1.489s.756.74 1.294.74h28.322c.537 0 1.021-.276 1.293-.74a1.49 1.49 0 0 0 .018-1.489ZM2.678 28l13.31-23.942L29.3 28H2.678ZM16 11.75c.69 0 1.25.56 1.25 1.25v5a1.25 1.25 0 0 1-2.5 0v-5c0-.69.56-1.25 1.25-1.25Zm1.75 12.261a1.75 1.75 0 1 1-3.501-.001 1.75 1.75 0 0 1 3.501.001Z"
+            />
+          </svg>
         </svg>
       </span>
     </div>

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -15,8 +15,10 @@ export enum ProgressStepVariant {
   warning = 'warning'
 }
 
-export interface ProgressStepProps
-  extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+export interface ProgressStepProps extends React.DetailedHTMLProps<
+  React.LiHTMLAttributes<HTMLLIElement>,
+  HTMLLIElement
+> {
   /** Content rendered inside the progress step. */
   children?: React.ReactNode;
   /** Additional classes applied to the progress step container. */

package/src/components/ProgressStepper/ProgressStepper.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 import { css } from '@patternfly/react-styles';
 
-export interface ProgressStepperProps
-  extends React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> {
+export interface ProgressStepperProps extends React.DetailedHTMLProps<
+  React.OlHTMLAttributes<HTMLOListElement>,
+  HTMLOListElement
+> {
   /** Content rendered inside the progress stepper. */
   children?: React.ReactNode;
   /** Additional classes applied to the progress stepper container. */

package/src/components/Radio/Radio.tsx

@@ -2,12 +2,11 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Radio/radio';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
-import { getUniqueId } from '../../helpers/util';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface RadioProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>, OUIAProps {
   /** Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if
    * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
    */
@@ -50,7 +49,7 @@ export interface RadioProps
   ouiaSafe?: boolean;
 }
 
-class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId: string }> {
+class Radio extends Component<RadioProps> {
   static displayName = 'Radio';
   static defaultProps: PickOptional<RadioProps> = {
     className: '',
@@ -65,10 +64,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       // eslint-disable-next-line no-console
       console.error('Radio:', 'Radio requires an aria-label to be specified');
     }
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(Radio.displayName),
-      descriptionId: getUniqueId('pf-radio-description')
-    };
   }
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -103,67 +98,72 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       console.error('Radio:', 'id is required to make input accessible');
     }
 
-    // Handle aria-describedby logic
-    let ariaDescribedByValue: string | undefined;
-    if (ariaDescribedBy !== undefined) {
-      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
-    } else if (description) {
-      ariaDescribedByValue = this.state.descriptionId;
-    }
+    return (
+      <SSRSafeIds prefix="pf-radio-description-" ouiaComponentType="Radio">
+        {(descriptionId, generatedOuiaId) => {
+          let ariaDescribedByValue: string | undefined;
+          if (ariaDescribedBy !== undefined) {
+            ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
+          } else if (description) {
+            ariaDescribedByValue = descriptionId;
+          }
 
-    const inputRendered = (
-      <input
-        {...props}
-        className={css(styles.radioInput, inputClassName)}
-        type="radio"
-        onChange={this.handleChange}
-        aria-invalid={!isValid}
-        aria-describedby={ariaDescribedByValue}
-        disabled={isDisabled}
-        checked={checked || isChecked}
-        {...(checked === undefined && { defaultChecked })}
-        {...(!label && { 'aria-label': ariaLabel })}
-        {...getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      />
-    );
+          const inputRendered = (
+            <input
+              {...props}
+              className={css(styles.radioInput, inputClassName)}
+              type="radio"
+              onChange={this.handleChange}
+              aria-invalid={!isValid}
+              aria-describedby={ariaDescribedByValue}
+              disabled={isDisabled}
+              checked={checked || isChecked}
+              {...(checked === undefined && { defaultChecked })}
+              {...(!label && { 'aria-label': ariaLabel })}
+              {...getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+            />
+          );
 
-    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+          const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
 
-    const Label = wrapWithLabel ? 'span' : 'label';
-    const labelRendered = label ? (
-      <Label
-        className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}
-        htmlFor={!wrapWithLabel ? props.id : undefined}
-      >
-        {label}
-      </Label>
-    ) : null;
+          const Label = wrapWithLabel ? 'span' : 'label';
+          const labelRendered = label ? (
+            <Label
+              className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}
+              htmlFor={!wrapWithLabel ? props.id : undefined}
+            >
+              {label}
+            </Label>
+          ) : null;
 
-    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+          const WrapperComponent = component ?? (wrapWithLabel ? 'label' : 'div');
 
-    return (
-      <Component
-        className={css(styles.radio, !label && styles.modifiers.standalone, className)}
-        htmlFor={wrapWithLabel ? props.id : undefined}
-      >
-        {labelPosition === 'start' ? (
-          <>
-            {labelRendered}
-            {inputRendered}
-          </>
-        ) : (
-          <>
-            {inputRendered}
-            {labelRendered}
-          </>
-        )}
-        {description && (
-          <span id={this.state.descriptionId} className={css(styles.radioDescription)}>
-            {description}
-          </span>
-        )}
-        {body && <span className={css(styles.radioBody)}>{body}</span>}
-      </Component>
+          return (
+            <WrapperComponent
+              className={css(styles.radio, !label && styles.modifiers.standalone, className)}
+              htmlFor={wrapWithLabel ? props.id : undefined}
+            >
+              {labelPosition === 'start' ? (
+                <>
+                  {labelRendered}
+                  {inputRendered}
+                </>
+              ) : (
+                <>
+                  {inputRendered}
+                  {labelRendered}
+                </>
+              )}
+              {description && (
+                <span id={descriptionId} className={css(styles.radioDescription)}>
+                  {description}
+                </span>
+              )}
+              {body && <span className={css(styles.radioBody)}>{body}</span>}
+            </WrapperComponent>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

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

@@ -10,7 +10,7 @@ exports[`Radio controlled 1`] = `
       aria-label="check"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-1"
+      data-ouia-component-id="OUIA-Generated-Radio-:r1:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -30,7 +30,7 @@ exports[`Radio isDisabled 1`] = `
       aria-invalid="false"
       aria-label="check"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-3"
+      data-ouia-component-id="OUIA-Generated-Radio-:r5:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       disabled=""
@@ -51,7 +51,7 @@ exports[`Radio isLabelWrapped 1`] = `
     <input
       aria-invalid="false"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-5"
+      data-ouia-component-id="OUIA-Generated-Radio-:r9:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -76,7 +76,7 @@ exports[`Radio label is function 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-7"
+      data-ouia-component-id="OUIA-Generated-Radio-:rd:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -104,7 +104,7 @@ exports[`Radio label is node 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-8"
+      data-ouia-component-id="OUIA-Generated-Radio-:rf:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -132,7 +132,7 @@ exports[`Radio label is string 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-6"
+      data-ouia-component-id="OUIA-Generated-Radio-:rb:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -163,7 +163,7 @@ exports[`Radio labelPosition is "start" 1`] = `
     <input
       aria-invalid="false"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-4"
+      data-ouia-component-id="OUIA-Generated-Radio-:r7:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -184,7 +184,7 @@ exports[`Radio passing HTML attribute 1`] = `
       aria-labelledby="labelId"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-10"
+      data-ouia-component-id="OUIA-Generated-Radio-:rj:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -210,7 +210,7 @@ exports[`Radio passing class 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-9"
+      data-ouia-component-id="OUIA-Generated-Radio-:rh:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -236,7 +236,7 @@ exports[`Radio uncontrolled 1`] = `
       aria-invalid="false"
       aria-label="check"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-2"
+      data-ouia-component-id="OUIA-Generated-Radio-:r3:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
-import { GenerateId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
@@ -67,6 +67,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   isSearchMenuOpen,
   onToggleAdvancedMenu
 }: AdvancedSearchMenuProps) => {
+  const hasWordsId = useSSRSafeId();
   const firstAttrRef = useRef(null);
   const [putFocusBackOnInput, setPutFocusBackOnInput] = useState(false);
 
@@ -182,18 +183,14 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
       }
     });
     formGroups.push(
-      <GenerateId key={'hasWords'}>
-        {(randomId) => (
-          <FormGroup label={hasWordsAttrLabel} fieldId={randomId}>
-            <TextInput
-              type="text"
-              id={randomId}
-              value={getValue('haswords')}
-              onChange={(evt, value) => handleValueChange('haswords', value, evt)}
-            />
-          </FormGroup>
-        )}
-      </GenerateId>
+      <FormGroup key="hasWords" label={hasWordsAttrLabel} fieldId={hasWordsId}>
+        <TextInput
+          type="text"
+          id={hasWordsId}
+          value={getValue('haswords')}
+          onChange={(evt, value) => handleValueChange('haswords', value, evt)}
+        />
+      </FormGroup>
     );
     return formGroups;
   };