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

package/src/deprecated/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 '../../../components/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/deprecated/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';
 
@@ -37,10 +37,12 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   selectedOptions = [],
   onOptionSelect,
   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/deprecated/components/DualListSelector/DualListSelectorPane.tsx

@@ -2,7 +2,7 @@ import { useContext, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
-import { getUniqueId } from '../../../helpers';
+import { useSSRSafeId } from '../../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
@@ -88,11 +88,13 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   onSearchInputChanged,
   onSearchInputClear,
   filterOption,
-  id = getUniqueId('dual-list-selector-pane'),
+  id: idProp,
   isDisabled = false,
   listMinHeight,
   ...props
 }: DualListSelectorPaneProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-pane-');
+  const id = idProp || generatedId;
   const [input, setInput] = useState('');
   const { isTree } = useContext(DualListSelectorContext);
 

package/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -109,7 +109,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           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-:r5:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -154,7 +154,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           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-:r6:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -198,7 +198,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           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"
           disabled=""
@@ -243,7 +243,7 @@ exports[`DualListSelector basic 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           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-:r8:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -431,7 +431,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-13"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r16:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -476,7 +476,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-14"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r17:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -521,7 +521,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-15"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r18:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -566,7 +566,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-16"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r19:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -765,7 +765,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-21"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1q:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -810,7 +810,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-22"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1r:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -854,7 +854,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="false"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-23"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1s:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -898,7 +898,7 @@ exports[`DualListSelector with actions 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-24"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1t:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1151,7 +1151,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-9"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rr:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1196,7 +1196,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-10"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rs:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -1240,7 +1240,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-11"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1285,7 +1285,7 @@ exports[`DualListSelector with custom status 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-12"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:ru:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1527,7 +1527,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           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-:rg:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1572,7 +1572,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           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-:rh:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -1616,7 +1616,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-7"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1661,7 +1661,7 @@ exports[`DualListSelector with search inputs 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-8"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1992,7 +1992,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-17"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1f:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2037,7 +2037,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="false"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-18"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1g:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           tabindex="-1"
@@ -2081,7 +2081,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-19"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1h:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2126,7 +2126,7 @@ exports[`DualListSelector with tree 1`] = `
           aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-20"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1i:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""

package/src/deprecated/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 Omit<React.HTMLProps<HTMLDivElement>, 'title'>, OUIAProps {
   /** Action buttons to add to the standard modal footer. Ignored if the footer property
@@ -92,7 +93,7 @@ export enum ModalVariant {
 }
 
 interface ModalState {
-  ouiaStateId: string;
+  mounted: boolean;
 }
 
 class Modal extends Component<ModalProps, ModalState> {
@@ -135,7 +136,7 @@ class Modal extends Component<ModalProps, ModalState> {
     this.backdropId = `pf-modal-part-${backdropIdNum}`;
 
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
+      mounted: false
     };
   }
 
@@ -167,6 +168,7 @@ class Modal extends Component<ModalProps, ModalState> {
   isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
 
   componentDidMount() {
+    this.setState({ mounted: true });
     const {
       appendTo,
       title,
@@ -238,32 +240,38 @@ 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
-        {...props}
-        boxId={this.boxId}
-        labelId={this.labelId}
-        descriptorId={this.descriptorId}
-        backdropId={this.backdropId}
-        title={title}
-        titleIconVariant={titleIconVariant}
-        titleLabel={titleLabel}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedby}
-        aria-labelledby={ariaLabelledby}
-        bodyAriaLabel={bodyAriaLabel}
-        bodyAriaRole={bodyAriaRole}
-        ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
-        ouiaSafe={ouiaSafe}
-        position={position}
-        elementToFocus={elementToFocus}
-      />,
-      this.getElement(appendTo)
-    ) as React.ReactElement<any>;
+    return (
+      <SSRSafeIds prefix="pf-" ouiaComponentType={`Modal${this.props.variant ? `-${this.props.variant}` : ''}`}>
+        {(_, generatedOuiaId) =>
+          ReactDOM.createPortal(
+            <ModalContent
+              {...props}
+              boxId={this.boxId}
+              labelId={this.labelId}
+              descriptorId={this.descriptorId}
+              backdropId={this.backdropId}
+              title={title}
+              titleIconVariant={titleIconVariant}
+              titleLabel={titleLabel}
+              aria-label={ariaLabel}
+              aria-describedby={ariaDescribedby}
+              aria-labelledby={ariaLabelledby}
+              bodyAriaLabel={bodyAriaLabel}
+              bodyAriaRole={bodyAriaRole}
+              ouiaId={ouiaId !== undefined ? ouiaId : generatedOuiaId}
+              ouiaSafe={ouiaSafe}
+              position={position}
+              elementToFocus={elementToFocus}
+            />,
+            this.getElement(appendTo)
+          ) as React.ReactElement<any>
+        }
+      </SSRSafeIds>
+    );
   }
 }
 

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

@@ -24,7 +24,7 @@ exports[`Modal Content Test description 1`] = `
           <button
             aria-label="Close"
             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-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -115,7 +115,7 @@ exports[`Modal Content Test isOpen 1`] = `
           <button
             aria-label="Close"
             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-:r1:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -201,7 +201,7 @@ exports[`Modal Content Test only body 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"
@@ -287,7 +287,7 @@ exports[`Modal Content Test with footer 1`] = `
           <button
             aria-label="Close"
             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-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -378,7 +378,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-6"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -469,7 +469,7 @@ exports[`Modal Content test without footer 1`] = `
           <button
             aria-label="Close"
             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-:r4:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -555,7 +555,7 @@ exports[`Modal Test with custom footer 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-8"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -650,7 +650,7 @@ exports[`Modal Test with custom header 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-7"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r6:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 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"
             disabled=""
@@ -36,7 +36,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 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="submit"
@@ -59,7 +59,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
         >
           <button
             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"
             type="button"

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = `
     aria-label="string"
     aria-labelledby="string"
     class="pf-v6-c-wizard__nav"
-    data-ouia-component-id="OUIA-Generated-WizardNav-1"
+    data-ouia-component-id="OUIA-Generated-WizardNav-:r0:"
     data-ouia-component-type="PF6/WizardNav"
     data-ouia-safe="true"
   >

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
     <button
       aria-current="false"
       class="pf-v6-c-wizard__nav-link"
-      data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+      data-ouia-component-id="OUIA-Generated-WizardNavItem-:r0:"
       data-ouia-component-type="PF6/WizardNavItem"
       data-ouia-safe="true"
       type="button"