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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.37",
+  "version": "5.0.0-alpha.38",
   "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": "084195b009f7c1a02b1dde8918218ac3b0e0d6fb"
 }

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"
+
 ```

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -6,18 +6,19 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   OverflowMenuDropdownItem,
-  Dropdown,
-  KebabToggle,
+  MenuToggle,
   Slider
 } 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';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [containerWidth, setContainerWidth] = React.useState(100);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
   const onSelect = () => {
@@ -36,19 +37,19 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
   };
 
   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={4} key="item5" isShared>
       Item 5
     </OverflowMenuDropdownItem>
   ];
@@ -83,15 +84,24 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl>
-            <Dropdown
+            <DropdownNext
               onSelect={onSelect}
-              toggle={<KebabToggle onToggle={onToggle} />}
+              toggle={toggleRef => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="Breakpoint on container example overflow menu"
+                  variant="plain"
+                  onClick={onToggle}
+                  isExpanded={isOpen}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              isFlipEnabled
-              menuAppendTo="parent"
-            />
+              onOpenChange={isOpen => setIsOpen(isOpen)}
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </DropdownNext>
           </OverflowMenuControl>
         </OverflowMenu>
       </div>

package/src/components/Toolbar/examples/Toolbar.md

@@ -10,6 +10,8 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Examples