Fix/nextjs hydration errors 12250 (#12251)

* refactor: #12250: replace GenerateId with useSSRSafeId in multiple components

- Updated AboutModal, CalendarMonth, CardHeader, Checkbox, DataListCheck, DrawerPanelContent, DualListSelector, DualListSelectorListItem, DualListSelectorListWrapper, DualListSelectorPane, ExpandableSection, FormGroup, InternalFormFieldGroup, JumpLinks, and MenuItem components to use useSSRSafeId for generating unique IDs instead of GenerateId.
- This change improves consistency and simplifies ID generation across components.

* refactor: replace default ID generation with SSRSafeIds in multiple components

- Updated Checkbox, ExpandableSection, FormSelect, Menu, MenuToggle, MenuToggleCheckbox, Modal, Nav, NavExpandable, and Progress components to utilize SSRSafeIds for generating unique IDs.
- This change enhances ID management and ensures consistency across components.

* fix: restore getDefaultOUIAId for deprecated class components

The deprecated Table class component in react-table still requires
getDefaultOUIAId which cannot be replaced with hooks. Re-added as
a simplified legacy function marked @deprecated.

Co-authored-by: Cursor <cursoragent@cursor.com>

* refactor: streamline interface definitions across multiple components

- improve interface definitions by removing unnecessary line breaks and enhancing readability.
- This change maintains consistency in code style across the codebase.

* fix: correct prettier formatting and update snapshots

Reformatted with Prettier 3.8.1 to match CI and updated snapshot

* fix: rebuild dist and update all remaining snapshots

* fix: update snapshots for various components

- Updated snapshots for CodeEditor, AboutModalBoxCloseButton, AlertActionCloseButton, AlertIcon, ClipboardCopyButton, and others to reflect recent changes in SVG icons and structure.
- Ensured consistency in icon rendering across components by replacing placeholder paths with actual SVG elements.

* refactor: update useSSRSafeId to utilize useId from React

- Replaced the import of React's useId with a direct import from 'react' in the useSSRSafeId helper.
- This change simplifies the code and ensures compatibility with the latest React features.

* fix(ToolbarLabelGroup): handle window resize events for responsive design

- Added a resize event listener to update the viewport width in the ToolbarLabelGroup component.
- Ensured proper cleanup of the event listener in componentWillUnmount.
- Updated Cypress tests for the Switch component to reflect changes in element visibility and interaction.

* fix(FormSelect): update ouiaComponentType to use displayName for improved accessibility

- Changed the ouiaComponentType prop in FormSelect to utilize the component's displayName instead of a concatenated string with validation status.

* fix(Tooltip): improve aria attribute handling for better accessibility

- Updated the logic for modifying the existing aria attribute to use split and filter methods, ensuring that the specified ID is removed correctly.

* fix(FormSelect): update snapshot ouiaComponentId format for consistency

- Modified the ouiaComponentId in FormSelect snapshots to remove the "default" and validation status, ensuring a uniform format across all instances.

* fix(DrawerPanelContent): update class name for no glass modifier to use new format

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: arpanroy41

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Copy code to clipboard"
                 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"
@@ -67,7 +67,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Upload code"
                 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-:r3:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -109,7 +109,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Download code"
                 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-:r5:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Matches snapshot 1`] = `
   >
     <button
       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"

packages/react-core/src/components/AboutModal/AboutModal.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Modal, ModalVariant } from '../Modal';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
@@ -56,6 +56,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
   disableFocusTrap,
   ...props
 }: AboutModalProps) => {
+  const ariaLabelledBy = useSSRSafeId('pf-about-modal-title-');
+
   if (brandImageSrc && !brandImageAlt) {
     // eslint-disable-next-line no-console
     console.error(
@@ -73,35 +75,29 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
     return null;
   }
   return (
-    <GenerateId prefix="pf-about-modal-title-">
-      {(ariaLabelledBy) => (
-        <Modal
-          isOpen={isOpen}
-          variant={ModalVariant.large}
-          {...(productName && { 'aria-labelledby': ariaLabelledBy })}
-          aria-label={ariaLabel}
-          onEscapePress={onClose}
-          appendTo={appendTo}
-          disableFocusTrap={disableFocusTrap}
-        >
-          <AboutModalBox
-            style={
-              backgroundImageSrc
-                ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties)
-                : {}
-            }
-            className={css(className)}
-          >
-            <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
-            <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
-            {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
-            <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
-              {children}
-            </AboutModalBoxContent>
-          </AboutModalBox>
-        </Modal>
-      )}
-    </GenerateId>
+    <Modal
+      isOpen={isOpen}
+      variant={ModalVariant.large}
+      {...(productName && { 'aria-labelledby': ariaLabelledBy })}
+      aria-label={ariaLabel}
+      onEscapePress={onClose}
+      appendTo={appendTo}
+      disableFocusTrap={disableFocusTrap}
+    >
+      <AboutModalBox
+        style={
+          backgroundImageSrc ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties) : {}
+        }
+        className={css(className)}
+      >
+        <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
+        <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
+        {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
+        <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
+          {children}
+        </AboutModalBoxContent>
+      </AboutModalBox>
+    </Modal>
   );
 };
 AboutModal.displayName = 'AboutModal';

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     <button
       aria-label="Close Dialog"
       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"
@@ -55,7 +55,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     <button
       aria-label="Klose Daylok"
       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"
@@ -102,7 +102,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     <button
       aria-label="Close Dialog"
       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"

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
   >
     <h1
       class="pf-v6-c-title pf-m-4xl"
-      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-id="OUIA-Generated-Title-:r0:"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
       id="id"

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   <button
     aria-label="Close some label alert: test title"
     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"

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
-    data-ouia-component-id="OUIA-Generated-Button-link-1"
+    data-ouia-component-id="OUIA-Generated-Button-link-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   <nav
     aria-label="custom label"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -90,7 +90,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb className"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -107,7 +107,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >

packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-67"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r30:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

@@ -8,7 +8,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
@@ -170,7 +170,7 @@ export const CalendarMonth = ({
 
   const [hoveredDate, setHoveredDate] = useState<Date>(undefined);
   const focusRef = useRef<HTMLButtonElement>(undefined);
-  const [hiddenMonthId] = useState(getUniqueId('hidden-month-span'));
+  const hiddenMonthId = useSSRSafeId('hidden-month-span');
   const [shouldFocus, setShouldFocus] = useState(false);
 
   const isValidated = (date: Date) => validators.every((validator) => validator(date));