@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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"
   >

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',
@@ -23,7 +24,8 @@ export enum MenuToggleSize {
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface MenuToggleProps
-  extends Omit<
+  extends
+    Omit<
       React.DetailedHTMLProps<
         React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
         MenuToggleElement
@@ -73,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: '',
@@ -91,10 +89,6 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     ouiaSafe: true
   };
 
-  state: MenuToggleState = {
-    ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant)
-  };
-
   render() {
     const {
       children,
@@ -124,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>
     );
   }
 }