@patternfly/react-core 5.0.0-alpha.87 → 5.0.0-alpha.89

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -25,15 +25,14 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   ToolbarItem,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle,
-  DropdownPosition
-} from '@patternfly/react-core/deprecated';
-
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '../DashboardWrapper';
 import DashboardHeader from '../DashboardHeader';
 
@@ -146,8 +145,8 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     setDrawerExpanded(!isDrawerExpanded);
   };
 
-  const onDropdownToggle = (id: React.Key, isActive: boolean) => {
-    if (isActive) {
+  const onDropdownToggle = (id: React.Key) => {
+    if (id && openDropdownKey !== id) {
       setOpenDropdownKey(id);
       return;
     }
@@ -218,46 +217,53 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     </ToolbarItem>
   );
 
-  const notificationDrawerActions = [
-    <DropdownItemDeprecated key="markAllRead" onClick={markAllNotificationsRead} component="button">
-      Mark all read
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="clearAll" onClick={removeAllNotifications} component="button">
-      Clear all
-    </DropdownItemDeprecated>
-  ];
-
+  const notificationDrawerActions = (
+    <>
+      <DropdownItem key="markAllRead" onClick={markAllNotificationsRead}>
+        Mark all read
+      </DropdownItem>
+      <DropdownItem key="clearAll" onClick={removeAllNotifications}>
+        Clear all
+      </DropdownItem>
+    </>
+  );
   const notificationDrawerDropdownItems = (key: React.Key) => [
-    <DropdownItemDeprecated key="markRead" component="button" onClick={() => markNotificationRead(key)}>
+    <DropdownItem key={`markRead-${key}`} onClick={() => markNotificationRead(key)}>
       Mark as read
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button" onClick={() => removeNotification(key)}>
+    </DropdownItem>,
+    <DropdownItem key={`clear-${key}`} onClick={() => removeNotification(key)}>
       Clear
-    </DropdownItemDeprecated>
+    </DropdownItem>
   ];
 
   const notificationDrawer = (
     <NotificationDrawer>
       <NotificationDrawerHeader count={getUnreadNotificationsNumber()} onClose={(_event) => setDrawerExpanded(false)}>
-        <DropdownDeprecated
-          onSelect={onDropdownSelect}
-          toggle={
-            <KebabToggle
-              onToggle={(_event: any, isActive: boolean) => onDropdownToggle('dropdown-toggle-id-0', isActive)}
-              id="dropdown-toggle-id-0"
-            />
-          }
-          isOpen={openDropdownKey === 'dropdown-toggle-id-0'}
-          isPlain
-          dropdownItems={notificationDrawerActions}
+        <Dropdown
           id="notification-drawer-0"
-          position={DropdownPosition.right}
-        />
+          isOpen={openDropdownKey === 'dropdown-toggle-id-0'}
+          onSelect={onDropdownSelect}
+          popperProps={{ position: 'right' }}
+          onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={openDropdownKey === 'dropdown-toggle-id-0'}
+              variant="plain"
+              onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
+              aria-label="Notification drawer actions"
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{notificationDrawerActions}</DropdownList>
+        </Dropdown>
       </NotificationDrawerHeader>
       <NotificationDrawerBody>
         {notifications.length !== 0 && (
           <NotificationDrawerList>
-            {notifications.map(({ key, variant, title, srTitle, description, timestamp }) => (
+            {notifications.map(({ key, variant, title, srTitle, description, timestamp }, index) => (
               <NotificationDrawerListItem
                 key={key}
                 variant={variant}
@@ -265,20 +271,26 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                 onClick={() => markNotificationRead(key)}
               >
                 <NotificationDrawerListItemHeader variant={variant} title={title} srTitle={srTitle}>
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
-                    onSelect={onDropdownSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isActive: boolean) => onDropdownToggle(key, isActive)}
-                        id={key.toString()}
-                      />
-                    }
-                    isOpen={openDropdownKey === key}
-                    isPlain
-                    dropdownItems={notificationDrawerDropdownItems(key)}
+                  <Dropdown
                     id={key.toString()}
-                  />
+                    isOpen={openDropdownKey === key}
+                    onSelect={onDropdownSelect}
+                    popperProps={{ position: 'right' }}
+                    onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        isExpanded={openDropdownKey === key}
+                        variant="plain"
+                        onClick={() => onDropdownToggle(key)}
+                        aria-label={`Notification ${index + 1} actions`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{notificationDrawerDropdownItems(key)}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp={timestamp}> {description} </NotificationDrawerListItemBody>
               </NotificationDrawerListItem>

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/DashboardWrapper.js

@@ -42,7 +42,7 @@ export default class DashboardWrapper extends React.Component {
       activeItem: 1
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });

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 = (