@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

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

@@ -33,18 +33,21 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-9"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -74,18 +77,21 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-password-id"
-          name="pf-login-password-id"
-          required=""
-          type="password"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-password-id"
+            name="pf-login-password-id"
+            required=""
+            type="password"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -101,7 +107,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-invalid="false"
             class="pf-v5-c-check__input"
             data-ouia-component-id="OUIA-Generated-Checkbox-4"
-            data-ouia-component-type="PF4/Checkbox"
+            data-ouia-component-type="PF5/Checkbox"
             data-ouia-safe="true"
             id="pf-login-remember-me-id"
             type="checkbox"
@@ -128,7 +134,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-disabled="false"
             class="pf-v5-c-button pf-m-primary pf-m-block"
             data-ouia-component-id="OUIA-Generated-Button-primary-5"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
             type="submit"
           >
@@ -174,18 +180,21 @@ exports[`LoginForm LoginForm with show password 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-11"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -218,39 +227,52 @@ exports[`LoginForm LoginForm with show password 1`] = `
         <div
           class="pf-v5-c-input-group"
         >
-          <input
-            aria-invalid="false"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            id="pf-login-password-id"
-            name="pf-login-password-id"
-            required=""
-            type="password"
-            value=""
-          />
-          <button
-            aria-disabled="false"
-            aria-label="Show password"
-            class="pf-v5-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
+          <div
+            class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 576 512"
+            <div
+              class="pf-v5-c-form-control"
             >
-              <path
-                d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+              <input
+                aria-invalid="false"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+                data-ouia-component-type="PF5/TextInput"
+                data-ouia-safe="true"
+                id="pf-login-password-id"
+                name="pf-login-password-id"
+                required=""
+                type="password"
+                value=""
               />
-            </svg>
-          </button>
+            </div>
+          </div>
+          <div
+            class="pf-v5-c-input-group__item"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Show password"
+              class="pf-v5-c-button pf-m-control"
+              data-ouia-component-id="OUIA-Generated-Button-control-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 576 512"
+                width="1em"
+              >
+                <path
+                  d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -267,7 +289,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             aria-disabled="false"
             class="pf-v5-c-button pf-m-primary pf-m-block"
             data-ouia-component-id="OUIA-Generated-Button-primary-6"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
             type="submit"
           >
@@ -313,18 +335,21 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -354,18 +379,21 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-password-id"
-          name="pf-login-password-id"
-          required=""
-          type="password"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-password-id"
+            name="pf-login-password-id"
+            required=""
+            type="password"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -381,7 +409,7 @@ exports[`LoginForm should render Login form 1`] = `
             aria-disabled="false"
             class="pf-v5-c-button pf-m-primary pf-m-block"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
             type="submit"
           >

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

@@ -24,7 +24,7 @@ exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
     <h2
       class="pf-v5-c-title pf-m-3xl"
       data-ouia-component-id="OUIA-Generated-Title-1"
-      data-ouia-component-type="PF4/Title"
+      data-ouia-component-type="PF5/Title"
       data-ouia-safe="true"
     >
       Log in to your account

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

@@ -30,7 +30,7 @@ exports[`check loginpage example against snapshot 1`] = `
           <h2
             class="pf-v5-c-title pf-m-3xl"
             data-ouia-component-id="OUIA-Generated-Title-1"
-            data-ouia-component-type="PF4/Title"
+            data-ouia-component-type="PF5/Title"
             data-ouia-safe="true"
           >
             Log into your account

package/src/components/LoginPage/examples/LoginPage.md

@@ -1,7 +1,7 @@
 ---
 id: Login page
 section: components
-cssPrefix: pf-c-login
+cssPrefix: pf-v5-c-login
 propComponents:
   [
     'LoginPage',

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -39,25 +39,25 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
 
   const headerUtilsOptions = (
     <SelectList>
-      <SelectOption key={0} itemId={i18n.English}>
+      <SelectOption key={0} value={i18n.English}>
         {i18n.English}
       </SelectOption>
-      <SelectOption key={1} itemId={i18n.Mandarin}>
+      <SelectOption key={1} value={i18n.Mandarin}>
         {i18n.Mandarin}
       </SelectOption>
-      <SelectOption key={2} itemId={i18n.Hindi}>
+      <SelectOption key={2} value={i18n.Hindi}>
         {i18n.Hindi}
       </SelectOption>
-      <SelectOption key={3} itemId={i18n.Spanish}>
+      <SelectOption key={3} value={i18n.Spanish}>
         {i18n.Spanish}
       </SelectOption>
-      <SelectOption key={4} itemId={i18n.Portuguese}>
+      <SelectOption key={4} value={i18n.Portuguese}>
         {i18n.Portuguese}
       </SelectOption>
-      <SelectOption key={5} itemId={i18n.Arabic}>
+      <SelectOption key={5} value={i18n.Arabic}>
         {i18n.Arabic}
       </SelectOption>
-      <SelectOption key={6} itemId={i18n.Bengali}>
+      <SelectOption key={6} value={i18n.Bengali}>
         {i18n.Bengali}
       </SelectOption>
     </SelectList>

package/src/components/Masthead/examples/Masthead.md

@@ -1,7 +1,7 @@
 ---
 id: Masthead
 section: components
-cssPrefix: pf-c-masthead
+cssPrefix: pf-v5-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
 ---
 

package/src/components/Menu/Menu.tsx

@@ -139,12 +139,11 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
   handleDrilldownTransition = (event: TransitionEvent) => {
     const current = this.menuRef.current;
-
     if (
       !current ||
-      (current !== (event.target as HTMLElement).closest('.pf-c-menu') &&
-        !Array.from(current.getElementsByClassName('pf-v5-c-menu')).includes(
-          (event.target as HTMLElement).closest('.pf-c-menu')
+      (current !== (event.target as HTMLElement).closest(`.${styles.menu}`) &&
+        !Array.from(current.getElementsByClassName(styles.menu)).includes(
+          (event.target as HTMLElement).closest(`.${styles.menu}`)
         ))
     ) {
       return;
@@ -163,9 +162,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
         // if the drilldown transition ends on the same menu, do not focus the first item
         return;
       }
-
       const nextTarget = nextMenuChildren.filter(
-        (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+        (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
       )[0].firstChild;
 
       (nextTarget as HTMLElement).focus();
@@ -178,10 +176,10 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const activeElement = document.activeElement;
 
     if (
-      (event.target as HTMLElement).closest('.pf-c-menu') !== this.activeMenu &&
-      !(event.target as HTMLElement).classList.contains('pf-c-breadcrumb__link')
+      (event.target as HTMLElement).closest(`.${styles.menu}`) !== this.activeMenu &&
+      !(event.target as HTMLElement).classList.contains('pf-v5-c-breadcrumb__link')
     ) {
-      this.activeMenu = (event.target as HTMLElement).closest('.pf-c-menu');
+      this.activeMenu = (event.target as HTMLElement).closest(`.${styles.menu}`);
       this.setState({ disableHover: true });
     }
 
@@ -192,8 +190,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const parentMenu = this.activeMenu;
     const key = event.key;
     const isFromBreadcrumb =
-      activeElement.classList.contains('pf-c-breadcrumb__link') ||
-      activeElement.classList.contains('pf-c-dropdown__toggle');
+      activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
+      activeElement.classList.contains('pf-v5-c-dropdown__toggle');
 
     if (key === ' ' || key === 'Enter') {
       event.preventDefault();
@@ -204,10 +202,10 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
           (parentMenu.parentElement.firstChild as HTMLElement).tabIndex = 0;
           this.setState({ transitionMoveTarget: parentMenu.parentElement.firstChild as HTMLElement });
         } else {
-          if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains('pf-c-menu')) {
+          if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains(styles.menu)) {
             const childItems = Array.from(
               activeElement.nextElementSibling.getElementsByTagName('UL')[0].children
-            ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+            ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
 
             (activeElement as HTMLElement).tabIndex = -1;
             (childItems[0].firstChild as HTMLElement).tabIndex = 0;
@@ -225,13 +223,13 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     if (isDrilldown) {
       return this.activeMenu
         ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter(
-            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
           )
         : [];
     } else {
       return this.menuRef.current
         ? Array.from(this.menuRef.current.getElementsByTagName('LI')).filter(
-            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
           )
         : [];
     }
@@ -297,19 +295,19 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             isActiveElement={(element: Element) =>
               document.activeElement.closest('li') === element || // if element is a basic MenuItem
               document.activeElement.parentElement === element ||
-              document.activeElement.closest('.pf-c-menu__search') === element || // if element is a MenuSearch
+              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?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
+              ((navigableElement.firstChild as Element)?.tagName === 'LABEL' &&
                 navigableElement.querySelector('input')) || // for MenuItem checkboxes
               (navigableElement.firstChild as Element)
             }
             noHorizontalArrowHandling={
               document.activeElement &&
-              (document.activeElement.classList.contains('pf-c-breadcrumb__link') ||
-                document.activeElement.classList.contains('pf-c-dropdown__toggle'))
+              (document.activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
+                document.activeElement.classList.contains('pf-v5-c-dropdown__toggle'))
             }
             noEnterHandling
             noSpaceHandling

package/src/components/Menu/MenuContainer.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Popper } from '../../helpers/Popper/Popper';
+
+export interface MenuPopperProps {
+  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+}
+export interface MenuContainerProps {
+  /** Menu to be rendered */
+  menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  /** Reference to the menu */
+  menuRef: React.RefObject<any>;
+  /** Toggle to be rendered */
+  toggle: React.ReactNode;
+  /** Reference to the toggle */
+  toggleRef: React.RefObject<any>;
+  /** Flag to indicate if menu is opened.*/
+  isOpen: boolean;
+  /** Callback to change the open state of the menu.
+   * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onOpenChangeKeys?: string[];
+  /** z-index of the dropdown menu */
+  zIndex?: number;
+  /** Additional properties to pass to the Popper */
+  popperProps?: MenuPopperProps;
+}
+
+/**
+ * Container that links a menu and menu toggle together, to handle basic keyboard input and control the opening and closing of a menu.
+ * This component is currently in beta and is subject to change.
+ */
+export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
+  menu,
+  menuRef,
+  isOpen,
+  toggle,
+  toggleRef,
+  onOpenChange,
+  zIndex = 9999,
+  popperProps,
+  onOpenChangeKeys = ['Escape', 'Tab']
+}: MenuContainerProps) => {
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      // Close the menu on tab or escape if onOpenChange is provided
+      if (
+        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
+      ) {
+        if (onOpenChangeKeys.includes(event.key)) {
+          onOpenChange(false);
+          toggleRef.current?.focus();
+        }
+      }
+    };
+
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector(
+            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+          );
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
+      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
+      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
+        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+          onOpenChange(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
+    };
+  }, [isOpen, menuRef, onOpenChange, onOpenChangeKeys, toggleRef]);
+
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      zIndex={zIndex}
+      {...popperProps}
+    />
+  );
+};
+MenuContainer.displayName = 'MenuContainer';

package/src/components/Menu/MenuGroup.tsx

@@ -28,7 +28,7 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
 }: MenuGroupProps) => {
   const Wrapper = typeof label === 'function' ? label : HeadingLevel;
   return (
-    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+    <section {...props} className={css(styles.menuGroup, className)} ref={innerRef}>
       <>
         {['function', 'string'].includes(typeof label) ? (
           <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>

package/src/components/Menu/MenuItem.tsx

@@ -24,7 +24,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** @beta Flag indicating the item has a checkbox */
+  /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;
@@ -193,7 +193,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
         const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
-          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
         );
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
@@ -348,7 +348,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
               {hasCheckbox && (
-                <span className={css('pf-c-menu__item-check')}>
+                <span className={css(styles.menuItemCheck)}>
                   <Checkbox
                     id={randomId}
                     component="span"

package/src/components/Menu/MenuSearchInput.tsx

@@ -10,6 +10,6 @@ export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
 
 export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
   // Update to use the styles object when core adds the class
-  <div {...props} className={css('pf-c-menu__search-input', props.className)} ref={ref} />
+  <div {...props} className={css('pf-v5-c-menu__search-input', props.className)} ref={ref} />
 ));
 MenuSearchInput.displayName = 'MenuSearchInput';

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

@@ -5,7 +5,7 @@ exports[`Menu should render Menu successfully 1`] = `
   <div
     class="pf-v5-c-menu"
     data-ouia-component-id="OUIA-Generated-Menu-1"
-    data-ouia-component-type="PF4/Menu"
+    data-ouia-component-type="PF5/Menu"
     data-ouia-safe="true"
   >
     content

package/src/components/Menu/examples/Menu.md

@@ -2,8 +2,20 @@
 id: Menu
 section: components
 subsection: menus
-cssPrefix: pf-c-menu
-propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent', 'MenuSearch', 'MenuSearchInput', 'MenuGroup']
+cssPrefix: pf-v5-c-menu
+propComponents:
+  [
+    'Menu',
+    'MenuList',
+    'MenuItem',
+    'MenuItemAction',
+    'MenuContent',
+    'MenuSearch',
+    'MenuSearchInput',
+    'MenuGroup',
+    'MenuContainer',
+    'MenuPopperProps'
+  ]
 ouia: true
 ---
 
@@ -81,7 +93,7 @@ Use the `description` property to add short descriptive text below any menu item
 
 Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
 
-```ts file="./MenuWithCheckbox.tsx" isBeta
+```ts file="./MenuWithCheckbox.tsx"
 
 ```