feat(OverflowMenu): Use next dropdown and dropdownItems

packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
-import { DropdownItem, DropdownItemProps } from '../Dropdown';
+import { DropdownItem, DropdownItemProps } from '../../next/components/Dropdown';
 import { OverflowMenuContext } from './OverflowMenuContext';
 
-export interface OverflowMenuDropdownItemProps extends DropdownItemProps {
+export interface OverflowMenuDropdownItemProps extends Omit<DropdownItemProps, 'ref'> {
   /** Indicates when a dropdown item shows and hides the corresponding list item */
   isShared?: boolean;
-  /** Indicates the index of the list item */
-  index?: number;
+  /** Identifies the component in the dropdown onSelect callback */
+  itemId?: string | number;
 }
 
 export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropdownItemProps> = ({
   children,
   isShared = false,
-  index,
+  itemId,
   ...additionalProps
 }: OverflowMenuDropdownItemProps) => (
   <OverflowMenuContext.Consumer>
     {value =>
       (!isShared || value.isBelowBreakpoint) && (
-        <DropdownItem component="button" index={index} {...additionalProps}>
+        <DropdownItem component="button" itemId={itemId} {...additionalProps}>
           {children}
         </DropdownItem>
       )

packages/react-core/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx

@@ -3,14 +3,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { OverflowMenuDropdownItem } from '../../OverflowMenuDropdownItem';
-import { DropdownArrowContext } from '../../../Dropdown';
 
 describe('OverflowMenuDropdownItem', () => {
   it('should match snapshot', () => {
     const { asFragment } = render(
-      <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
-        <OverflowMenuDropdownItem children={'any'} isShared={false} />
-      </DropdownArrowContext.Provider>
+        <OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />
     );
     expect(asFragment()).toMatchSnapshot();
   });

packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap

@@ -3,19 +3,27 @@
 exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
+    class="pf-c-menu__list-item"
+    data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+    data-ouia-component-type="PF4/DropdownItem"
+    data-ouia-safe="true"
     role="none"
   >
     <button
-      aria-disabled="false"
-      class=""
-      data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-      data-ouia-component-type="PF4/DropdownItem"
-      data-ouia-safe="true"
+      class="pf-c-menu__item"
       role="menuitem"
       tabindex="-1"
       type="button"
     >
-      any
+      <span
+        class="pf-c-menu__item-main"
+      >
+        <span
+          class="pf-c-menu__item-text"
+        >
+          any
+        </span>
+      </span>
     </button>
   </li>
 </DocumentFragment>