@patternfly/react-core 5.0.0-alpha.113 → 5.0.0-alpha.115

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

@@ -13,7 +13,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -103,7 +103,7 @@ exports[`DualListSelector basic 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -130,7 +130,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -156,7 +156,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -183,7 +183,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -217,7 +217,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -262,7 +262,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -353,7 +353,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -380,7 +380,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -407,7 +407,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -434,7 +434,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -468,7 +468,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -514,7 +514,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -615,7 +615,7 @@ exports[`DualListSelector with actions 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -642,7 +642,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -668,7 +668,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -694,7 +694,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -728,7 +728,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -839,7 +839,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -929,7 +929,7 @@ exports[`DualListSelector with custom status 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -956,7 +956,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -982,7 +982,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1009,7 +1009,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1043,7 +1043,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1088,7 +1088,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1219,7 +1219,7 @@ exports[`DualListSelector with search inputs 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1246,7 +1246,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -1272,7 +1272,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1299,7 +1299,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1333,7 +1333,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1419,7 +1419,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1584,7 +1584,7 @@ exports[`DualListSelector with tree 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1611,7 +1611,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -1637,7 +1637,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1664,7 +1664,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1698,7 +1698,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -27,10 +27,10 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
   icon,
   ...props
 }: EmptyStateHeaderProps) => (
-  <div className={css('pf-c-empty-state__header', className)} {...props}>
+  <div className={css('pf-v5-c-empty-state__header', className)} {...props}>
     {icon}
     {(titleText || children) && (
-      <div className={css('pf-c-empty-state__title')}>
+      <div className={css('pf-v5-c-empty-state__title')}>
         {titleText && (
           <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
         )}

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

@@ -9,10 +9,10 @@ exports[`EmptyState Full height 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -29,7 +29,7 @@ exports[`EmptyState Full height 1`] = `
 exports[`EmptyState Header with icon 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__header"
+    class="pf-v5-c-empty-state__header"
   >
     <div
       class="pf-v5-c-empty-state__icon"
@@ -59,10 +59,10 @@ exports[`EmptyState Main 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -123,10 +123,10 @@ exports[`EmptyState Main variant large 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -149,10 +149,10 @@ exports[`EmptyState Main variant small 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -175,10 +175,10 @@ exports[`EmptyState Main variant xs 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"

package/src/components/Form/FormAlert.tsx

@@ -13,9 +13,9 @@ export const FormAlert: React.FunctionComponent<FormAlertProps> = ({
   className = '',
   ...props
 }: FormAlertProps) => (
-  // There are currently no associated styles with the pf-c-form_alert class.
+  // There are currently no associated styles with the pf-v5-c-form_alert class.
   // Therefore, it does not exist in react-styles
-  <div {...props} className={css('pf-c-form__alert', className)}>
+  <div {...props} className={css('pf-v5-c-form__alert', className)}>
     {children}
   </div>
 );

package/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Form Alert component should render form group required variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__alert"
+    class="pf-v5-c-form__alert"
   />
 </DocumentFragment>
 `;

package/src/components/Hint/__tests__/Hint.test.tsx

@@ -14,7 +14,7 @@ test('renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('renders with class pf-c-hint', () => {
+test('renders with class pf-v5-c-hint', () => {
   render(<Hint>Test</Hint>);
 
   const hint = screen.getByText('Test');
@@ -46,7 +46,7 @@ test('renders actions options', () => {
   expect(actions).toBeVisible();
 });
 
-test('renders with class pf-c-hint__actions if there is an action prop', () => {
+test('renders with class pf-v5-c-hint__actions if there is an action prop', () => {
   render(<Hint actions="actions">Test</Hint>);
 
   const hint = screen.getByText('actions');

package/src/components/Hint/__tests__/HintBody.test.tsx

@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__body', () => {
+test('renders with class pf-v5-c-hint__body', () => {
   render(<HintBody>Hint Body Test</HintBody>);
 
   const body = screen.getByText('Hint Body Test');

package/src/components/Hint/__tests__/HintFooter.test.tsx

@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__footer', () => {
+test('renders with class pf-v5-c-hint__footer', () => {
   render(<HintFooter>Hint Body Test</HintFooter>);
 
   const body = screen.getByText('Hint Body Test');

package/src/components/Hint/__tests__/HintTitle.test.tsx

@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__title', () => {
+test('renders with class pf-v5-c-hint__title', () => {
   render(<HintTitle>Hint Body Test</HintTitle>);
 
   const body = screen.getByText('Hint Body Test');

package/src/components/JumpLinks/JumpLinks.tsx

@@ -222,7 +222,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       {...props}
     >
       <div className={styles.jumpLinksMain}>
-        <div className={css('pf-c-jump-links__header')}>
+        <div className={css('pf-v5-c-jump-links__header')}>
           {expandable && (
             <div className={styles.jumpLinksToggle}>
               <Button

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

@@ -10,7 +10,7 @@ exports[`expandable vertical with subsection 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__toggle"
@@ -169,7 +169,7 @@ exports[`jumplinks centered 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       />
       <ul
         class="pf-v5-c-jump-links__list"
@@ -231,7 +231,7 @@ exports[`jumplinks with label 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__label"
@@ -298,7 +298,7 @@ exports[`simple jumplinks 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       />
       <ul
         class="pf-v5-c-jump-links__list"
@@ -360,7 +360,7 @@ exports[`vertical with label 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__label"

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,7 +295,7 @@ 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) =>
@@ -308,8 +306,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             }
             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/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

@@ -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';