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

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

@@ -256,7 +256,7 @@ exports[`LabelGroup label group with closable category 1`] = `
         aria-label="Close label group"
         aria-labelledby="remove_group_generated-id generated-id"
         class="pf-v6-c-button pf-m-plain pf-m-small"
-        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"
         id="remove_group_generated-id"

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r17:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -82,7 +82,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-password-id"
@@ -106,7 +106,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
           <input
             aria-invalid="false"
             class="pf-v6-c-check__input"
-            data-ouia-component-id="OUIA-Generated-Checkbox-4"
+            data-ouia-component-id="OUIA-Generated-Checkbox-:r1d:"
             data-ouia-component-type="PF6/Checkbox"
             data-ouia-safe="true"
             id="pf-login-remember-me-id"
@@ -132,7 +132,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary pf-m-block"
-            data-ouia-component-id="OUIA-Generated-Button-primary-5"
+            data-ouia-component-id="OUIA-Generated-Button-primary-:r1e:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="submit"
@@ -188,7 +188,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1h:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -238,7 +238,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             >
               <input
                 aria-invalid="false"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-:r1k:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 id="pf-login-password-id"
@@ -255,7 +255,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             <button
               aria-label="Show password"
               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-:r1l:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               type="button"
@@ -305,7 +305,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary pf-m-block"
-            data-ouia-component-id="OUIA-Generated-Button-primary-6"
+            data-ouia-component-id="OUIA-Generated-Button-primary-:r1m:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="submit"
@@ -361,7 +361,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -405,7 +405,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-password-id"
@@ -428,7 +428,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary pf-m-block"
-            data-ouia-component-id="OUIA-Generated-Button-primary-1"
+            data-ouia-component-id="OUIA-Generated-Button-primary-:r6:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="submit"

package/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
   >
     <h2
       class="pf-v6-c-title pf-m-3xl"
-      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"
     >

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

@@ -19,7 +19,7 @@ exports[`brand is absent without brandImgSrc and brandImgProps.src 1`] = `
         >
           <h2
             class="pf-v6-c-title pf-m-3xl"
-            data-ouia-component-id="OUIA-Generated-Title-2"
+            data-ouia-component-id="OUIA-Generated-Title-:r1:"
             data-ouia-component-type="PF6/Title"
             data-ouia-safe="true"
           >
@@ -68,7 +68,7 @@ exports[`brand is present with brandImgSrc prop 1`] = `
         >
           <h2
             class="pf-v6-c-title pf-m-3xl"
-            data-ouia-component-id="OUIA-Generated-Title-3"
+            data-ouia-component-id="OUIA-Generated-Title-:r2:"
             data-ouia-component-type="PF6/Title"
             data-ouia-safe="true"
           >
@@ -121,7 +121,7 @@ exports[`check loginpage example against snapshot 1`] = `
         >
           <h2
             class="pf-v6-c-title pf-m-3xl"
-            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"
           >

package/src/components/Menu/Menu.tsx

