@patternfly/react-core 5.0.0-alpha.86 → 5.0.0-alpha.88

package/src/demos/examples/DashboardHeader.js

@@ -5,29 +5,28 @@ import {
   Button,
   ButtonVariant,
   Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
   Masthead,
   MastheadToggle,
   MastheadMain,
   MastheadBrand,
   MastheadContent,
+  MenuToggle,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
-  PageToggleButton,
+  PageToggleButton
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import pfColorLogo from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 
@@ -41,39 +40,39 @@ export default class DashboardHeader extends React.Component {
       activeItem: 0
     };
 
-    this.onDropdownToggle = (_event, isDropdownOpen) => {
-      this.setState({
-        isDropdownOpen
-      });
+    this.onDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isDropdownOpen: !prevState.isDropdownOpen
+      }));
     };
 
     this.onDropdownSelect = () => {
       this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
+        isDropdownOpen: false
       });
     };
 
-    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
-      this.setState({
-        isKebabDropdownOpen
-      });
+    this.onKebabDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
+      }));
     };
 
     this.onKebabDropdownSelect = () => {
       this.setState({
-        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
+        isKebabDropdownOpen: false
       });
     };
 
-    this.onFullKebabToggle = (_event, isFullKebabDropdownOpen) => {
-      this.setState({
-        isFullKebabDropdownOpen
-      });
+    this.onFullKebabToggle = () => {
+      this.setState((prevState) => ({
+        isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
+      }));
     };
 
     this.onFullKebabSelect = () => {
       this.setState({
-        isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
+        isFullKebabDropdownOpen: false
       });
     };
   }
@@ -82,41 +81,23 @@ export default class DashboardHeader extends React.Component {
     const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen } = this.state;
     const { notificationBadge } = this.props;
 
-    const kebabDropdownItems = [
-      <DropdownItemDeprecated key="settings">
-        <CogIcon /> Settings
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="help">
-        <HelpIcon /> Help
-      </DropdownItemDeprecated>
-    ];
-
-    const fullKebabItems = [
-      <DropdownGroupDeprecated key="group 2">
-        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 user" component="button">
-          User management
-        </DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-      </DropdownGroupDeprecated>,
-      <Divider key="divider" />,
-      <DropdownItemDeprecated key="settings">
-        <CogIcon /> Settings
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="help">
-        <HelpIcon /> Help
-      </DropdownItemDeprecated>
-    ];
-
-    const userDropdownItems = [
-      <DropdownGroupDeprecated key="group 2">
-        <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 user" component="button">
-          User management
-        </DropdownItemDeprecated>
-        <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-      </DropdownGroupDeprecated>
-    ];
+    const kebabDropdownItems = (
+      <>
+        <DropdownItem>
+          <CogIcon /> Settings
+        </DropdownItem>
+        <DropdownItem>
+          <HelpIcon /> Help
+        </DropdownItem>
+      </>
+    );
+    const userDropdownItems = (
+      <>
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user">User management</DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </>
+    );
 
     const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
@@ -147,38 +128,72 @@ export default class DashboardHeader extends React.Component {
               </ToolbarItem>
             </ToolbarGroup>
             <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-              <DropdownDeprecated
-                isPlain
-                position="right"
-                onSelect={this.onKebabDropdownSelect}
-                toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
+              <Dropdown
                 isOpen={isKebabDropdownOpen}
-                dropdownItems={kebabDropdownItems}
-              />
+                onSelect={this.onKebabDropdownSelect}
+                onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isKebabDropdownOpen}
+                    onClick={this.onKebabDropdownToggle}
+                    variant="plain"
+                    aria-label="Settings and help"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
             </ToolbarItem>
             <ToolbarItem visibility={{ md: 'hidden' }}>
-              <DropdownDeprecated
-                isPlain
-                position="right"
-                onSelect={this.onFullKebabSelect}
-                toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}
+              <Dropdown
                 isOpen={isFullKebabDropdownOpen}
-                dropdownItems={fullKebabItems}
-              />
+                onSelect={this.onFullKebabSelect}
+                onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isFullKebabDropdownOpen}
+                    onClick={this.onFullKebabToggle}
+                    variant="plain"
+                    aria-label="Toolbar menu"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownGroup key="group 2" aria-label="User actions">
+                  <DropdownList>{userDropdownItems}</DropdownList>
+                </DropdownGroup>
+                <Divider />
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-            <DropdownDeprecated
-              isFullHeight
-              onSelect={this.onDropdownSelect}
+            <Dropdown
               isOpen={isDropdownOpen}
-              toggle={
-                <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
+              onSelect={this.onDropdownSelect}
+              onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isDropdownOpen}
+                  onClick={this.onDropdownToggle}
+                  icon={<Avatar src={imgAvatar} alt="" />}
+                  isFullHeight
+                >
                   Ned Username
