@patternfly/react-core 5.0.0-alpha.10 → 5.0.0-alpha.12

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -98,7 +98,7 @@ class BasicNotificationDrawer extends React.Component {
       showNotifications: true,
       isActionsMenuOpen: null
     };
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -110,7 +110,7 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -238,7 +238,7 @@ class BasicNotificationDrawer extends React.Component {
     const headerToolbar = (
       <Toolbar>
         <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} alignment={{ default: 'alignRight' }}>
+          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
               <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
                 <NotificationBadge
@@ -368,7 +368,9 @@ class BasicNotificationDrawer extends React.Component {
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
           <Dropdown
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />}
+            toggle={
+              <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
+            }
             isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-0']}
             isPlain
             dropdownItems={notificationDrawerActions}
@@ -392,7 +394,12 @@ class BasicNotificationDrawer extends React.Component {
                   <Dropdown
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
-                    toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-1', isOpen)} id="toggle-id-1" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-1', isOpen)}
+                        id="toggle-id-1"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-1']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -416,7 +423,12 @@ class BasicNotificationDrawer extends React.Component {
                   <Dropdown
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
-                    toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-2', isOpen)} id="toggle-id-2" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-2', isOpen)}
+                        id="toggle-id-2"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-2']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -441,7 +453,12 @@ class BasicNotificationDrawer extends React.Component {
                   <Dropdown
                     position={DropdownPosition.right}
                     onSelect={this.onSelect}
-                    toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-3', isOpen)} id="toggle-id-3" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-3', isOpen)}
+                        id="toggle-id-3"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-3']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -466,7 +483,12 @@ class BasicNotificationDrawer extends React.Component {
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={this.onSelect}
-                    toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-4', isOpen)} id="toggle-id-4" />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event, isOpen) => this.onToggle('toggle-id-4', isOpen)}
+                        id="toggle-id-4"
+                      />
+                    }
                     isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-4']}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems}
@@ -622,7 +644,7 @@ class GroupedNotificationDrawer extends React.Component {
         'group-3': null
       }
     };
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -634,7 +656,7 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -805,7 +827,7 @@ class GroupedNotificationDrawer extends React.Component {
     const headerToolbar = (
       <Toolbar>
         <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} alignment={{ default: 'alignRight' }}>
+          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
               <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
                 <NotificationBadge
@@ -935,7 +957,9 @@ class GroupedNotificationDrawer extends React.Component {
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
           <Dropdown
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />}
+            toggle={
+              <KebabToggle onToggle={(_event, isOpen) => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />
+            }
             isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-0']}
             isPlain
             dropdownItems={notificationDrawerActions}
@@ -967,7 +991,10 @@ class GroupedNotificationDrawer extends React.Component {
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-5', isOpen)} id="toggle-id-5" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-5', isOpen)}
+                            id="toggle-id-5"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-5']}
                         isPlain
@@ -993,7 +1020,10 @@ class GroupedNotificationDrawer extends React.Component {
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-6', isOpen)} id="toggle-id-6" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-6', isOpen)}
+                            id="toggle-id-6"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-6']}
                         isPlain
@@ -1020,7 +1050,10 @@ class GroupedNotificationDrawer extends React.Component {
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-7', isOpen)} id="toggle-id-7" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-7', isOpen)}
+                            id="toggle-id-7"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-7']}
                         isPlain
@@ -1047,7 +1080,10 @@ class GroupedNotificationDrawer extends React.Component {
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-8', isOpen)} id="toggle-id-8" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-8', isOpen)}
+                            id="toggle-id-8"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-8']}
                         isPlain
@@ -1082,7 +1118,10 @@ class GroupedNotificationDrawer extends React.Component {
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-9', isOpen)} id="toggle-id-9" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-9', isOpen)}
+                            id="toggle-id-9"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-9']}
                         isPlain
@@ -1108,7 +1147,10 @@ class GroupedNotificationDrawer extends React.Component {
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-10', isOpen)} id="toggle-id-10" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-10', isOpen)}
+                            id="toggle-id-10"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-10']}
                         isPlain