@@ -2,7 +2,8 @@ import { Component, createRef, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { MenuContext } from './MenuContext';
 import type { MenuItemProps } from './MenuItem';
 import { canUseDOM } from '../../helpers/util';
@@ -67,7 +68,6 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
 }
 
 export interface MenuState {
-  ouiaStateId: string;
   transitionMoveTarget: HTMLElement;
   flyoutRef: React.Ref<HTMLLIElement> | null;
   currentDrilldownMenuId: string;
@@ -95,7 +95,6 @@ class MenuBase extends Component<MenuProps, MenuState> {
   }
 
   state: MenuState = {
-    ouiaStateId: getDefaultOUIAId(Menu.displayName),
     transitionMoveTarget: null,
     flyoutRef: null,
     currentDrilldownMenuId: this.props.id
@@ -264,72 +263,76 @@ class MenuBase extends Component<MenuProps, MenuState> {
     } = this.props;
     const _isMenuDrilledIn = isMenuDrilledIn || (drilledInMenus && drilledInMenus.includes(id)) || false;
     return (
-      <MenuContext.Provider
-        value={{
-          menuId: id,
-          parentMenu: parentMenu || id,
-          onSelect,
-          onActionClick,
-          activeItemId,
-          selected,
-          drilledInMenus,
-          drilldownItemPath,
-          onDrillIn,
-          onDrillOut,
-          onGetMenuHeight,
-          flyoutRef: this.state.flyoutRef,
-          setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
-          disableHover: this.context?.disableHover ?? false,
-          role
-        }}
-      >
-        {isRootMenu && (
-          <KeyboardHandler
-            containerRef={(this.menuRef as React.RefObject<HTMLDivElement | null>) || null}
-            additionalKeyHandler={this.handleExtraKeys}
-            createNavigableElements={this.createNavigableElements}
-            isActiveElement={(element: Element) =>
-              document.activeElement.closest('li') === element || // if element is a basic MenuItem
-              document.activeElement.parentElement === element ||
-              document.activeElement.closest(`.${styles.menuSearch}`) === element || // if element is a MenuSearch
-              (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element)
-            }
-            getFocusableElement={(navigableElement: Element) =>
-              (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
-              ((navigableElement.firstChild as Element)?.tagName === 'LABEL' &&
-                navigableElement.querySelector('input')) || // for MenuItem checkboxes
-              ((navigableElement.firstChild as Element)?.tagName === 'DIV' &&
-                navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
-              (navigableElement.firstChild as Element)
-            }
-            noHorizontalArrowHandling={
-              document.activeElement &&
-              (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                document.activeElement.tagName === 'INPUT')
-            }
-            noEnterHandling
-            noSpaceHandling
-          />
+      <SSRSafeIds prefix="pf-" ouiaComponentType={Menu.displayName}>
+        {(_, generatedOuiaId) => (
+          <MenuContext.Provider
+            value={{
+              menuId: id,
+              parentMenu: parentMenu || id,
+              onSelect,
+              onActionClick,
+              activeItemId,
+              selected,
+              drilledInMenus,
+              drilldownItemPath,
+              onDrillIn,
+              onDrillOut,
+              onGetMenuHeight,
+              flyoutRef: this.state.flyoutRef,
+              setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
+              disableHover: this.context?.disableHover ?? false,
+              role
+            }}
+          >
+            {isRootMenu && (
+              <KeyboardHandler
+                containerRef={(this.menuRef as React.RefObject<HTMLDivElement | null>) || null}
+                additionalKeyHandler={this.handleExtraKeys}
+                createNavigableElements={this.createNavigableElements}
+                isActiveElement={(element: Element) =>
+                  document.activeElement.closest('li') === element || // if element is a basic MenuItem
+                  document.activeElement.parentElement === element ||
+                  document.activeElement.closest(`.${styles.menuSearch}`) === element || // if element is a MenuSearch
+                  (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element)
+                }
+                getFocusableElement={(navigableElement: Element) =>
+                  (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
+                  ((navigableElement.firstChild as Element)?.tagName === 'LABEL' &&
+                    navigableElement.querySelector('input')) || // for MenuItem checkboxes
+                  ((navigableElement.firstChild as Element)?.tagName === 'DIV' &&
+                    navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
+                  (navigableElement.firstChild as Element)
+                }
+                noHorizontalArrowHandling={
+                  document.activeElement &&
+                  (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
+                    document.activeElement.tagName === 'INPUT')
+                }
+                noEnterHandling
+                noSpaceHandling
+              />
+            )}
+            <div
+              id={id}
+              className={css(
+                styles.menu,
+                isPlain && styles.modifiers.plain,
+                isScrollable && styles.modifiers.scrollable,
+                containsFlyout && styles.modifiers.flyout,
+                isNavFlyout && 'pf-m-nav',
+                containsDrilldown && styles.modifiers.drilldown,
+                _isMenuDrilledIn && styles.modifiers.drilledIn,
+                className
+              )}
+              ref={this.menuRef}
+              {...getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+              {...props}
+            >
+              {children}
+            </div>
+          </MenuContext.Provider>
         )}
-        <div
-          id={id}
-          className={css(
-            styles.menu,
-            isPlain && styles.modifiers.plain,
-            isScrollable && styles.modifiers.scrollable,
-            containsFlyout && styles.modifiers.flyout,
-            isNavFlyout && 'pf-m-nav',
-            containsDrilldown && styles.modifiers.drilldown,
-            _isMenuDrilledIn && styles.modifiers.drilledIn,
-            className
-          )}
-          ref={this.menuRef}
-          {...getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-          {...props}
-        >
-          {children}
-        </div>
-      </MenuContext.Provider>
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Menu/MenuItem.tsx

@@ -14,7 +14,7 @@ import { MenuItemAction } from './MenuItemAction';
 import { Tooltip, TooltipProps } from '../Tooltip';
 import { canUseDOM } from '../../helpers/util';
 import { useIsomorphicLayoutEffect } from '../../helpers/useIsomorphicLayout';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {
   /** Content rendered inside the menu list item. */
@@ -151,6 +151,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   const innerComponentRef = innerRef || privateRef;
   const flyoutVisible = ref === flyoutRef;
 
+  const randomId = useSSRSafeId();
   const hasFlyout = flyoutMenu !== undefined;
   const showFlyout = (show: boolean) => {
     if (!flyoutVisible && show) {
@@ -343,75 +344,71 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
 
   const renderItem = (
     <>
-      <GenerateId>
-        {(randomId) => (
-          <Component
-            id={id}
-            tabIndex={-1}
-            className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
-            aria-current={getAriaCurrent()}
-            {...(!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel })}
-            {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
-            {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
-            ref={innerComponentRef}
-            {...(!hasCheckbox && {
-              onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
-                if (!isAriaDisabled) {
-                  onItemSelect(event, onSelect);
-                  drill && drill(event);
-                  flyoutMenu && handleFlyout(event);
-                } else {
-                  event.preventDefault();
-                }
-              }
-            })}
-            {...(hasCheckbox && { htmlFor: randomId })}
-            {...additionalProps}
-          >
-            <span className={css(styles.menuItemMain)}>
-              {direction === 'up' && (
-                <span className={css(styles.menuItemToggleIcon)}>
-                  <AngleLeftIcon />
-                </span>
-              )}
-              {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
-              {hasCheckbox && (
-                <span className={css(styles.menuItemCheck)}>
-                  <Checkbox
-                    id={randomId}
-                    component="span"
-                    isChecked={isSelected || false}
-                    onChange={(event) => onItemSelect(event, onSelect)}
-                    isDisabled={isDisabled}
-                    aria-disabled={isAriaDisabled}
-                  />
-                </span>
-              )}
-              <span className={css(styles.menuItemText)}>{children}</span>
-              {isExternalLink && (
-                <span className={css(styles.menuItemExternalIcon)}>
-                  <ExternalLinkAltIcon />
-                </span>
-              )}
-              {(flyoutMenu || direction === 'down') && (
-                <span className={css(styles.menuItemToggleIcon)}>
-                  <AngleRightIcon />
-                </span>
-              )}
-              {getIsSelected() && (
-                <span className={css(styles.menuItemSelectIcon)}>
-                  <CheckIcon />
-                </span>
-              )}
+      <Component
+        id={id}
+        tabIndex={-1}
+        className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
+        aria-current={getAriaCurrent()}
+        {...(!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel })}
+        {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
+        {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
+        ref={innerComponentRef}
+        {...(!hasCheckbox && {
+          onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
+            if (!isAriaDisabled) {
+              onItemSelect(event, onSelect);
+              drill && drill(event);
+              flyoutMenu && handleFlyout(event);
+            } else {
+              event.preventDefault();
+            }
+          }
+        })}
+        {...(hasCheckbox && { htmlFor: randomId })}
+        {...additionalProps}
+      >
+        <span className={css(styles.menuItemMain)}>
+          {direction === 'up' && (
+            <span className={css(styles.menuItemToggleIcon)}>
+              <AngleLeftIcon />
+            </span>
+          )}
+          {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
+          {hasCheckbox && (
+            <span className={css(styles.menuItemCheck)}>
+              <Checkbox
+                id={randomId}
+                component="span"
+                isChecked={isSelected || false}
+                onChange={(event) => onItemSelect(event, onSelect)}
+                isDisabled={isDisabled}
+                aria-disabled={isAriaDisabled}
+              />
+            </span>
+          )}
+          <span className={css(styles.menuItemText)}>{children}</span>
+          {isExternalLink && (
+            <span className={css(styles.menuItemExternalIcon)}>
+              <ExternalLinkAltIcon />
+            </span>
+          )}
+          {(flyoutMenu || direction === 'down') && (
+            <span className={css(styles.menuItemToggleIcon)}>
+              <AngleRightIcon />
+            </span>
+          )}
+          {getIsSelected() && (
+            <span className={css(styles.menuItemSelectIcon)}>
+              <CheckIcon />
             </span>
-            {description && direction !== 'up' && (
-              <span className={css(styles.menuItemDescription)}>
-                <span>{description}</span>
-              </span>
-            )}
-          </Component>
+          )}
+        </span>
+        {description && direction !== 'up' && (
+          <span className={css(styles.menuItemDescription)}>
+            <span>{description}</span>
+          </span>
         )}
-      </GenerateId>
+      </Component>
       {flyoutVisible && (
         <MenuContext.Provider value={{ disableHover }}>
           <FlyoutContext.Provider value={{ direction: flyoutXDirection }}>{flyoutMenu}</FlyoutContext.Provider>

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

@@ -4,7 +4,7 @@ exports[`Menu should render Menu successfully 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-menu"
-    data-ouia-component-id="OUIA-Generated-Menu-1"
+    data-ouia-component-id="OUIA-Generated-Menu-:r1:"
     data-ouia-component-type="PF6/Menu"
     data-ouia-safe="true"
   >