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

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';
 
@@ -66,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
@@ -87,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"
@@ -135,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/FormSelect/FormSelect.tsx

@@ -4,7 +4,8 @@ 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
@@ -38,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);
@@ -46,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> = {
@@ -75,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>
     );
   }
 }

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

@@ -8,7 +8,7 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
     <select
       aria-invalid="false"
       aria-label="disabled FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r5:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
       disabled=""
@@ -65,7 +65,7 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
     <select
       aria-invalid="false"
       aria-label="label"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r7:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -121,7 +121,7 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
     <select
       aria-invalid="false"
       aria-label="label"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r9:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
       id="id"
@@ -177,7 +177,7 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
   >
     <select
       aria-invalid="false"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rb:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -233,7 +233,7 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="grouped FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r3:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -335,7 +335,7 @@ exports[`FormSelect Simple FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="simple FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r1:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -429,7 +429,7 @@ exports[`FormSelect invalid FormSelect input 1`] = `
     <select
       aria-invalid="true"
       aria-label="invalid FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rd:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -514,7 +514,7 @@ exports[`FormSelect validated success FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rf:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -599,7 +599,7 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rh:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >

package/src/components/JumpLinks/JumpLinks.tsx

@@ -7,7 +7,8 @@ import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links_
 import { Button } from '../Button';
 import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
 import { JumpLinksList } from './JumpLinksList';
-import { canUseDOM, formatBreakpointMods, getUniqueId } from '../../helpers/util';
+import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -99,6 +100,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   labelId,
   ...props
 }: JumpLinksProps) => {
+  const generatedId = useSSRSafeId();
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
   const [scrollItems, setScrollItems] = useState(hasScrollSpy ? getScrollItems(children, []) : []);
   const [activeIndex, setActiveIndex] = useState(activeIndexProp);
@@ -244,7 +246,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           return child;
         });
 
-  const id = labelId ?? getUniqueId();
+  const id = labelId ?? generatedId;
   const hasAriaLabelledBy = expandable || (label && alwaysShowLabel);
   const computedAriaLabel = hasAriaLabelledBy ? null : ariaLabel;
   const computedAriaLabelledBy = hasAriaLabelledBy ? id : null;

package/src/components/JumpLinks/__tests__/JumpLinks.test.tsx

@@ -2,9 +2,6 @@ import { render, screen } from '@testing-library/react';
 import { JumpLinks } from '../JumpLinks';
 import { JumpLinksItem } from '../JumpLinksItem';
 import { JumpLinksList } from '../JumpLinksList';
-import * as utils from '../../../helpers/util';
-
-jest.spyOn(utils, 'getUniqueId').mockReturnValue('unique_id_mock');
 
 test('simple jumplinks', () => {
   const { asFragment } = render(
@@ -140,7 +137,8 @@ test('uses aria-labelledby over aria-label when expandable is passed in', () =>
 test('random id is used with aria-labelledby by default in expandable case', () => {
   render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
   const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
-  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation.getAttribute('aria-labelledby')).toBeTruthy();
 });
 
 test('random id is used with aria-labelledby by default in label case', () => {
@@ -150,7 +148,8 @@ test('random id is used with aria-labelledby by default in label case', () => {
     </JumpLinks>
   );
   const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
-  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation.getAttribute('aria-labelledby')).toBeTruthy();
 });
 
 test('custom labelId is used with aria-labelledby when it is passed in in expandable case', () => {

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

@@ -3,7 +3,7 @@
 exports[`expandable vertical with subsection 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:rg:"
     class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
   >
     <div
@@ -18,10 +18,10 @@ exports[`expandable vertical with subsection 1`] = `
           <button
             aria-expanded="false"
             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-:rh:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
-            id="unique_id_mock"
+            id="pf-:rg:"
             type="button"
           >
             <span
@@ -66,7 +66,7 @@ exports[`expandable vertical with subsection 1`] = `
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:rg:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -78,7 +78,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-13"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ri:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -103,7 +103,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-14"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rj:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -132,7 +132,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-15"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -157,7 +157,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-16"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rl:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -182,7 +182,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-17"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rm:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -209,7 +209,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-18"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rn:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -234,7 +234,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-19"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ro:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -280,7 +280,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-4"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -306,7 +306,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               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-:r6:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -331,7 +331,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               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-:r7:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -357,7 +357,7 @@ exports[`jumplinks centered 1`] = `
 exports[`jumplinks with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:r8:"
     class="pf-v6-c-jump-links pf-m-center"
   >
     <div
@@ -368,13 +368,13 @@ exports[`jumplinks with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="unique_id_mock"
+          id="pf-:r8:"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:r8:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -386,7 +386,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               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-:r9:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -412,7 +412,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-8"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ra:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -437,7 +437,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-9"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rb:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -483,7 +483,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               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-:r1:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -509,7 +509,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               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-:r2:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -534,7 +534,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-3"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r3:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -560,7 +560,7 @@ exports[`simple jumplinks 1`] = `
 exports[`vertical with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:rc:"
     class="pf-v6-c-jump-links pf-m-vertical"
   >
     <div
@@ -571,13 +571,13 @@ exports[`vertical with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="unique_id_mock"
+          id="pf-:rc:"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:rc:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -589,7 +589,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-10"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rd:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -615,7 +615,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-11"
+              data-ouia-component-id="OUIA-Generated-Button-link-:re:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -640,7 +640,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-12"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rf:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"

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

@@ -21,7 +21,7 @@ exports[`Label editable label 1`] = `
       <button
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -170,7 +170,7 @@ exports[`Label label with close button 1`] = `
       <button
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        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"
         type="button"
@@ -230,7 +230,7 @@ exports[`Label label with close button and outline variant 1`] = `
       <button
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"