-                </DropdownToggle>
-              }
-              dropdownItems={userDropdownItems}
-            />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{userDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
-import { CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
+  CalendarMonth,
+  InputGroup,
+  TextInput,
+  Button,
+  Popover,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
@@ -23,7 +29,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
     setIsTimeOpen(false);
   };
 
-  const onToggleTime = (_event: any, _value: boolean) => {
+  const onToggleTime = () => {
     setIsTimeOpen(!isTimeOpen);
     setIsCalendarOpen(false);
   };
@@ -38,35 +44,32 @@ export const DateTimePicker: React.FunctionComponent = () => {
     }
   };
 
-  const onSelectTime = (ev: React.SyntheticEvent<HTMLDivElement>) => {
-    setValueTime(ev.currentTarget.textContent);
+  const onSelectTime = (ev: React.MouseEvent<Element, MouseEvent> | undefined) => {
+    setValueTime(ev?.currentTarget?.textContent as string);
     setIsTimeOpen(!isTimeOpen);
   };
 
-  const timeOptions = times.map((time) => (
-    <DropdownItemDeprecated key={time} component="button" value={`${time}:00`}>
-      {`${time}:00`}
-    </DropdownItemDeprecated>
-  ));
+  const timeOptions = times.map((time) => <DropdownItem key={time}>{`${time}:00`}</DropdownItem>);
 
   const calendar = <CalendarMonth date={new Date(valueDate)} onChange={onSelectCalendar} />;
 
   const time = (
-    <DropdownDeprecated
+    <Dropdown
       onSelect={onSelectTime}
-      toggle={
-        <DropdownToggle
-          aria-label="Toggle the time picker menu"
-          toggleIndicator={null}
-          onToggle={onToggleTime}
-          style={{ padding: '6px 16px' }}
-        >
-          <OutlinedClockIcon />
-        </DropdownToggle>
-      }
       isOpen={isTimeOpen}
-      dropdownItems={timeOptions}
-    />
+      onOpenChange={(isOpen: boolean) => setIsTimeOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleTime}
+          isExpanded={isTimeOpen}
+          aria-label="Time picker"
+          icon={<OutlinedClockIcon aria-hidden="true" />}
+        />
+      )}
+    >
+      <DropdownList>{timeOptions}</DropdownList>
+    </Dropdown>
   );
 
   const calendarButton = (

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -9,6 +9,10 @@ import {
   Card,
   CardBody,
   Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
   Gallery,
   GalleryItem,
   Masthead,
@@ -21,6 +25,7 @@ import {
   MenuList,
   MenuItem,
   MenuToggle,
+  MenuToggleElement,
   Nav,
   NavItem,
   NavList,
@@ -43,15 +48,9 @@ import {
   SearchInput,
   Tooltip
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownToggle,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import { Link } from '@reach/router';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -84,24 +83,24 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsDropdownOpen(isOpen);
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
   };
 
   const onDropdownSelect = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsKebabDropdownOpen(isOpen);
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
   const onKebabDropdownSelect = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsFullKebabDropdownOpen(isOpen);
+  const onFullKebabDropdownToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
   const onFullKebabDropdownSelect = () => {
@@ -361,40 +360,22 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     </Breadcrumb>
   );
 
-  const kebabDropdownItems = [
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
-
-  const fullKebabDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>,
-    <Divider key="divider" />,
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
-
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem key="settings">
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem key="help">
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
   const userDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
   ];
 
   const headerToolbar = (
@@ -420,38 +401,72 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
+            <Dropdown
               isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-            />
+              onSelect={onKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onKebabDropdownToggle}
+                  isExpanded={isKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Settings and help"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={onFullKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
+            <Dropdown
               isOpen={isFullKebabDropdownOpen}
-              dropdownItems={fullKebabDropdownItems}
-            />
+              onSelect={onFullKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onFullKebabDropdownToggle}
+                  isExpanded={isFullKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Toolbar menu"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownGroup key="group 2" aria-label="User actions">
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </DropdownGroup>
+              <Divider />
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <DropdownDeprecated
-            isFullHeight
-            onSelect={onDropdownSelect}
+          <Dropdown
             isOpen={isDropdownOpen}
-            toggle={
-              <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={onDropdownToggle}>
+            onSelect={onDropdownSelect}
+            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onDropdownToggle}
+                isFullHeight
+                isExpanded={isDropdownOpen}
+                icon={<Avatar src={imgAvatar} alt="" />}
+              >
                 Ned Username
-              </DropdownToggle>
-            }
-            dropdownItems={userDropdownItems}
-          />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{userDropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </ToolbarContent>
     </Toolbar>