@@ -1135,7 +1177,10 @@ class GroupedNotificationDrawer extends React.Component {
                         position={DropdownPosition.right}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-11', isOpen)} id="toggle-id-11" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-11', isOpen)}
+                            id="toggle-id-11"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-11']}
                         isPlain
@@ -1162,7 +1207,10 @@ class GroupedNotificationDrawer extends React.Component {
                         direction={DropdownDirection.up}
                         onSelect={this.onSelect}
                         toggle={
-                          <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-12', isOpen)} id="toggle-id-12" />
+                          <KebabToggle
+                            onToggle={(_event, isOpen) => this.onToggle('toggle-id-12', isOpen)}
+                            id="toggle-id-12"
+                          />
                         }
                         isOpen={isActionsMenuOpen && isActionsMenuOpen['toggle-id-12']}
                         isPlain

package/src/demos/PrimaryDetail.md

@@ -116,7 +116,7 @@ class PrimaryDetailFullPage extends React.Component {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -137,7 +137,7 @@ class PrimaryDetailFullPage extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });
@@ -576,7 +576,7 @@ class PrimaryDetailContentPadding extends React.Component {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -597,7 +597,7 @@ class PrimaryDetailContentPadding extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });
@@ -1033,7 +1033,7 @@ class PrimaryDetailCardView extends React.Component {
       activeItem: 0
     };
 
-    this.onToolbarDropdownToggle = isLowerToolbarDropdownOpen => {
+    this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
       this.setState(prevState => ({
         isLowerToolbarDropdownOpen
       }));
@@ -1045,7 +1045,7 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onToolbarKebabDropdownToggle = isLowerToolbarKebabDropdownOpen => {
+    this.onToolbarKebabDropdownToggle = (_event, isLowerToolbarKebabDropdownOpen) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen
       });
@@ -1227,7 +1227,7 @@ class PrimaryDetailCardView extends React.Component {
       }));
     };
 
