@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

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

@@ -5,8 +5,8 @@ import topOffset from '@patternfly/react-tokens/dist/esm/c_menu_m_flyout__menu_t
 import rightOffset from '@patternfly/react-tokens/dist/esm/c_menu_m_flyout__menu_m_left_right_offset';
 import leftOffset from '@patternfly/react-tokens/dist/esm/c_menu_m_flyout__menu_left_offset';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { Checkbox } from '../Checkbox';
 import { MenuContext, MenuItemContext } from './MenuContext';
@@ -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)}>
+              <RhMicronsCaretLeftIcon />
+            </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)}>
+              <RhMicronsCaretRightIcon />
+            </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/Menu/examples/Menu.md

@@ -27,9 +27,9 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 ## Examples

package/src/components/Menu/examples/MenuWithActions.tsx

@@ -3,7 +3,7 @@ import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const MenuWithActions: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = useState<number[]>([0, 2, 3]);
@@ -46,7 +46,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
             <MenuItem
               isDisabled
               isSelected={selectedItems.indexOf(1) !== -1}
-              actions={<MenuItemAction icon={<BellIcon />} actionId="alert" aria-label="Alert" />}
+              actions={<MenuItemAction icon={<RhUiNotificationFillIcon />} actionId="alert" aria-label="Alert" />}
               description="This is a description"
               itemId={1}
             >

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -22,7 +22,7 @@ import {
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
@@ -134,7 +134,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-start"
               icon={
                 <Icon shouldMirrorRTL>
-                  <AngleLeftIcon />
+                  <RhMicronsCaretLeftIcon />
                 </Icon>
               }
               onClick={(event: any) =>
@@ -181,7 +181,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-start"
               icon={
                 <Icon shouldMirrorRTL>
-                  <AngleLeftIcon />
+                  <RhMicronsCaretLeftIcon />
                 </Icon>
               }
               onClick={(event: any) =>
@@ -240,7 +240,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-pause"
               icon={
                 <Icon shouldMirrorRTL>
-                  <AngleLeftIcon />
+                  <RhMicronsCaretLeftIcon />
                 </Icon>
               }
               onClick={(event: any) =>
@@ -287,7 +287,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-pause"
               icon={
                 <Icon shouldMirrorRTL>
-                  <AngleLeftIcon />
+                  <RhMicronsCaretLeftIcon />
                 </Icon>
               }
               onClick={(event: any) =>

package/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx

@@ -11,7 +11,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
     'initial-state-drilldownMenuStart'
   ]);
   const [drilldownPath, setDrilldownPath] = useState<string[]>(['group:start_rollout', 'group:app_grouping']);
-  const [menuHeights, setMenuHeights] = useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
+  const [menuHeights, setMenuHeights] = useState<any>({ 'initial-state-rootMenu': 186 }); // The root menu height must be defined when starting from a drilled in state
   const [activeMenu, setActiveMenu] = useState<string>('initial-state-drilldownMenuStartGrouping');
 
   const drillIn = (

package/src/components/Menu/examples/MenuWithFavorites.tsx

@@ -2,7 +2,7 @@ import { Fragment, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const MenuWithFavorites: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(0);
@@ -46,7 +46,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
       text: 'Item 3',
       description: 'Description 3',
       itemId: 'item-3',
-      action: <BellIcon />,
+      action: <RhUiNotificationFillIcon />,
       actionId: 'bell'
     }
   ];