@patternfly/react-core 5.0.0-alpha.37 → 5.0.0-alpha.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.37",
+  "version": "5.0.0-alpha.39",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "67f588da8b7b8858729deeb6472e63b88da4d3cc"
+  "gitHead": "628b8d06a7a1438eb2f6908ff559fe90ac9e973a"
 }

package/src/components/DataList/DataList.tsx

@@ -20,11 +20,6 @@ export enum DataListWrapModifier {
   breakWord = 'breakWord'
 }
 
-export interface SelectableRowObject {
-  /** Callback that executes when the screen reader accessible element receives a change event */
-  onChange: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
-}
-
 export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
   /** Content rendered inside the DataList list */
   children?: React.ReactNode;
@@ -43,14 +38,14 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   /** Determines which wrapping modifier to apply to the DataList */
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
-  selectableRow?: SelectableRowObject;
+  onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
 }
 
 interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
   updateSelectedDataListItem: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
-  selectableRow?: SelectableRowObject;
+  onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
 }
 
 export const DataListContext = React.createContext<Partial<DataListContextProps>>({
@@ -84,7 +79,7 @@ export class DataList extends React.Component<DataListProps> {
       isCompact,
       wrapModifier,
       gridBreakpoint,
-      selectableRow,
+      onSelectableRowChange,
       ...props
     } = this.props;
     const isSelectable = onSelectDataListItem !== undefined;
@@ -99,7 +94,7 @@ export class DataList extends React.Component<DataListProps> {
           isSelectable,
           selectedDataListItemId,
           updateSelectedDataListItem,
-          selectableRow
+          onSelectableRowChange
         }}
       >
         <ul

package/src/components/DataList/DataListItem.tsx

@@ -45,7 +45,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
     } = this.props;
     return (
       <DataListContext.Consumer>
-        {({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, selectableRow }) => {
+        {({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, onSelectableRowChange }) => {
           const selectDataListItem = (event: React.MouseEvent) => {
             let target: any = event.target;
             while (event.currentTarget !== target) {
@@ -91,12 +91,12 @@ export class DataListItem extends React.Component<DataListItemProps> {
               {...(isSelectable && isSelected && { 'aria-selected': true })}
               {...props}
             >
-              {selectableRow && (
+              {onSelectableRowChange && (
                 <input
                   className="pf-screen-reader"
                   type="radio"
                   checked={isSelected}
-                  onChange={(event) => selectableRow.onChange(event, id)}
+                  onChange={(event) => onSelectableRowChange(event, id)}
                   tabIndex={-1}
                   {...selectableInputAriaProps}
                 />

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

@@ -50,7 +50,7 @@ describe('DataList', () => {
 
   test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
         <DataListItem>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -85,7 +85,7 @@ describe('DataList', () => {
     const user = userEvent.setup();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
         <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -104,7 +104,7 @@ describe('DataList', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
         <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -118,7 +118,7 @@ describe('DataList', () => {
 
   test('Item applies selectableInputAriaLabel to the hidden input', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
         <DataListItem selectableInputAriaLabel="Data list item label test">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -134,7 +134,7 @@ describe('DataList', () => {
 
   test('Item defaults to labelling its input using its aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
         <DataListItem aria-labelledby="test-id">
           <p id="test-id">Test cell content</p>
         </DataListItem>
@@ -148,7 +148,7 @@ describe('DataList', () => {
 
   test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
         <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
           <p id="test-id">Test cell content</p>
         </DataListItem>

package/src/components/DataList/examples/DataList.md

@@ -5,7 +5,6 @@ cssPrefix: pf-c-data-list
 propComponents:
   [
     'DataList',
-    'SelectableRowObject',
     'DataListAction',
     'DataListCell',
     'DataListCheck',

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -47,7 +47,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
         aria-label="selectable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
-        selectableRow={{ onChange: handleInputChange }}
+        onSelectableRowChange={handleInputChange}
       >
         <DataListItem aria-labelledby="selectable-action-item1" id="item1">
           <DataListItemRow>

package/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>
       )

package/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();
   });

package/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>

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -9,13 +9,15 @@ propComponents:
     'OverflowMenuControl',
     'OverflowMenuDropdownItem',
     'OverflowMenuGroup',
-    'OverflowMenuItem',
+    'OverflowMenuItem'
   ]
 ---
 
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Examples
 
@@ -29,9 +31,11 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class SimpleOverflowMenu extends React.Component {
   constructor(props) {
@@ -39,12 +43,12 @@ class SimpleOverflowMenu extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -54,19 +58,19 @@ class SimpleOverflowMenu extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
         Item 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
         Item 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
         Item 3
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item4" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
         Item 4
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item5" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="item5" isShared>
         Item 5
       </OverflowMenuDropdownItem>
     ];
@@ -82,15 +86,28 @@ class SimpleOverflowMenu extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Simple example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -108,9 +125,13 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
@@ -121,12 +142,12 @@ class OverflowMenuGroupTypes extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -136,31 +157,31 @@ class OverflowMenuGroupTypes extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
         Item 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
         Item 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
         Item 3
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="primary" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="primary" isShared>
         Primary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="secondary" isShared>
+      <OverflowMenuDropdownItem itemId={4} key="secondary" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="tertiary" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action1" isShared>
+      <OverflowMenuDropdownItem itemId={6} key="action1" isShared>
         Action 1
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action2" isShared>
+      <OverflowMenuDropdownItem itemId={7} key="action2" isShared>
         Action 2
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action3" isShared>
+      <OverflowMenuDropdownItem itemId={8} key="action3" isShared>
         Action 3
       </OverflowMenuDropdownItem>
     ];
@@ -202,15 +223,28 @@ class OverflowMenuGroupTypes extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Group example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -228,9 +262,13 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
@@ -241,12 +279,12 @@ class OverflowMenuAdditionalOptions extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -256,25 +294,27 @@ class OverflowMenuAdditionalOptions extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="1" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="1" isShared>
         Primary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="2" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="2" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="3" isShared>
+      <OverflowMenuDropdownItem itemId={2} key="3" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="4" isShared>
+      <OverflowMenuDropdownItem itemId={3} key="4" isShared>
         Action 4
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="5" isShared>
+      <OverflowMenuDropdownItem itemId={4} key="5" isShared>
         Action 5
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="6" isShared>
+      <OverflowMenuDropdownItem itemId={5} key="6" isShared>
         Action 6
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="7">Action 7</OverflowMenuDropdownItem>
+      <OverflowMenuDropdownItem itemId={6} key="7">
+        Action 7
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -309,15 +349,28 @@ class OverflowMenuAdditionalOptions extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Multiple group example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -335,9 +388,13 @@ import {
   OverflowMenuContent,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OverflowMenuDropdownItem
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Button,
+  ButtonVariant
 } from '@patternfly/react-core';
-import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class OverflowMenuPersist extends React.Component {
   constructor(props) {
@@ -345,12 +402,12 @@ class OverflowMenuPersist extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
-    this.onSelect = event => {
+    this.onSelect = (event, itemId) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -360,13 +417,15 @@ class OverflowMenuPersist extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="secondary" isShared>
+      <OverflowMenuDropdownItem itemId={0} key="secondary" isShared>
         Secondary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>
+      <OverflowMenuDropdownItem itemId={1} key="tertiary" isShared>
         Tertiary
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action">Action 4</OverflowMenuDropdownItem>
+      <OverflowMenuDropdownItem itemId={2} key="action">
+        Action 4
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -384,15 +443,28 @@ class OverflowMenuPersist extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <Dropdown
+          <DropdownNext
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                aria-label="Persistent example overflow menu"
+                variant="plain"
+                onClick={this.onToggle}
+                isExpanded={isOpen}
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) =>
+              this.setState({
+                isOpen
+              })
+            }
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </DropdownNext>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -407,4 +479,5 @@ By passing in the `breakpointReference` property, the overflow menu's breakpoint
 You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.
 
 ```ts file="./OverflowMenuBreakpointOnContainer.tsx"
+
 ```