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

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -2,11 +2,11 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface MenuToggleCheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps {
   /** Additional classes added to the MenuToggleCheckbox */
   className?: string;
   /** Flag to show if the checkbox selection is valid or invalid */
@@ -33,7 +33,7 @@ export interface MenuToggleCheckboxProps
   ouiaSafe?: boolean;
 }
 
-class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
+class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps> {
   static displayName = 'MenuToggleCheckbox';
   static defaultProps: PickOptional<MenuToggleCheckboxProps> = {
     isValid: true,
@@ -41,13 +41,6 @@ class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps, { ouiaStateI
     onChange: () => undefined as any
   };
 
-  constructor(props: MenuToggleCheckboxProps) {
-    super(props);
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(MenuToggleCheckbox.displayName)
-    };
-  }
-
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     this.props.onChange((event.target as HTMLInputElement).checked, event);
   };
@@ -84,27 +77,31 @@ class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps, { ouiaStateI
       </span>
     );
     return (
-      <label className={css(styles.check, !children && styles.modifiers.standalone, className)}>
-        <input
-          className={css(styles.checkInput)}
-          {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
-          name={id}
-          type="checkbox"
-          ref={(elem) => {
-            elem && (elem.indeterminate = isChecked === null);
-          }}
-          aria-invalid={!isValid}
-          disabled={isDisabled}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}
-          {...getOUIAProps(
-            MenuToggleCheckbox.displayName,
-            ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,
-            ouiaSafe
-          )}
-          {...props}
-        />
-        {text}
-      </label>
+      <SSRSafeIds prefix="pf-" ouiaComponentType={MenuToggleCheckbox.displayName}>
+        {(_, generatedOuiaId) => (
+          <label className={css(styles.check, !children && styles.modifiers.standalone, className)}>
+            <input
+              className={css(styles.checkInput)}
+              {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
+              name={id}
+              type="checkbox"
+              ref={(elem) => {
+                elem && (elem.indeterminate = isChecked === null);
+              }}
+              aria-invalid={!isValid}
+              disabled={isDisabled}
+              {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}
+              {...getOUIAProps(
+                MenuToggleCheckbox.displayName,
+                ouiaId !== undefined ? ouiaId : generatedOuiaId,
+                ouiaSafe
+              )}
+              {...props}
+            />
+            {text}
+          </label>
+        )}
+      </SSRSafeIds>
     );
   }
 }

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

@@ -5,7 +5,7 @@ exports[`Old Snapshot tests - remove when refactoring passes additional classes
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle test-class"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r3:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -27,12 +27,24 @@ exports[`Old Snapshot tests - remove when refactoring passes additional classes
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -45,7 +57,7 @@ exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] =
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r1:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -67,12 +79,24 @@ exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] =
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -85,7 +109,7 @@ exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-6"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:rh:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -116,12 +140,24 @@ exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -134,7 +170,7 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-5"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:rf:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -148,12 +184,24 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
+          />
+        </svg>
       </svg>
     </span>
     <span
@@ -173,12 +221,24 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -191,7 +251,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-4"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r7:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     disabled=""
@@ -214,12 +274,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -232,7 +304,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = `
   <button
     aria-expanded="true"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-3"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r5:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -254,12 +326,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -272,7 +356,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-plain-1"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:rb:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -286,12 +370,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 192 512"
         width="1em"
       >
-        <path
-          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 192 512"
+        >
+          <path
+            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M16 9c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4Zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2Zm0 9c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4Zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2Zm0 5c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4Zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2Z"
+          />
+        </svg>
       </svg>
     </span>
   </button>
@@ -303,7 +399,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-primary-1"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-primary-:r9:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -325,12 +421,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -343,7 +451,7 @@ exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rd:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -365,12 +473,24 @@ exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>

package/src/components/Modal/Modal.tsx

@@ -4,7 +4,8 @@ import { canUseDOM, KeyTypes, PickOptional } from '../../helpers';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { ModalContent } from './ModalContent';
-import { OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** The parent container to append the modal to. Defaults to "document.body". */
@@ -62,7 +63,7 @@ export enum ModalVariant {
 }
 
 interface ModalState {
-  ouiaStateId: string;
+  mounted: boolean;
 }
 
 class Modal extends Component<ModalProps, ModalState> {
@@ -87,7 +88,7 @@ class Modal extends Component<ModalProps, ModalState> {
     this.backdropId = `pf-modal-part-${backdropId}`;
 
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
+      mounted: false
     };
   }
 
@@ -119,6 +120,7 @@ class Modal extends Component<ModalProps, ModalState> {
   isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
 
   componentDidMount() {
+    this.setState({ mounted: true });
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     target.addEventListener('keydown', this.handleEscKeyClick, false);
@@ -166,26 +168,32 @@ class Modal extends Component<ModalProps, ModalState> {
       ...props
     } = this.props;
 
-    if (!canUseDOM || !this.getElement(appendTo)) {
+    if (!this.state.mounted || !canUseDOM || !this.getElement(appendTo)) {
       return null;
     }
 
-    return ReactDOM.createPortal(
-      <ModalContent
-        boxId={this.boxId}
-        backdropId={this.backdropId}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedby}
-        aria-labelledby={ariaLabelledby}
-        ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
-        ouiaSafe={ouiaSafe}
-        position={position}
-        elementToFocus={elementToFocus}
-        backdropClassName={props.backdropClassName}
-        {...props}
-      />,
-      this.getElement(appendTo)
-    ) as React.ReactElement<any>;
+    return (
+      <SSRSafeIds prefix="pf-" ouiaComponentType={`Modal${this.props.variant ? `-${this.props.variant}` : ''}`}>
+        {(_, generatedOuiaId) =>
+          ReactDOM.createPortal(
+            <ModalContent
+              boxId={this.boxId}
+              backdropId={this.backdropId}
+              aria-label={ariaLabel}
+              aria-describedby={ariaDescribedby}
+              aria-labelledby={ariaLabelledby}
+              ouiaId={ouiaId !== undefined ? ouiaId : generatedOuiaId}
+              ouiaSafe={ouiaSafe}
+              position={position}
+              elementToFocus={elementToFocus}
+              backdropClassName={props.backdropClassName}
+              {...props}
+            />,
+            this.getElement(appendTo)
+          ) as React.ReactElement<any>
+        }
+      </SSRSafeIds>
+    );
   }
 }