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

package/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx

@@ -10,7 +10,6 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -123,15 +122,5 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        isVisible={isOpen}
-        appendTo={containerRef.current || undefined}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -23,7 +23,6 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -266,15 +265,5 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-        appendTo={containerRef.current || undefined}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -60,7 +60,6 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
   const menuRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -199,15 +198,5 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -6,22 +6,21 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<number>(0);
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef?.current?.contains(event.target as Node) || toggleRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef?.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -110,15 +109,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx

@@ -26,7 +26,6 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -248,15 +247,5 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx

@@ -23,7 +23,6 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
   const [toggleSelected, setToggleSelected] = React.useState<string>('basic');
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleToggleSwitch = (selected: boolean, e: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
     setToggleSelected(e.currentTarget.id);
@@ -33,7 +32,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
     if (isOpen && menuRef && menuRef.current && menuRef.current.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef?.current?.focus();
       }
     }
   };
@@ -227,15 +226,12 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
         />
       </ToggleGroup>
       <br />
-      <div ref={containerRef}>
-        <Popper
-          trigger={buildToggle()}
-          popper={menu}
-          appendTo={containerRef.current}
-          isVisible={isOpen}
-          popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
-        />
-      </div>
+      <Popper
+        trigger={buildToggle()}
+        popper={menu}
+        isVisible={isOpen}
+        popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
+      />
     </React.Fragment>
   );
 };

package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx

@@ -34,7 +34,6 @@ export const ComposableFlyout: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -101,15 +100,5 @@ export const ComposableFlyout: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/demos/ComposableMenu/examples/ComposableMultipleTypeaheadSelect.tsx

@@ -30,7 +30,6 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItem, setActiveItem] = React.useState<string | null>(null);
   const [selected, setSelected] = React.useState<string[]>([]);
-  const containerRef = React.useRef<HTMLDivElement>();
   const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
   const textInputRef = React.useRef<HTMLInputElement>();
   const menuRef = React.useRef<HTMLDivElement>();
@@ -241,15 +240,12 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
     </Menu>
   );
   return (
-    <div ref={containerRef as React.Ref<HTMLDivElement>}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current}
-        isVisible={isMenuOpen}
-        onDocumentClick={onDocumentClick}
-        onDocumentKeyDown={onDocumentKeydown}
-      />
-    </div>
+    <Popper
+      trigger={toggle}
+      popper={menu}
+      isVisible={isMenuOpen}
+      onDocumentClick={onDocumentClick}
+      onDocumentKeyDown={onDocumentKeydown}
+    />
   );
 };

package/src/demos/ComposableMenu/examples/ComposableOptionsMenuVariants.tsx

@@ -6,19 +6,18 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef?.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -93,9 +92,5 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx

@@ -97,5 +97,5 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper appendTo={toggleRef.current || undefined} trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

package/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx

@@ -5,7 +5,6 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -67,9 +66,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

package/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx

@@ -7,7 +7,6 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('Select a value');
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -80,9 +79,5 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx

@@ -14,7 +14,6 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
   const menuRef = React.useRef<HTMLDivElement>();
 
   const statusOptions: TreeViewDataItem[] = [
@@ -266,15 +265,5 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
       </PanelMain>
     </Panel>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        isVisible={isOpen}
-        appendTo={containerRef.current || undefined}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx

@@ -175,8 +175,6 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
     <Popper
       trigger={
         <MenuToggle
-          // Needed to append the menu closer to the toggle in DOM
-          id="temp-toggle-id"
           variant="typeahead"
           onClick={toggleMenuOpen}
           innerRef={menuToggleRef}
@@ -229,7 +227,6 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
       isVisible={isMenuOpen}
       onDocumentClick={onDocumentClick}
       onDocumentKeyDown={onDocumentKeydown}
-      appendTo={() => document.getElementById('temp-toggle-id')}
     />
   );
 };

package/src/demos/DataListDemo.md

@@ -70,15 +70,15 @@ class ExpandableDataList extends React.Component {
       );
     };
 
-    this.onToggle1 = isOpen1 => {
+    this.onToggle1 = (_event, isOpen1) => {
       this.setState({ isOpen1 });
     };
 
-    this.onToggle2 = isOpen2 => {
+    this.onToggle2 = (_event, isOpen2) => {
       this.setState({ isOpen2 });
     };
 
-    this.onToggle3 = isOpen3 => {
+    this.onToggle3 = (_event, isOpen3) => {
       this.setState({ isOpen3 });
     };
 

package/src/demos/Nav.md

@@ -396,7 +396,7 @@ class PageLayoutHorizontalNav extends React.Component {
       activeItem: 0
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -408,7 +408,7 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -754,7 +754,7 @@ class HorizontalNavWithSubnav extends React.Component {
       activeSubNavItem: 7
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -766,7 +766,7 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -1219,7 +1219,7 @@ class PageLayoutManualNav extends React.Component {
       isNavOpenMobile: false
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -1231,7 +1231,7 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });

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