-    this.onSplitButtonToggle = isOpen => {
+    this.onSplitButtonToggle = (_event, isOpen) => {
       this.setState({
         splitButtonDropdownIsOpen: isOpen
       });
@@ -1475,7 +1475,7 @@ class PrimaryDetailCardView extends React.Component {
                   onSelect={e => this.onCardKebabDropdownSelect(key, e)}
                   toggle={
                     <KebabToggle
-                      onToggle={(isCardKebabDropdownOpen, event) =>
+                      onToggle={(event, isCardKebabDropdownOpen) =>
                         this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
                       }
                     />
@@ -1777,7 +1777,7 @@ class PrimaryDetailDataListInCard extends React.Component {
       isExpanded: false
     };
 
-    this.onDropdownToggle = isOpen => {
+    this.onDropdownToggle = (_event, isOpen) => {
       this.setState({
         isDropdownOpen: isOpen
       });
@@ -2060,7 +2060,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -2081,7 +2081,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });

package/src/demos/Toolbar.md

@@ -80,13 +80,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       mobileView: window.innerWidth >= 1450 ? false : true
     };
 
-    this.onContainerToggle = isExpanded => {
+    this.onContainerToggle = (_event, isExpanded) => {
       this.setState({
         containerExpanded: isExpanded
       });
     };
 
-    this.onContainerToggleMobile = isExpanded => {
+    this.onContainerToggleMobile = (_event, isExpanded) => {
       this.setState({
         containerExpandedMobile: isExpanded
       });
@@ -106,13 +106,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onOptionToggle = isExpanded => {
+    this.onOptionToggle = (_event, isExpanded) => {
       this.setState({
         optionExpanded: isExpanded
       });
     };
 
-    this.onOptionToggleMobile = isExpanded => {
+    this.onOptionToggleMobile = (_event, isExpanded) => {
       this.setState({
         optionExpandedMobile: isExpanded
       });
@@ -130,13 +130,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onExternalToggle = isExpanded => {
+    this.onExternalToggle = (_event, isExpanded) => {
       this.setState({
         externalExpanded: isExpanded
       });
     };
 
-    this.onExternalToggleMobile = isExpanded => {
+    this.onExternalToggleMobile = (_event, isExpanded) => {
       this.setState({
         externalExpandedMobile: isExpanded
       });
@@ -154,13 +154,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onDownloadToggle = isExpanded => {
+    this.onDownloadToggle = (_event, isExpanded) => {
       this.setState({
         downloadExpanded: isExpanded
       });
     };
 
-    this.onDownloadToggleMobile = isExpanded => {
+    this.onDownloadToggleMobile = (_event, isExpanded) => {
       this.setState({
         downloadExpandedMobile: isExpanded
       });
@@ -415,7 +415,12 @@ class ConsoleLogViewerToolbar extends React.Component {
           <Tooltip position="top" content={<div>Options</div>}>
             <Dropdown
               toggle={
-                <DropdownToggle aria-label="Options" id="option-toggle-mobile" onToggle={this.onOptionToggleMobile} icon={<CogIcon />} />
+                <DropdownToggle
+                  aria-label="Options"
+                  id="option-toggle-mobile"
+                  onToggle={this.onOptionToggleMobile}
+                  icon={<CogIcon />}
+                />
               }
               isOpen={optionExpandedMobile}
               dropdownItems={optionDropdownItems}
@@ -525,8 +530,8 @@ class ConsoleLogViewerToolbar extends React.Component {
 
     const items = (
       <React.Fragment>
-        <ToolbarGroup alignment={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
-        <ToolbarGroup alignment={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
       </React.Fragment>
     );
 

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

@@ -237,7 +237,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           onSelect={onDropdownSelect}
           toggle={
             <KebabToggle
-              onToggle={isActive => onDropdownToggle('dropdown-toggle-id-0', isActive)}
+              onToggle={(_event: any, isActive: boolean) => onDropdownToggle('dropdown-toggle-id-0', isActive)}
               id="dropdown-toggle-id-0"
             />
           }
@@ -262,7 +262,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                   <Dropdown
                     position={DropdownPosition.right}
                     onSelect={onDropdownSelect}
-                    toggle={<KebabToggle onToggle={isActive => onDropdownToggle(key, isActive)} id={key.toString()} />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event: any, isActive: boolean) => onDropdownToggle(key, isActive)}
+                        id={key.toString()}
+                      />
+                    }
                     isOpen={openDropdownKey === key}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems(key)}

package/src/demos/examples/DashboardHeader.js

@@ -42,7 +42,7 @@ export default class DashboardHeader extends React.Component {
       activeItem: 0
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -54,7 +54,7 @@ export default class DashboardHeader extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -66,7 +66,7 @@ export default class DashboardHeader extends React.Component {
       });
     };
 
-    this.onFullKebabToggle = isFullKebabDropdownOpen => {
+    this.onFullKebabToggle = (_event, isFullKebabDropdownOpen) => {
       this.setState({
         isFullKebabDropdownOpen
       });
@@ -78,7 +78,7 @@ export default class DashboardHeader extends React.Component {
       });
     };
 
-    this.onAppLauncherToggle = isAppLauncherOpen => {
+    this.onAppLauncherToggle = (_event, isAppLauncherOpen) => {
       this.setState({
         isAppLauncherOpen
       });
@@ -145,7 +145,7 @@ export default class DashboardHeader extends React.Component {
         <ToolbarContent>
           <ToolbarGroup
             variant="icon-button-group"
-            alignment={{ default: 'alignRight' }}
+            align={{ default: 'alignRight' }}
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             {notificationBadge ? (

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

@@ -27,7 +27,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
     setIsTimeOpen(false);
   };
 
-  const onToggleTime = (_value: boolean, _event: any) => {
+  const onToggleTime = (_event: any, _value: boolean) => {
     setIsTimeOpen(!isTimeOpen);
     setIsCalendarOpen(false);
   };

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

@@ -64,7 +64,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -72,7 +72,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -80,7 +80,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -88,7 +88,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -157,7 +157,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -64,7 +64,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -72,7 +72,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -80,7 +80,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -88,7 +88,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -157,7 +157,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -64,7 +64,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -72,7 +72,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -80,7 +80,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -88,7 +88,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -157,7 +157,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -66,7 +66,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -74,7 +74,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -82,7 +82,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -90,7 +90,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -148,7 +148,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>