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

package/src/components/MenuToggle/MenuToggle.tsx

@@ -7,7 +7,8 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 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 { OUIAProps, getDefaultOUIAId, getOUIAProps } from '../../helpers';
+import { OUIAProps, getOUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export enum MenuToggleStatus {
   success = 'success',
@@ -74,11 +75,7 @@ export interface MenuToggleProps
   ouiaSafe?: boolean;
 }
 
-interface MenuToggleState {
-  ouiaStateId: string;
-}
-
-class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
+class MenuToggleBase extends Component<MenuToggleProps> {
   displayName = 'MenuToggleBase';
   static defaultProps: MenuToggleProps = {
     className: '',
@@ -92,10 +89,6 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     ouiaSafe: true
   };
 
-  state: MenuToggleState = {
-    ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant)
-  };
-
   render() {
     const {
       children,
@@ -125,121 +118,132 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     const isPlainText = variant === 'plainText';
     const isTypeahead = variant === 'typeahead';
 
-    const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId ?? this.state.ouiaStateId, ouiaSafe);
-
-    let _statusIcon = statusIcon;
-    if (!statusIcon) {
-      switch (status) {
-        case MenuToggleStatus.success:
-          _statusIcon = <CheckCircleIcon />;
-          break;
-        case MenuToggleStatus.warning:
-          _statusIcon = <ExclamationTriangleIcon />;
-          break;
-        case MenuToggleStatus.danger:
-          _statusIcon = <ExclamationCircleIcon />;
-          break;
-      }
-    }
-
-    const toggleControls = (
-      <span className={css(styles.menuToggleControls)}>
-        {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
-        <span className={css(styles.menuToggleToggleIcon)}>
-          <CaretDownIcon />
-        </span>
-      </span>
-    );
-
-    const content = (
-      <>
-        {(icon || isSettings) && <span className={css(styles.menuToggleIcon)}>{isSettings ? <CogIcon /> : icon}</span>}
-        {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
-        {isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
-        {isTypeahead ? (
-          <button
-            type="button"
-            className={css(styles.menuToggleButton)}
-            aria-expanded={isExpanded}
-            onClick={onClick}
-            aria-label={ariaLabel || 'Menu toggle'}
-            tabIndex={-1}
-            {...ouiaProps}
-          >
-            {toggleControls}
-          </button>
-        ) : (
-          !isPlain && toggleControls
-        )}
-      </>
-    );
-
-    const commonStyles = css(
-      styles.menuToggle,
-      isExpanded && styles.modifiers.expanded,
-      variant === 'primary' && styles.modifiers.primary,
-      variant === 'secondary' && styles.modifiers.secondary,
-      status && styles.modifiers[status],
-      (isPlain || isPlainText) && styles.modifiers.plain,
-      isPlainText && 'pf-m-text',
-      isFullHeight && styles.modifiers.fullHeight,
-      isFullWidth && styles.modifiers.fullWidth,
-      isDisabled && styles.modifiers.disabled,
-      isPlaceholder && styles.modifiers.placeholder,
-      isSettings && styles.modifiers.settings,
-      size === MenuToggleSize.sm && styles.modifiers.small,
-      className
-    );
-
-    const componentProps = {
-      children: content,
-      ...(isDisabled && { disabled: true }),
-      ...otherProps
-    };
-
-    if (isTypeahead) {
-      return (
-        <div
-          ref={innerRef as React.Ref<HTMLDivElement>}
-          className={css(commonStyles, styles.modifiers.typeahead)}
-          {...componentProps}
-        />
-      );
-    }
-
-    if (splitButtonItems) {
-      return (
-        <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>
-          {splitButtonItems}
-          <button
-            className={css(styles.menuToggleButton, children && styles.modifiers.text)}
-            type="button"
-            aria-expanded={isExpanded}
-            aria-label={ariaLabel}
-            disabled={isDisabled}
-            onClick={onClick}
-            {...otherProps}
-            {...ouiaProps}
-          >
-            {children && <span className={css(styles.menuToggleText)}>{children}</span>}
-            {toggleControls}
-          </button>
-        </div>
-      );
-    }
-
     return (
-      <button
-        className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
-        type="button"
-        aria-label={ariaLabel}
-        aria-expanded={isExpanded}
-        ref={innerRef as React.Ref<HTMLButtonElement>}
-        disabled={isDisabled}
-        onClick={onClick}
-        {...componentProps}
-        {...ouiaProps}
-      />
+      <SSRSafeIds prefix="pf-" ouiaComponentType={`MenuToggle${variant ? `-${variant}` : ''}`}>
+        {(_, generatedOuiaId) => {
+          const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId ?? generatedOuiaId, ouiaSafe);
+
+          let _statusIcon = statusIcon;
+          if (!statusIcon) {
+            switch (status) {
+              case MenuToggleStatus.success:
+                _statusIcon = <CheckCircleIcon />;
+                break;
+              case MenuToggleStatus.warning:
+                _statusIcon = <ExclamationTriangleIcon />;
+                break;
+              case MenuToggleStatus.danger:
+                _statusIcon = <ExclamationCircleIcon />;
+                break;
+            }
+          }
+
+          const toggleControls = (
+            <span className={css(styles.menuToggleControls)}>
+              {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
+              <span className={css(styles.menuToggleToggleIcon)}>
+                <CaretDownIcon />
+              </span>
+            </span>
+          );
+
+          const content = (
+            <>
+              {(icon || isSettings) && (
+                <span className={css(styles.menuToggleIcon)}>{isSettings ? <CogIcon /> : icon}</span>
+              )}
+              {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
+              {isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+              {isTypeahead ? (
+                <button
+                  type="button"
+                  className={css(styles.menuToggleButton)}
+                  aria-expanded={isExpanded}
+                  onClick={onClick}
+                  aria-label={ariaLabel || 'Menu toggle'}
+                  tabIndex={-1}
+                  {...ouiaProps}
+                >
+                  {toggleControls}
+                </button>
+              ) : (
+                !isPlain && toggleControls
+              )}
+            </>
+          );
+
+          const commonStyles = css(
+            styles.menuToggle,
+            isExpanded && styles.modifiers.expanded,
+            variant === 'primary' && styles.modifiers.primary,
+            variant === 'secondary' && styles.modifiers.secondary,
+            status && styles.modifiers[status],
+            (isPlain || isPlainText) && styles.modifiers.plain,
+            isPlainText && 'pf-m-text',
+            isFullHeight && styles.modifiers.fullHeight,
+            isFullWidth && styles.modifiers.fullWidth,
+            isDisabled && styles.modifiers.disabled,
+            isPlaceholder && styles.modifiers.placeholder,
+            isSettings && styles.modifiers.settings,
+            size === MenuToggleSize.sm && styles.modifiers.small,
+            className
+          );
+
+          const componentProps = {
+            children: content,
+            ...(isDisabled && { disabled: true }),
+            ...otherProps
+          };
+
+          if (isTypeahead) {
+            return (
+              <div
+                ref={innerRef as React.Ref<HTMLDivElement>}
+                className={css(commonStyles, styles.modifiers.typeahead)}
+                {...componentProps}
+              />
+            ) as React.ReactElement;
+          }
+
+          if (splitButtonItems) {
+            return (
+              <div
+                ref={innerRef as React.Ref<HTMLDivElement>}
+                className={css(commonStyles, styles.modifiers.splitButton)}
+              >
+                {splitButtonItems}
+                <button
+                  className={css(styles.menuToggleButton, children && styles.modifiers.text)}
+                  type="button"
+                  aria-expanded={isExpanded}
+                  aria-label={ariaLabel}
+                  disabled={isDisabled}
+                  onClick={onClick}
+                  {...otherProps}
+                  {...ouiaProps}
+                >
+                  {children && <span className={css(styles.menuToggleText)}>{children}</span>}
+                  {toggleControls}
+                </button>
+              </div>
+            ) as React.ReactElement;
+          }
+
+          return (
+            <button
+              className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
+              type="button"
+              aria-label={ariaLabel}
+              aria-expanded={isExpanded}
+              ref={innerRef as React.Ref<HTMLButtonElement>}
+              disabled={isDisabled}
+              onClick={onClick}
+              {...componentProps}
+              {...ouiaProps}
+            />
+          ) as React.ReactElement;
+        }}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -2,7 +2,8 @@ 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 {
@@ -32,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,
@@ -40,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);
   };
@@ -83,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"
@@ -57,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"
@@ -109,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"
@@ -170,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"
@@ -251,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=""
@@ -304,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"
@@ -356,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"
@@ -399,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"
@@ -451,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"

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

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -103,7 +103,7 @@ exports[`Modal Content Test with onclose 1`] = `
           <button
             aria-label="Close"
             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"
             type="button"

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 import { ExpandableSection } from '../ExpandableSection';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -34,6 +34,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   'aria-label': ariaLabel,
   ...props
 }: MultipleFileUploadStatusProps) => {
+  const expandableSectionId = useSSRSafeId('pf-expandable-section-');
   const [icon, setIcon] = useState<React.ReactNode>();
   const [isOpen, setIsOpen] = useState(true);
 
@@ -66,21 +67,17 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
 
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
-      <GenerateId prefix="pf-expandable-section-">
-        {(expandableSectionId) => (
-          <ExpandableSection
-            contentId={`${expandableSectionId}-content`}
-            toggleId={`${expandableSectionId}-toggle`}
-            toggleContent={toggle}
-            isExpanded={isOpen}
-            onToggle={toggleExpandableSection}
-          >
-            <ul className={`${styles.multipleFileUploadStatus}-list`} role="list" aria-label={ariaLabel}>
-              {children}
-            </ul>
-          </ExpandableSection>
-        )}
-      </GenerateId>
+      <ExpandableSection
+        contentId={`${expandableSectionId}-content`}
+        toggleId={`${expandableSectionId}-toggle`}
+        toggleContent={toggle}
+        isExpanded={isOpen}
+        onToggle={toggleExpandableSection}
+      >
+        <ul className={`${styles.multipleFileUploadStatus}-list`} role="list" aria-label={ariaLabel}>
+          {children}
+        </ul>
+      </ExpandableSection>
     </div>
   );
 };

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`MultipleFileUploadButton renders custom class names 1`] = `
   >
     <button
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-2"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-:r1:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -30,7 +30,7 @@ exports[`MultipleFileUploadButton renders with aria-label applied to the button
     <button
       aria-label="test"
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-3"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-:r2:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -52,7 +52,7 @@ exports[`MultipleFileUploadButton renders with expected class names 1`] = `
   >
     <button
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -74,7 +74,7 @@ exports[`MultipleFileUploadButton renders with label applied to the button 1`] =
   >
     <button
       class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-4"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-:r3:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`MultipleFileUploadMain passes props to the info component as expected 1
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-4"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-:r3:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -60,7 +60,7 @@ exports[`MultipleFileUploadMain passes props to the title as expected 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-3"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-:r2:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -86,7 +86,7 @@ exports[`MultipleFileUploadMain renders custom class names 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-2"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-:r1:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -112,7 +112,7 @@ exports[`MultipleFileUploadMain renders with expected class names 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-secondary"
-        data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+        data-ouia-component-id="OUIA-Generated-Button-secondary-:r0:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"