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

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/PopoverCloseButton.tsx

@@ -1,7 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { Button } from '../Button';
-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 PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps> = ({
   onClose = () => undefined as void,
@@ -14,7 +14,7 @@ export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps
       aria-label
       {...props}
       style={{ pointerEvents: 'auto' }}
-      icon={<TimesIcon />}
+      icon={<RhMicronsCloseIcon />}
     />
   </div>
 );

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,11 +23,11 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
+          viewBox="0 0 20 20"
           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"
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
           />
         </svg>
       </span>

package/src/components/Popover/examples/Popover.md

@@ -6,11 +6,11 @@ propComponents: ['Popover']
 ---
 
 import { useRef, useState } from 'react';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 ## Examples

package/src/components/Popover/examples/PopoverAlert.tsx

@@ -1,20 +1,20 @@
 import { useState } from 'react';
 import { Popover, Button } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export const AlertPopover: React.FunctionComponent = () => {
   const [alertSeverityVariant, setAlertSeverityVariant] = useState('default');
 
   const alertIcons = {
-    custom: <BellIcon />,
-    info: <InfoCircleIcon />,
-    success: <CheckCircleIcon />,
-    warning: <ExclamationTriangleIcon />,
-    danger: <ExclamationCircleIcon />
+    custom: <RhUiNotificationFillIcon />,
+    info: <RhUiInformationFillIcon />,
+    success: <RhUiCheckCircleFillIcon />,
+    warning: <RhUiWarningFillIcon />,
+    danger: <RhUiErrorFillIcon />
   };
 
   return (

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/ProgressContainer.tsx

@@ -2,9 +2,9 @@ import { Fragment, useState, useRef, useEffect } from 'react';
 import progressStyle from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import { AriaProps, ProgressBar } from './ProgressBar';
 import { ProgressHelperText } from './ProgressHelperText';
 
@@ -63,9 +63,9 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
 }
 
 const variantToIcon = {
-  danger: ExclamationCircleIcon,
-  success: CheckCircleIcon,
-  warning: ExclamationTriangleIcon
+  danger: RhUiErrorFillIcon,
+  success: RhUiCheckCircleFillIcon,
+  warning: RhUiWarningFillIcon
 };
 
 export const ProgressContainer: React.FunctionComponent<ProgressContainerProps> = ({

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

@@ -27,11 +27,11 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
+        viewBox="0 0 32 32"
         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"
+          d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
         />
       </svg>
     </span>

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

@@ -294,11 +294,11 @@ exports[`Progress variant danger 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 32 32"
           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"
+            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
           />
         </svg>
       </span>
@@ -347,11 +347,11 @@ exports[`Progress variant success 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 32 32"
           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"
+            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
           />
         </svg>
       </span>
@@ -400,11 +400,11 @@ exports[`Progress variant warning 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 576 512"
+          viewBox="0 0 32 32"
           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"
+            d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
           />
         </svg>
       </span>

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -1,10 +1,10 @@
 import { useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 import { css } from '@patternfly/react-styles';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export enum ProgressStepVariant {
   default = 'default',
@@ -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. */
@@ -41,10 +43,10 @@ export interface ProgressStepProps
 const variantIcons = {
   default: undefined as any,
   pending: undefined as any,
-  success: <CheckCircleIcon />,
+  success: <RhUiCheckCircleFillIcon />,
   info: <ResourcesFullIcon />,
-  warning: <ExclamationTriangleIcon />,
-  danger: <ExclamationCircleIcon />
+  warning: <RhUiWarningFillIcon />,
+  danger: <RhUiErrorFillIcon />
 };
 
 const variantStyle = {

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/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -3,10 +3,10 @@ import { ProgressStep, ProgressStepVariant } from '../ProgressStep';
 import { capitalize } from '../../../helpers';
 import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
-jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Success icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon', () => () => 'Success icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/resources-full-icon', () => () => 'Info icon mock');
-jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon', () => () => 'Warning icon mock');
-jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon', () => () => 'Danger icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon', () => () => 'Warning icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon', () => () => 'Danger icon mock');
 
 test('Renders without children', () => {
   render(

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>
     );
   }
 }