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

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

@@ -19,7 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r8:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -36,7 +36,7 @@ exports[`Drawer expands from bottom 1`] = `
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -140,7 +140,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -209,11 +209,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="generated-id"
+        id="pf-drawer-panel-:ra:"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="generated-id"
+          aria-controls="pf-drawer-panel-:ra:"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -246,7 +246,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -316,7 +316,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="generated-id"
+        id="pf-drawer-panel-:r2:"
         inert=""
       />
     </div>
@@ -344,7 +344,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="generated-id"
+        id="pf-drawer-panel-:r5:"
         inert=""
       />
     </div>
@@ -371,7 +371,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r0:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -388,7 +388,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               <button
                 aria-label="Close drawer panel"
                 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-:r1:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -456,7 +456,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r6:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -473,7 +473,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -541,7 +541,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r3:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -558,7 +558,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

package/src/components/DualListSelector/DualListSelector.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { GenerateId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
 import { useHasAnimations } from '../../helpers';
 
@@ -33,24 +33,17 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
   ...props
 }: DualListSelectorProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
+  const randomId = useSSRSafeId();
 
   return (
     <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
-      <GenerateId>
-        {(randomId) => (
-          <div
-            className={css(
-              styles.dualListSelector,
-              hasAnimations && isTree && styles.modifiers.animateExpand,
-              className
-            )}
-            id={id || randomId}
-            {...props}
-          >
-            {children}
-          </div>
-        )}
-      </GenerateId>
+      <div
+        className={css(styles.dualListSelector, hasAnimations && isTree && styles.modifiers.animateExpand, className)}
+        id={id || randomId}
+        {...props}
+      >
+        {children}
+      </div>
     </DualListSelectorContext.Provider>
   );
 };

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
 import { Button, ButtonVariant } from '../Button';
 import { DualListSelectorListContext } from './DualListSelectorContext';
@@ -38,7 +38,7 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   orderIndex,
   children,
   className,
-  id = getUniqueId('dual-list-selector-list-item'),
+  id: idProp,
   isSelected,
   innerRef,
   isDraggable = false,
@@ -47,6 +47,8 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   draggableButtonAriaLabel = 'Reorder option',
   ...props
 }: DualListSelectorListItemProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-list-item');
+  const id = idProp ?? generatedId;
   const privateRef = useRef<HTMLLIElement>(null);
   const ref = innerRef || privateRef;
   const { setFocusedOption } = useContext(DualListSelectorListContext);

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId, handleArrows } from '../../helpers';
+import { handleArrows, useSSRSafeId } from '../../helpers';
 import { DualListSelectorList } from './DualListSelectorList';
 import { DualListSelectorContext, DualListSelectorListContext } from './DualListSelectorContext';
 
@@ -34,10 +34,12 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   options = [],
   selectedOptions = [],
   displayOption,
-  id = getUniqueId('dual-list-selector-list'),
+  id: idProp,
   isDisabled = false,
   ...props
 }: DualListSelectorListWrapperProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-list');
+  const id = idProp ?? generatedId;
   const [focusedOption, setFocusedOption] = useState('');
   const ref = useRef(null);
   const menuRef = innerRef || ref;

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorPaneContext } from './DualListSelectorContext';
 import { SearchInput } from '../SearchInput';
@@ -44,50 +44,54 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   searchInput,
   children,
   title = '',
-  id = getUniqueId('dual-list-selector-pane'),
+  id: idProp,
   isDisabled = false,
   listMinHeight,
   ...props
-}: DualListSelectorPaneProps) => (
-  <div
-    className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
-    {...props}
-  >
-    {title && (
-      <div className={css(styles.dualListSelectorHeader)}>
-        <div className={`${styles.dualListSelector}__title`}>
-          <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
+}: DualListSelectorPaneProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-pane');
+  const id = idProp ?? generatedId;
+  return (
+    <div
+      className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
+      {...props}
+    >
+      {title && (
+        <div className={css(styles.dualListSelectorHeader)}>
+          <div className={`${styles.dualListSelector}__title`}>
+            <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
+          </div>
+        </div>
+      )}
+      {(actions || searchInput) && (
+        <div className={css(styles.dualListSelectorTools)}>
+          {searchInput && (
+            <div className={css(styles.dualListSelectorToolsFilter)}>
+              {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
+            </div>
+          )}
+          {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
         </div>
-      </div>
-    )}
-    {(actions || searchInput) && (
-      <div className={css(styles.dualListSelectorTools)}>
-        {searchInput && (
-          <div className={css(styles.dualListSelectorToolsFilter)}>
-            {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
+      )}
+      {status && (
+        <div className={css(styles.dualListSelectorStatus)}>
+          <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
+            {status}
           </div>
-        )}
-        {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
-      </div>
-    )}
-    {status && (
-      <div className={css(styles.dualListSelectorStatus)}>
-        <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
-          {status}
         </div>
-      </div>
-    )}
-    <DualListSelectorPaneContext.Provider value={{ isChosen }}>
-      <DualListSelectorListWrapper
-        aria-labelledby={`${id}-status`}
-        id={`${id}-list`}
-        {...(listMinHeight && {
-          style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
-        })}
-      >
-        {children}
-      </DualListSelectorListWrapper>
-    </DualListSelectorPaneContext.Provider>
-  </div>
-);
+      )}
+      <DualListSelectorPaneContext.Provider value={{ isChosen }}>
+        <DualListSelectorListWrapper
+          aria-labelledby={`${id}-status`}
+          id={`${id}-list`}
+          {...(listMinHeight && {
+            style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+          })}
+        >
+          {children}
+        </DualListSelectorListWrapper>
+      </DualListSelectorPaneContext.Provider>
+    </div>
+  );
+};
 DualListSelectorPane.displayName = 'DualListSelectorPane';

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

@@ -95,7 +95,7 @@ exports[`EmptyState Main 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-:r0:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -113,7 +113,7 @@ exports[`EmptyState Main 1`] = `
           <button
             aria-label="learn more action"
             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"
             type="button"

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,8 +4,9 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
-import { debounce, getUniqueId } from '../../helpers/util';
+import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { GenerateId } from '../../helpers';
 import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
@@ -106,6 +107,7 @@ const setLineClamp = (lines: number, element: HTMLDivElement) => {
 
 class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
+
   constructor(props: ExpandableSectionProps) {
     super(props);
 
@@ -242,8 +244,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
 
     let onToggle = onToggleProp;
     let propOrStateIsExpanded = isExpanded;
-    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
-    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
 
     // uncontrolled
     if (isExpanded === undefined) {
@@ -264,55 +264,68 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       typeof toggleContent === 'function' ? toggleContent(propOrStateIsExpanded) : toggleContent;
     const ToggleWrapper = toggleWrapper as any;
 
-    const expandableToggle = !isDetached && (
-      <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
-        <Button
-          variant="link"
-          {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
-          aria-expanded={propOrStateIsExpanded}
-          aria-controls={uniqueContentId}
-          id={uniqueToggleId}
-          onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
-          {...(variant !== ExpandableSectionVariant.truncate &&
-            hasToggleIcon && {
-              icon: <span className={css(styles.expandableSectionToggleIcon)}>{toggleIcon}</span>
-            })}
-          aria-label={toggleAriaLabel}
-          aria-labelledby={toggleAriaLabelledBy}
-        >
-          {computedToggleContent || computedToggleText}
-        </Button>
-      </ToggleWrapper>
-    );
-
     return (
-      <div
-        className={css(
-          styles.expandableSection,
-          propOrStateIsExpanded && styles.modifiers.expanded,
-          displaySize === 'lg' && styles.modifiers.displayLg,
-          isWidthLimited && styles.modifiers.limitWidth,
-          isIndented && styles.modifiers.indented,
-          isDetached && direction && directionClassMap[direction],
-          isDetached && direction && 'pf-m-detached',
-          variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
-          className
+      <GenerateId prefix="expandable-section-content-">
+        {(genContentId) => (
+          <GenerateId prefix="expandable-section-toggle-">
+            {(genToggleId) => {
+              const uniqueContentId = contentId || genContentId;
+              const uniqueToggleId = toggleId || genToggleId;
+
+              const expandableToggle = !isDetached && (
+                <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
+                  <Button
+                    variant="link"
+                    {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
+                    aria-expanded={propOrStateIsExpanded}
+                    aria-controls={uniqueContentId}
+                    id={uniqueToggleId}
+                    onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
+                    {...(variant !== ExpandableSectionVariant.truncate &&
+                      hasToggleIcon && {
+                        icon: <span className={css(styles.expandableSectionToggleIcon)}>{toggleIcon}</span>
+                      })}
+                    aria-label={toggleAriaLabel}
+                    aria-labelledby={toggleAriaLabelledBy}
+                  >
+                    {computedToggleContent || computedToggleText}
+                  </Button>
+                </ToggleWrapper>
+              );
+
+              return (
+                <div
+                  className={css(
+                    styles.expandableSection,
+                    propOrStateIsExpanded && styles.modifiers.expanded,
+                    displaySize === 'lg' && styles.modifiers.displayLg,
+                    isWidthLimited && styles.modifiers.limitWidth,
+                    isIndented && styles.modifiers.indented,
+                    isDetached && direction && directionClassMap[direction],
+                    isDetached && direction && 'pf-m-detached',
+                    variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
+                    className
+                  )}
+                  {...props}
+                >
+                  {variant === ExpandableSectionVariant.default && expandableToggle}
+                  <div
+                    ref={this.expandableContentRef}
+                    className={css(styles.expandableSectionContent)}
+                    hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
+                    id={uniqueContentId}
+                    aria-labelledby={uniqueToggleId}
+                    role="region"
+                  >
+                    {children}
+                  </div>
+                  {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
+                </div>
+              );
+            }}
+          </GenerateId>
         )}
-        {...props}
-      >
-        {variant === ExpandableSectionVariant.default && expandableToggle}
-        <div
-          ref={this.expandableContentRef}
-          className={css(styles.expandableSectionContent)}
-          hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
-          id={uniqueContentId}
-          aria-labelledby={uniqueToggleId}
-          role="region"
-        >
-          {children}
-        </div>
-        {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
-      </div>
+      </GenerateId>
     );
   }
 }

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

@@ -11,7 +11,7 @@ exports[`Disclosure ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-6"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rh:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -76,7 +76,7 @@ exports[`ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -142,7 +142,7 @@ exports[`Renders ExpandableSection expanded 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-2"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -207,7 +207,7 @@ exports[`Renders ExpandableSection indented 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-7"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -271,7 +271,7 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-5"
+        data-ouia-component-id="OUIA-Generated-Button-link-:re:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"

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

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

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

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